So you upload an image or three to your node, and you're wondering: "how do I get them in there?" ;) Well here's how I got them in there.

To follow this tutorial, you will need:

  • To feel comfy writing your own HTML for images, e.g. <img /> tags
  • To have installed CCK, ImageField and ImageCache.
  • To be familiar with how an ImageCache preset affects the upload process of an image when you use an image field to upload it.

You will also need the following information:

  1. The name of your uploaded image file
  2. The name of your image preset (the "image preset namespace"). Navigate to your ImageCache settings and hit "edit" for the preset in question - you should be able to see the preset name space.
  3. The name of the folder where your image field will store its images. To find this, go to content management and get to the configuration page for your image field. You want to know the "File path" under "Path settings".
    Warning: If you are using tokens to determine this, you will also have to figure out exactly what the path will be for your uploaded image.

So, assuming you have a piece of content, and are at the content editing page, this is how you get your ImageField images inline.

1. Upload your image

Remember the image name!

2. Write the <img /> tag

In the body of your node, write an image tag to point to your uploaded image. For the source attribute, use the following pattern:

src="sites/all/ [ "files" directory ] / imagecache / [imagecache_preset_name] / [image_field_name] / [image_file_name]"

So, if

  1. My default files directory was "files",
  2. My ImageCache preset file path was "my_teaser"
  3. My ImageField File Path is "article_images".
  4. And my uploaded file's name was "this_was_easy.png"

Then my <img /> tag would look like this:

<img src="sites/all/files/my_teaser/article_images/this_was_easy.png"/>

3. Ker-POW! Done.

If you want to style your images, just add some class names or direct style elements. I have basic .float-left and .float-right styles defined in my style.css, and I just add the appropriate class to float the inline element in whatever paragraph I put it.

Caveats

  1. "sites/all" is just where my installation finds its websites. If you're using "sites/default" or some other path, you have to take that into account.
  2. I don't know enough about ImageCache to know whether it can be configured so that presets save to different file paths.
  3. I have never actually tried this with tokens - if you have tokens running, and this isn't working, please post a comment to save people hours of frustration

I hope this helps, and doesn't confuse anyone.

Comments

fabius’s picture

fabius commented

Here is a procedure for newbies on how to add or trouble-shoot an image in Drupal 6.

1. EDIT THE PHP.INI FILE AND INCREASE PHP MEMORY to 96MB (see elsewhere for how to do this).
2. Make sure the "Upload" module is active.
3. Make sure you have permission to upload files. [Admin/User management/Permissions]
4. Check "File Uploads" in /admin/config and make adjustments if needed.
5. Make sure your "Content Type" (eg, Page) allow uploads under "Workflow".
6. Check the setting in /admin/config "Image toolkit" is suitable. This affects quality.
7. Prepare the image at the right size jpg, png, etc
8. There are better programs for this but Microsoft Photo Editor is a quick fix.
9. Check the image size matches the limits in item 4.
10. If not compress it a bit.
11. Edit the page in question and click "File attachments".
12. Browse your PC for the file. Click "Attach".
13. Uncheck "List" (this displays the url - not the pic).
14. Copy the url under the file name.
15. Click Save (or upload more files)
16. Images are usually stored in a folder called /files but this changes if you have installed other modules.
17. Now open "Input format" and choose "Full HTML".
18. Go to your text and insert a tag for the image at the point you want.
19. Here is an example:
20. <img src="http://www.yoursite.com/sites/yoursite.com/files/abcd_001.jpg" align="right" hspace="3"/> The file path in quotes is the url you copied in item 14. The example is a multi-site.
21. Check out an HTML reference for more details on the ALIGN, HSPACE and other attributes.

Good luck.

felix_ugf’s picture

felix_ugf commented

Hi i am looking for a module that let me do this Only local images are allowed. but like a slide show, were i just have a input were to put the url and then click on some upload or something, and if i want to add other image that i should be able to do it, all this with out have to create 5 "page contents" and in each one write the code i just put above, hope this all ready exist and if not it will be great if someone can do something like it...

Simon Naude’s picture

Simon Naude commented

The article above is maybe not the right place to post this comment to, but below is code to show how to include an image from imagecache in a template.

Requirements

Knowledge

  • PHP knowledge
  • How to work with/ modify a custom theme, such as hunchbaque

Module Requirements

  • CCK
  • Filefield
  • Imagefield
  • imagecache

To give you a 'tokenised' path : [files-dir]/imagecache/[imagecache-namespace]/[filepath]

Code :

// thumbnails
$icNamespace = '' ; // place ImageCache namespace/ preset name here
/* sites_files is a more secure place to store images than sites/default/files ; it lessens the chance that somebody will crack into sites/default/settings.php */
print theme('image', 'site_files/imagecache/'. $icNamespace .'/'. $node->field_images[0]['filepath']); /* single thumbnail */

 // if you have multiple thumbnails in one image field, you can do this :
 $icThumbCount = 0 ;
 while ($icThumbCount < count($node->field_images)) {
   print theme('image', 'site_files/imagecache/'. $icNamespace .'/'. 
     $node->field_images[$icThumbCount]['filepath']); /* single thumbnail */
   $icThumbCount++ ;
 }

More information from Lullabot (from which the above code was adapted)

fehin’s picture

fehin commented

subscribing

userofdrupal’s picture

userofdrupal commented

Test