Templated Images (e.g.: Large and Small Image Fields)

When creating or editing most nodes, you will find a tabbed area at the bottom called Images.  This tabbed area has some standard templated fields, such as the Large Image and Small Image fields, used to add images to your pages.

Different content types may have more or fewer templated options (depending on the image needs for that content type).

We strongly encourage you to use these to add images to your pages.  You can use a combination of these fields, though they are most commonly used one per node.

Reasons for Using the Standards Fields

Using the standard templated large and small image fields has several advantages:

  • Images are automatically scaled to standard sizes, so you can use the same image in different places and different sizes easily.
  • Captions and copyright information is automatically pulled and displayed, so you don't need to manually add this (the way you do with image filters).
  • Standard layouts makes pages look more consistent and professional.
  • Images added using these fields are tracked on the image node itself, making it easy to track who's using a particular image so it doesn't get removed or unpublised while it's still in use.
  • Images in standard templated fields can be moved or changed when the template changes, meaning you can update the look at feel of your pages using subthemes.

Templated Images vs. Other Ways of Displaying Images

Templated images and galleries are the recommended way to add one or more images to a page.

However, they will not always give you the flexibility you need.

If you need to add images inline (not in the standard templated areas), use filters.  Filters are useful when you need to illustrate steps in a process, for example, but can cause their own issues.  (They are not tracked, for example, and don't pull the image metadata effectively. You need to add that manually.)

Adding Templated Images

To add an image, do the following:

  1. If you haven't already, upload your image and save the image node.
  2. Edit the node you want to add the image to.
  3. Open the Images tab.
  4. Enter the image you want to add in the large image or small image field.  To do so, you can do one of the following:
  • Start typing the title of the image node.  Drupal will look up images that have matching titles, and offer options. Select the correct image.
    Tip: Type slowly and give Drupal time to run the search.  You'll see the circle in the right of the field light up as it's doing so.
  • Click Browse to open the image explorer.  Use the explorer to find images that match the criteria you're looking for.  Click on the image title and click upload.
    Tip: The explorer is useful if you want to search the repository for images that others may have uploaded that you can use to illustrate your pages.
  • Enter the node id of the image you want to use.  Enter it as so:  [nid:50708]
    Obviously, you'll need to replace the number shown with the node id for your image.
    Click outside the field and Drupal will look up the node and display the title as well.

Note: Videos and image galleries operate similarly.  Upload the video or gallery node, then attach it using the same techniques you use to add images.