Style & Appearance

Description

Image blocks allow you to insert images into pages and other entries. The image block allows you to select and display one image per block.

Available Styles

  • Image Block
    • alignment
    • span
    • caption, credit, and credit URL on/off
    • caption display style: inline/click reveal (added to Builder Feb '25)

    IMAGE BLOCK

    Image

    student smiling while listening to other students in foreground

    Image with caption & credit. Caption is displayed inline.

    student smiling while listening to other students in foreground

    This is a caption of an image.

    Credit: Penn State

    Image with caption & credit. Caption is displayed by click reveal.

    student smiling while listening to other students in foreground

    Admin UI

    Default Traits & Behaviors

    • Images can be uploaded to Assets or can be uploaded from within image-based Content Builder blocks and channel entries.
    • Some information about the image is connected with the image file, not the page where the image will be used. This means that if one image is used in multiple locations throughout a website, an update to a caption or credit will apply to every instance the image appears. (You can control what information displays at the page level using certain content builder blocks and toggle switches.)
    • Every image must have a title and alt text. The alt text allows a screen reader to describe the image to learners with visual impairments and is required for WCAG 2.0+ accessibility compliance. The title does not need to be the same as the filename.
      • Note: alt text should succinctly describe the visual content to someone with visual impairments.
    • Image captions, image credits, and a URL for the credit (such as copyright details or original source) may be added.

    Interface view

    Image Block - selecting the width, alignment, caption on/off, and caption display style.

    Screenshot of Image Content Builder Block in Admin UI

    Alignment

    Alignment options include:

    • Center
    • Left
    • Right
    • No Text Wrap (added to Builder Feb '25)

    Alignment + Width

    Full-width images fill the entire content area; alignment is irrelevant.

    For partial-width images:

    • In Left or Right alignment, the image will float alongside text and other page elements.
    • When Center or No Text Wrap are selected, the image will NOT float alongside content; the text and other elements will appear above and below the image only.
    Graphic representing image alignment options: center, left, right and no wrap.
    • To access and change details about an image, either click the title in the Assets list or double-click the image you’ve added to a page/entry. This opens an image panel where you can edit your image and related information. If you hover over the image, a button to Preview the image and a button to Edit the image will appear.
    • Preview will allow you to view the image in a larger window, clicking Edit will open additional tools to crop, rotate, and adjust the image’s focal point.
      • Focal Points - The focal point appears as a red dot during editing. You can drag the dot to the area of the image you want the page to prioritize when it renders the image in a window with a different ratio than the actual image. (for example: you provide a square image for a page element that is designed to display rectangular images. Your image will appear cropped when displayed. You can use the focal point to adjust how the image gets cropped - top and bottom equally? more on the bottom? More on the top? .)
      • After making changes, you can overwrite the existing image by clicking “Save” or you can create a new version that reflects your edits by clicking “Save as a new asset.”
    Image Editing Panel in Admin UI

    Recommendations