A number of modules and methods exist for adding images to your Drupal site. This is a general overview of some of these modules and methods. They are arranged in order difficulty — difficulty for content creators as well as Drupal site builders. Note: for information about managing accessible images in Drupal, see the handbook page on Managing images and media for accessibility.

1. Not difficult

These methods are easy for content creators as well as Drupal developers.

a. Image API

Summary: Easy (sometimes required) module to add; allows you to use image processing programs on your webserver

This module might be required by some of the other Image modules. You probably do not need to install this module unless another module are you using requires it. It provides no new features to your Drupal site. It only provides an API other modules can leverage. Currently GD2 and ImageMagick support are distributed with ImageAPI.

TIP: ImageMagick or GD2 must be installed on your webserver in order for images to be processed and handled.

b. Image module

Summary: Easy module to add; allows images to be saved as individual nodes.

The Image module allows users with proper permissions to upload images into Drupal. Thumbnails and additional image sizes are created automatically. Each image is added as a node. Images could be posted individually to the front page, included in stories or grouped in galleries.

Image module ships with:

  • image_gallery.module: using taxonomy terms, organize and display your uploaded pictures in galleries
  • image_attach.module: allows you to easily attach image nodes to other node types. Adds a separate image field to the target node, pointing at the image node. Provides simple image upload, but little other control.
  • image_im_advanced.module: adds advanced ImageMagick options such as image sharpening to the ImageMagick image toolkit.
  • image_import.module: simplify adding multiple images by importing images from a directory on the server.

c. Image Assist

Summary: Easy module to add; Help content creators to add inline images. Provides a button for content creator to click, which opens a popup window which allows you to upload an image into a new node. Upon saving, code will be inserted into your textfield.

Image Assist embeds the image in a text field. Provides visual image selector, upload, and control over size and left/right float. Adds necessary HTML to text field. Requires Image module.

d. Using regular HTML markup and FTP images

Summary: You can add regular HTML <img> tags to your text, but be sure to properly set up and use the input filters.

While using regular HTML markup with images that you FTP to your webserver kind of defeats the purpose of using a content management system...it is still possible to manually add images to your Drupal nodes.

You would enter normal html:

<img src="http://www.example.com/myimage.jpg" alt="my image" />

  • However, if your images do not appear on your saved node page, there is a chance that the 'Input Format' to a 'filter' type has stripped out any <img> tags from the saved node. Drupal uses filters to process HTML markup entered by content creators. Check that the node 'Input Format' is set to a filter that allows <img> tags. Configure input format filters on this page: example.com/admin/settings/filters.

2. Moderately difficult

These methods involve multiple steps for a user or a developer to add image adding capacity to your Drupal site.

a. ImageField

Summary: Requires knowledge of setting up CCK content types and adding fields. ImageField creates an image upload field for CCK content types. Without also using 'ImageCache' module, the image will display to the user at full size (which could be very large if you do not restrict the size!).

ImageField provides an image upload field for CCK. It boasts features such as multiple images per node, resolution restrictions, default images, and extensive Views support.

ImageField does not provide a built-in thumbnail solution, but complements the incredibly powerful thumbnail generation module ImageCache. ImageField 6.x depends on the CCK and FileField modules; ImageField 5.x depends on the CCK and ImageAPI modules.

b. ImageField Crop

An AJAX crop on upload tool for ImageField.

c. Image FUpload

Bulk image uploader

d. Lightbox2

Summary: Takes some configuration to get module working. Lightbox2 integrates with images in your system. Enabling and configuring this module will convert all images in your Drupal system to display in a Lightbox upon clicking. Lightbox2 is one of many image gallery interactive displays.

The Lightbox2 module is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on most modern browsers.

e. ImageCache

Summary: Requires some configuration, watching a screencast might help explain how to user ImageCache. ImageCache allows you to set up preset image treatments (resizing, cropping, etc), which can be applied to an ImageField, Views output, or to resize and display any image stored in the Drupal filesystem though imagecache's themeing code.

ImageCache allows you to setup presets for image processing. If an ImageCache derivative doesn't exist the web server's rewrite rules will pass the request to Drupal which in turn hands it off to ImageCache to dynamically generate the file.

Image + ImageAssist vs. ImageCache + ImageField

Currently, there are some major systems for adding images to Drupal sites. Using "Image and Image Assist" together will allow content creators to add images to the website, and reuse the images, and place them anywhere in a textfield (inline). This is userful if your site has multiple bloggers who need to share images. The Image node can be extended with fields, and appropriate metadata can be applied to that Image. Major drawbacks to this system include: the inline images size templates are not as fluid and flexible as the presets of Imagecache. Another major drawback is that your content creators can place images anywhere in the text (inline.) This can make it more difficult to achieve a consistent look and feel on a website.

Using ImageField and ImageCache allows a very consistent presentation of images. While you can add captions, titles and alt text to an image uploaded through ImageField, that image is not saved as a node, and so you cannot re-use that file on other nodes. Also, you cannot add as much metadata to the image as you could if the image were a node (ex. ImageField images do not have taxonomies associated with them.)

A possible solution is described under 3. Difficult > Creating noderefences to image nodes, themed with ImageCache

f. WYSIWYG

Summary: It is possible to use a WSIWYG editor to add images to your site, and is often more intuitive for content editors who don't know HTML. However, WYSIWYG editors require time to configure and all have their own quirks.

