Skip to main content

Align an Image

Access Restricted. How to align an image left or right and wrap nearby text around it. How to add a caption to an image and how to troubleshoot caption layout.

This article applies to: IT Communication and Documentation


Use the Figure Style to Align an Image

  1. Enter the text on your page.
  2. Add an image to your page.
Images aligned using the figure style take up about 40% of the page width. 400 pixels is a good width. Learn more about best practices for image size.
  1. Decide whether you want a caption for your image.
  • If desired, add caption text directly after the image.
Best Practice for Accessibility: Make sure the caption text is not the same as the image's Alt Text.
The caption text must be in the same paragraph as the image before applying the Figure style.

Picture with its caption text highlighted. The caption is part of the same HTML paragraph tag.

  • If you don't want a caption, make sure the image has no text in its paragraph tag.

Image setup for no caption with no text in the same paragraph tag

If your text is in the same paragraph tag as the image, Drupal will set that text as the caption when you apply the Figure style. To remove unwanted text from the caption, see Troubleshooting Captions.
  1. Under the Styles drop down, select Figure: Left or Figure: Right as desired.
    Styles drop down menu with Figure: Left and Figure: Right highlighted
You can use the plain Figure style (not left or right) for full-width images. However, you only need the plain Figure style if you want a caption or gray shading around your image.

For most full-width images, just insert them using the Add Media button and don't apply the plain Figure style.

Troubleshooting Captions

Article Text Got Caught in the Picture's Caption

Example

Text from the body of the article is incorrectly shown as the image's caption

To fix this

  1. Select the Source button.
  2. Navigate to the figure where the article text is displayed incorrectly.
Use a page search (CTRL or CMD F) for <figure to quickly find the image's figure tag.
  1. Cut the text out of the figure tag.
    HTML Figure tag with the unwanted text inside it selected and highlighted
  2. Select the Source button again to return to CK Editor.
  3. Paste the text above or below the image, as desired.

Corrected Example:

Text from the body of the article has been removed from the image's caption and now sits beside the image

Text excerpt from Laws Concerning Food and Drink; Household Principles; Lamentations of the Father by Ian Frazier.

Caption Text Does Not Wrap Properly

If you entered a caption and the text is not wrapping properly, hit the Enter key at the beginning of the caption text.

Bad wrap: caption is still on the side.
Picture with its caption on the side instead of below the image


Good wrap: after hitting the Enter key, the caption has moved below the image.
After hitting the Enter key, the caption has moved below the picture.

About this Article

Last updated: 

Tuesday, July 31, 2018 - 10:04am

Was this page helpful?

Your feedback helps improve the site.

Comments?