Instructions for Common Content Tasks: Configuring Images

A Drupal CMS Guide for Marketers

There are two ways to add images to your website: uploading images through the Image field or adding images directly to the content of the Body. Some content types have Image fields for attaching image files. Images attached with these fields will automatically be displayed with your content. You can also add images to the Body field, in-line with your body text. Below are instructions for adding each type of image.

Attaching Images Via Image Fields

Different content types may have one or more Image fields for attaching images to your content. The purpose of each Image field will vary, but they will all look something like this:

image field

Beneath the field you’ll see information that tells you how the image will be used on the website, as well as details on what file types and sizes are allowed for this particular field. Images that are attached via fields are automatically formatted and positioned on the page. You will have no control over how these images are displayed.

To attach an image via an Image field:

  1. Click the Choose File button.
  2. In the dialog box that opens, navigate to the image you want to upload, select it, and click the Open button.
  3. Back in the main window, click the Upload button.
  4. Once your image has been uploaded, the Alternate Text field will appear. Type in a short, descriptive name for the image. 

Note: The alternate text serves a number of functions. Its original purpose was to provide descriptions of images for visually impaired visitors using screen readers. The alternate text is also displayed if an image cannot be loaded, and search engines use it to determine what an image is.

Configuring In-Line Images

Adding in-line images to the Body field lets you add images alongside the body text. Also, unlike attaching images via fields, you have more options for controlling how in-line images appear on the page.

To add an in-line image to the Body field:

  1. Click the Image button on the formatting toolbar: image icon
  2. The File Browser window will appear. From this window, you can insert an image by either selecting an image that has already been uploaded to your website, or uploading a new image to your website.
  3. To insert an image that already exists on the website, go to the Navigation column on the left, you’ll see a folder tree of all of the files on your website. Click on a folder to display a list of files in the File names column on the right, then Click on the image file you want to insert. You’ll see a preview of the image at the bottom of the window.
  4. To upload and insert a new image, click the Upload button the left-hand side of the toolbar. Beneath the Upload button, a dialog box will appear that looks like this:

    File upload

    1. Click the Choose File button. In the dialog box that opens, navigate to the image you want to upload, select it, and click the Open button. Back in the File Browser window, you have the option of creating thumbnails for your image in three sizes. To create thumbnails, click the checkbox for the size you want. If you don’t need any thumbnails, leave them unchecked. Then, click the Upload and Insert File buttons on the toolbar to finish.
    2. NOTE: Thumbnails represent reduced-size versions of your images that make it easier to maneuver and organize them.
    3. Back on the main Create [Content] page, you should see your new image in the Body field.
    4. To adjust the size or position of the image, double-click it to open the Image Properties window:

      Image Properties window

      1. In this window, you’ll find the following options:
        • URL/Browse Server - This text box will display the URL for your chosen image. Click the Browse Server button to return to the File Browser window, where you can choose a different image file.
        • Alternative Text – Type a short, descriptive name for your image.
        • Width & Height – You can change the size of your image here. Click the image of the Lock to edit the width and height separately. Click the Circular Arrow to reset the image to its original size.
        • Border – Type in a number of pixels here to add a border of that thickness to the image.
        • HSpace & VSpace – Type a number of pixels here to add that amount of white space between the text and either the horizontal (HSpace) or vertical (VSpace) edges of the image.
        • Alignment – Select ‘Left’ or ‘Right’ from this dropdown to wrap the text to one side of the image.
      2. Make as many adjustments in this window as you like, and then click the OK button to save your changes.
      3. To make any further adjustments to this or any other in-line image on your website, simply double-click the image to get back to the Image Properties window.

      NOTE: Before adding an in-line image, keep in mind that many content types already have Image fields setup to display images with your content. Most of the time, if you want to add images to your content, you’ll be using the Image fields. In-line images are typically reserved for adding photos to the body of a blog post or a page with a lot of text, that are used to grab the attention of the reader.

       


      For more how-to guides on Drupal tasks, check out the other posts in our blog series, Instructions for Common Content Tasks