The image block allows you to add an image to your site by uploading an image, selecting an image from the media library, or inserting the image from a URL.

Brookings Hall Detail Image Washington University Seal
Brookings Hall on the Danforth Campus of WashU. Photo by Mark Katzman/WUSTL Photos

How to use the image block

  1. Decide what image you want to add. If you need the image URL, have it copied to your clipboard.
  2. In the Page editor, navigate to the place on the page where you want to display the image.
  3. Click [+] and select Image from the block menu.
  4. Select Upload, Media Library or Insert from URL and follow the prompts.
  5. Fill in the alt text field with a brief description of the image for screen readers.
  6. In the floating menu, select the image alignment icon:
    1. Wide width (does not display on child pages due to side navigation)
    2. Full width (does not display on child pages due to side navigation)
    3. Center aligned
    4. Left aligned
    5. Right aligned
  7. If necessary, navigate to the right sidebar while the image block is active to specify Image size or display percentage.
    • If an image alignment is set to full width or wide width, changing the image size to anything other than “full size” will dramatically decrease your image quality.
  8. Click Update in the top right corner of the Page Editor and View Page to check the display. Make any adjustments to your settings as needed.

Sizing

In most cases, an image sized to 950px is the largest width you will need for the image block used on pages or posts.

  • The largest an image block will display on pages at any alignment is 750px wide on desktop and 920px wide on tablets.
  • The largest an image block will display on posts at default or wide-width alignment is 950px.

However, if you choose full-width alignment on a page without a sidebar or a post, the image block will stretch as wide as the browser window. In those use cases, we recommend sizing your image to 1920px wide.

Captions

When you add an image block, the caption entered in the media library will display below the image by default. The image caption can be changed or deleted from the block if desired. Edits to the block caption will not change the caption of the image in the media library.