Adding Images

Insert photos or graphics into the body of a page or post.

Looking for photos you can use for your site?
The Danforth Campus Photo Library and the School of Medicine Photo Library offer a selection of pre-sized photos and information on requesting photography.

Before uploading an image

Crop it to the right size, touch it up or color correct, optimize it for web and save it with a short and descriptive file name.

Adding images to a page or post

A new page editor was released in June 2020. Do you know how to use it? See the guide to the new block editor »

1. Add an image block

  • Upload a new file
    • Click Upload or drag and drop files from your computer into the image block.
  • Select an existing file from the Media Library
    • Once you’ve added an image block to a page or post, click Media Library.
    • In the Media Library tab, select the image you wish to insert.
    • A checkmark in the top right corner of the image indicates that it is selected.
    • Click the Select button in the bottom right corner to add the image to the page or post.
  • Insert from URL

2. Add metadata

Screenshot showing the location of the Edit Image icon

Once you’ve inserted an image, select the Edit Image icon in the top toolbar of the block. Then, select Media Library. This will open the image in the Media Library for editing.

Check these properties on the right, in the Attachment Details section of the Media Library:

  • Alt Text
    Used in place of an image, such as by screenreaders or if an image is unable to load, alt text should be succinct and descriptive. Though critical for accessibility, the alt text may be redundant if the caption or other page content provides a description. Leave blank if details would annoy rather than assist users. (The theme will insert an empty or null alt attribute if left blank.) Visit WebAIM to learn more about optimizing the alt attribute for accessibility.
  • Title
    The image title displays when you mouse over an image in some browsers, including Firefox and Opera. WordPress uses the file name as the default title; editing it is optional. Avoid personal identifiers that violate HIPAA or FERPA.
  • Caption
    In addition to describing who or what the image shows, the caption can be used to credit the photographer or illustrator (e.g. Photo: Annie Leibovitz).

    Learn how to add and edit captions »
  • Description
    The description is visible and searchable within your Media Library, but it is not publicly visible on your website.

Editing photo captions

We’ve just described how to edit your metadata in the media library. Editing a file in the media library changes the file across your entire site. If you use the same image on multiple pages, consider how your edits will impact other pages.

However, you can also edit the image caption on the page. When you insert an image block, add or edit the caption below the image. Doing so only changes the caption on that page, and won’t change the file information anywhere else on your site.

3. Set alignment

Alignment can be set in the toptool bar of the block. Observe the following alignment recommendations (see step 6 below for sizing options):

  • Smaller images (thumbnail or medium):
    Align left or right so text wraps cleanly around them.
  • Larger images (large or full size):
    Select no alignment if you’d like the image to span the entire width of the content area (if it’s large enough). Images with no alignment sit left, but text does not wrap.

4. Choose whether to link the image

A link can be applied to the image using the Link icon in the top toolbar settings. In general, we do not recommend applying links to images.

5. Select style

There are two style options to choose from when inserting an image on a page:

  • Default: The default style will display the image in its original dimensions and is the preferred style in most cases.
  • Circle Mask: Shown below, the circle mask style works best with horizontal images (vertical images may experience unfortunate cropping). Use the circle mask style sparingly.
This is an example of the circle mask image style.

6. Select size

The theme has several pre-set display sizes, which you can adjust in the block settings in the right panel:

  • Full width: Inserts the image using its original dimensions or spans the full width of its container.
  • Large: Spanning the full width of a container, whether it is a column or the body content of a page, large size is ideal for horizontal images.
  • Medium: Sizing to about half-width of a container, medium sizing is deal for vertical images.
  • Thumbnail: 150 x 150 px, thumbnails should be used for headshots.

Image dimensions

Size percentages will resize the image at 25%, 50%, 75% or 100% of the selected Image Size (above). For example, a 50% dimension for an image file that is set to Medium size (350 pixels wide by default) will insert an image that is 175 pixels wide.


More on this topic