Using images in Drupal nodes
Submitted by AE on Tue, 2005-02-08 11:13.
When I started on Content Management Systems (CMS) almost 5 years ago, images always posed the largest problems, especially regarding user-friendly interfaces. Nothing enriches content like a good pic or two, however, so here's a quick guide on how you can get images into your Drupal site.
Like any good CMS should, Drupal has several ways of getting there, each with it's own pro's and cons, depending on your needs.
An overview of how to use the image module comes with the module itself, so I'll not discuss them here. Instead, I'd like to give a detailed overview of the most effective way around this sticky situation, using only Drupal core.
Your Drupal site will need to allow file attachments to nodes for this method. If you have the correct permissions, your blog entry should have an "Attachments" section at the bottom of the blog entry form (Home » create content » blog entry).
Note: Only admin users can set the site settings. If you do not have admin permissions, ask your webmaster to give your user permissions to upload files. If you're an administrator and would like to know how to setup file uploads, read the entry in this guide on "Allowing file attachments to nodes"
Step 1: Upload your image
Click on the "Browse" button next to the "Attach new file" field in the form. A dialogue box should appear, allowing you to browse your local hard-drive. Select the image file you want to use in your post, and click "Ok".
The path to your image file gets filled into the "Attach new file" field automatically.
Click "Attach" to upload the file.
Note: The site administrator has set up some rules regarding uploads. Make sure your image conforms to these rules before uploading.
Step 2: Include the image in your post
Once the file has uploaded, the "Attachments" area will have a table of attachments, listing the file names,full paths to the attachments on the server and file-sizes with options to Delete and list the attachments. For images in a post, uncheck the "list" option next to your image.
You will need to know some rudimentary HTML for the next part. In the area of your post you want your image to appear, type the following (with the quotes):
<img src="{URL}" alt="{DESCRIPTION}" />Where {URL}= the full path listed in your "Attachments" section, and where {DESCRIPTION} = a brief description on what your image is about.
Note: Drupal nodes probably has some filters set up to strip potentially dangerous HTML tags from posts. Ask your administrator to add <img> to the "Filtered HTML" filter
Use the "Preview" button often, to see if it's working and how the image will affect your layout.
Note: Your Drupal site's theme establish how images render in general. Ask your webmaster or site designer to advize on uploading images or special classes that aligns your images.
Better approaches to a tough problem
Using images is often essential, but can make things decidedly tricky for users. Drupal doesn’t have a perfect solution but as usual there are multiple ways of doing things. For instance in some circumstances the Imagenode module works well.
I grappled with the problem while implementing Do Stuff in Cape Town. These were the approaches that I used:
1. Uploading attachments
The method you have described was the simplest to set up. However, when I tried to describe this to my sister she just couldn’t get it. It works but is tricky for the users – you can’t actually expect most of these guys to insert HTML. Also users uploaded large images, or pasted them into strange spots creating wonky nodes.
2. IMCE uploads
I was using TinyMCE (with almost all functionality removed) to allow field editing. I then found the IMCE module which adds a little user interface to the insert image button. That made the uploading process very simple and also offered controls over file sizes, types, and automatic resizing. Very cool, and this my sister could understand.
3. Imagefield and Imagecache
The final solution that I arrived at is the one that is currently live and works very well. I use the Imagefield CCK module to allow users to upload images. This works really easily, is Ajaxy, and is usable. Want to add an image? Just click upload and everything is taken care of for you.
The images themselves are used in a variety of modes. There is a thumbnail, a standard size (larger than thumbnail) for the posts and the original size (which must be smaller than 640x480). The excellent Imagecache module allowed me to pretty easily set all this up automagically!
Draconian times
Hey, thanks for the comment AI. Indeed. This post was written long before modules like image and imagefield made our lives easier.
My personal preferences resides with image (purely because I like images as nodes.. not a popular opinion, I'm afraid). Imagecache is wonderful for creating relevance enhanced image reductions and consistant thumbnails in teasers with larger images in full node view.
In summary, nowadays I use imagefield and imagecache for the end-user experience, while sticking to image module for my content team seeding content (Multiple uploads for all the clients' supplied artwork).
I still bump my head on users wanting to place more than one image scattered throughout the article. I'm a mark-up purist and shudder at the output from some WYSIWYG editors :/