Adding a WYSIWYG ("what you see is what you get") editor to your content fields requires some configuration on the administrator's end, but is often preferred by the end user. A client-side editor provides a visual interface for formatting text without the user needing to know HTML. Many WYSIWYG editors work with image plugins, like Image Assist and IMCE.

Popular editors TinyMCE, CKEditor, and OpenWYSIWYG. There are pros and cons to each; check out the Drupal WYSIWYG comparison chart to find one that suits your needs. The above links are just links to the Drupal modules, you will also need to download the editor plugin.

TIP: Alternatively, use the WYSIWYG APIto simplify the installation and configuration of your WYSIWYG editor.

The WYSIWYG editors often provide a button for adding an image that pops open a window for adding an image to your page. It will let you set things like width, border and alignment. However, you cannot upload an image from this interface. You will need an additional module to allow you to upload an image in your form:

  • IMCE module is an image/file uploader and browser that supports personal directories and quota, thumbnailing and batch upload. It works with many of the popular WYSIWYG text editors. To use IMCE with the WYSIWYG API module, you will need to install the IMCE WYSIWYG Bridge module. This currently only bridges IMCE for TinyMCE, FCKEditor and CKEditor.

  • Image Assist also plugs into some client-side editor/WYSIWYG editors. Currently, it can be used with TinyMCE via Wysiwyg API. Support for other editors is on the way.

  • Insert allows you to insert images created using Imagefield into your WYSIWYG editor. Currently it only works wth standalone TINYMCE, FCKEditor and the WYSIWYG project.
  • Image Picker mimics Wordpress's image adding features. works with CKEditor and WYSIWYG API.
  • WYSIWYG Image upload - an image upload module for WYSIWYG API
  • ElFinder - integration with the open source AJAX image uploader. Currently works with WYSIWYG API, with patches available for standalone CKEditor

g. Using Flickr images

Summary: Sort of easy to set up; requires content creators to enter special markup and look up the Flickr photo ID number; allows you to include Flickr images as inline text on a node page, by using special markup.

Access photos on Flickr's site via their API. The module provides a filter for inserting photos and photosets and allows the creation of blocks for rendering a user's recent photos and photosets.

3. Difficult (advanced methods)

a. Creating noderefences to image nodes, themed with ImageCache

Have your users add images as nodes, and create a nodereference field to the image. This nodereferenced field could be themed with imagecache. This would allow you to reuse an image, and control its placement. The image would not be inline, but rather, would be a separate field.

b. Embedded Media Field

Summary: Emfield allows you to easily add third-party images to your nodes. Depends on CCK, and you reliquish some control over how how the image displays

Embedded Media Field (Emfield) module works with CCK to add fields for third-party image, audio, or video fields to your node forms.

Embedded Image Field (the image component of Emfield) currently supports Flickr, Imageshack, Picasa and Photobucket images. It creates a field that you can paste the url from, for instance, a Flickr photo into, which will then display that photo in a three configurable sizes (full, preview and thumbnail), with a link either to the node or to the original page from Flickr.

TIP: If you are using Emfield module to pull images from third party sites to use on your own, you currently cannot use Imagecache to do fancy scale and crops on your images. In this case, you will need to use CSS or jQuery to do custom resizing of images.

Comments

kingmusa5@gmail.com’s picture

Guys whic hmodule can I use to ad a picture in the block section ? my email kingmusa5@gmail.com

MoSaG’s picture

I know this article is very old, but it was the only source I've found wich describes best adding images to text.

So, is there a "best practice" (i.e. a module, or combination of modules) if you want sections where thumbnails are on the left or the right side of the text, with caption and zoom function?
Like on this site: http://www1.wdr.de/themen/ratgeber/repaircafe114.html (scroll down)

If I use imagefield, then I can only put one or more images above or below my text but not left or right on my textsection. If I use Image Assist or CKeditor, I can do this, but because of the quirks of the WYSIWYG Editors (multiple blank lines, styles from the last line in the next, and so on), me as a web developer can go in the source and repair those ugly code constructions, an editor that doesn't know HTML doesn't have this ability and the design on the frontpage varies from editor to editor.

So I think there is no "foolproof" solution in drupal to insert images as you can see on the page linked above, is it true?

I know about another CMS its called Contao (http://www.contao.org/en/). There exists a sweet solution for that problem, on a page you add a new element "text with image", enter your text in the WYSIWYG editor and add an image within a form below, there you select the size (as thumb click/zoomable, or original) give a caption, left or right orientation, and so on. For the next section you select "only text", or "only image" or again "text with image", until all your sections are on the page.

Is there a module or combination of modules (like always ... ;) ) that can do thatin drupal too? (best if for drupal 6, but also for drupal 7)

(hope you understand my english ;) )

gr4viton’s picture

I am firmly satisfied with the combination TinyMCE + IMCE + LightBox2, I have written a tutorial about that on my blog, but unfortunately in czech language.. as I am, you know.. czech :).. not time for translating now..
but maybe google can help if you want to try:
http://translate.google.com/translate?sl=auto&tl=en&js=n&prev=_t&hl=en&i...

as for the breaking lines in WYSIWYG editors.. in TinyMCE it has troubled me too, but I twiddled the settings and now it's o'right ;)
Have a better day!