Embedded images

The Template System offers you a selection of image sizes when you embed images into the Body of your content. Choose from the following sizes when you are in the Media browser (Choose File) screen:

  • Original Size: Uses the original uploaded image, with zero alterations
  • Small (cropped square): 160x160 pixels
  • Small (no crop): 160 pixels wide
  • Medium (cropped square): 320x320 pixels
  • Medium (no crop): 320 pixels wide
  • Large (no crop): 600 pixels wide
  • XLarge (no crop): 800 pixels wide
  • XXLarge (no crop): 1200 pixels wide
  • Featured image: 340x227 pixels
  • Featured image - people: 240x320 pixels

View the image size showcase on our demo site.

To add an image to the body of your content, follow these steps:

  1. Place your cursor within the Body text at the location you want the image to appear.

  2. Click the Add Media icon. 
    media browser button

  3. Click Choose File to upload from another location such as your desktop, or the Library tab if the image is already online in the Drupal system
    upload image or library tab
  4. Locate the file you wish to upload from another location, select it, and click Open.  Click Upload.
  5. Click Next
  6. You must give the image an Alt Tag name (the field has a red asterisk).
  7. You may select an image size for your image (see below).
  8. If you would like a caption to appear below the image, fill in the Caption field. (Note that you will not be able to see the caption in the Admin view; only online in the page view.)
    caption instructions
  9. The caption can be minimally stylized. You can also add a link within the caption.
    Caption displayed in page view
  10. Click Save
  11. Click Submit
  12. You will be returned to the Editing window and the image will have been inserted into your content.
  13. If you want to continue editing your embedded image, or change the caption or Alt text, select the image, and click on the Media button again.

Embed image icon

Altering the style of the image

The image you have inserted can be formatted as Left Float Image, Right Float Image, Center Image or Inline Image.

Click on the image to select it, and from the Styles pull-down menu select the Object Style of your choice.

Styles pulldown image

You can also resize the image using the drag handle bars in the corners of the image. Be careful as too many edits can compromise the image. If it gets funky, delete it and add it again from the Library tab.

Inline editing of an image

Here is an example of an inline image that is styled to Float Right

inline image floated right

Full width images

There is a new widget that can be added to a page for displaying a "full width" image. This is meant to be used to add an image that takes up the full row width of a region because the image will be displayed in a high resolution.

  1. To add it, just click "Customize this page" on a page
  2. Click the "+" button to add a widget to a region
  3. On the left menu, select "Full width image" from the list near the bottom
  4. Select an image (or upload a new one) and place the widget
  5. Save the page

Embedding Secure Images

If you embed an image into the website using the Source view, it is important that you embed it as secure content. Make sure the URL has "https" in the URL or else you will receive a warning message. WDS strongly recommends that you import each image using the Media button.