Display an image.
Last reviewed: November 11, 2022
This component has four tabs: Image (includes Alt text), Caption, Image Properties, and Zoom.
Settings are adjusted in two ways:
Editing this component BEFORE a photo is added generates this error. When you first add this component, always Configure it (wrench icon) and add an image before you Edit (pencil icon).
When a Photo Component is set to Float beside neighboring components, it can be very hard to select. As an easy workaround, click Toggle Side Panel in upper left and switch to the Content Tree or use the "t" key shortcut. Then select and configure the component from there.
The pencil icon provides access to Crop and Rotate. Click 'Enter Fullscreen' to reveal pre-set crop choices: WIde Landscape, Landscape, Portrait and Square. This mode is also required to remove the crop later (see 'Remove a Crop' below).
Make your modifications then click the checkmark icon to save your changes. Click the X to cancel.
Once an image is cropped, the original version still remains in your UBCMS page, but you cannot uncrop it the same way you did your original crop.
The wrench 'Configure' icon provides access to add/clear the image and change settings in the other tabs.
Only JPG, GIF and PNG formats are allowed. JPGs are recommended for best results and faster load times.
Host large images in the DAM. Learn more about digital assets.
Alternative text ('Alt text') is a best practice for all your UBCMS images and is often required for accessibility.
Purely decorative images can be flagged "This image does not require Alt text" (when available), which nullifies any Alt text that was already entered, and some components (e.g. Photo) supports a nested Caption which can serve in place of Alt text, with these exceptions:
Tip: If you need a long caption or more formatting such as line breaks or font styles, consider using a separate Caption Component.
Alt text: Add a description of the image for users who may have difficulty seeing it.
Hide border: Specify whether you would like to show or hide a border around your image. If you select Show border a thin gray line will frame your image. The border is hidden by default.
For original image sizes, we recommend starting with at least 800px x 536px for landscape or 536px x 800px for portraits (aspect ratio 1.5:1). Larger images are encouraged up a maximum of 2500px.
|Image Size Options|
|Full Size (default) ||takes up full column width |
|Small Landscape||140 pixels wide x 88 pixels tall|
|Medium Landscape||219 pixels wide x 128 pixels tall|
|Large Landscape||300 pixels wide x 175 pixels tall|
|Icon||16 pixels wide x 16 pixels tall|
|Thumbnail||32 pixels wide x 32 pixels tall|
|Small Square||60 pixels wide x 60 pixels tall|
|Medium Square||140 pixels wide x 140 pixels tall|
|Large Square||219 pixels wide x 219 pixels tall|
|Small Portrait||60 pixels wide x 88 pixels tall|
|Medium Portrait||140 pixels wide x 180 pixels tall|
|Large Portrait||220 pixels wide x 283 pixels tall|
|Feature||for use in special cases |
|Full Width Hero||expands to full window/device width|
Feature size only applies to some page layouts, such as the Narrow with Photo and Left Navigation with Photo home page templates. In those layouts, this option allows the photo to expand beyond the column boundaries into the margins (left, right and top) to go 'full bleed'. (Compare to this page.) In layouts where Feature does not apply (most pages), it is treated the same as Full Size.
Once engaged, your component will stretch to fill the entire screen width, maintaining its size ratio.
Because of its prominent placement and size, high quality images are needed, that further your strategic messaging and our UB brand, supported by regular evaluation and assessment.
To over-ride default proportions, choose your preferred WIDTH plus Flexible Height .
The tool approximates how your original image will be cropped for desktop, mobile and teaser (thumbnail) views, allowing adjustments to better represent your desired focus in these contexts.
The interface responds to the main Image Size setting. Set the Image Size, then drag the Adaptive Crop cross-hairs to the center of your desired focus, and adjust the three sliders as desired to highlight the three zones.
The interface approximates the final displays. After you make your adjustments, we suggest you preview the results (e.g. using the mobile device emulator). And if you realize the List thumbnail is not working out as desired, consider also loading an image into page Properties that is cropped exactly as desired, where it will be used preferentially for teasers.
Photos marked 'Allow zoom' now create a gallery of all the zoomable photos on the page. When a visitor zooms in on any one photo, navigation is provided to view all zoomable images on the page. There is no setting to control this; it happens automatically when there is more then one zoomable photo on a page.
Tip: Adding a Link on the Image Properties tab will override zooming.
Alternative text ('Alt text') is a best practice for all your UBCMS images and is often required for accessibility so screen readers can tell visually disabled users what they are not seeing.
Purely decorative images can be set as "This image does not require Alt text" in many components. This nullifies any Alt text that was already entered.
Captions -- Some components (e.g. Photo) support a nested Caption that can serve in place of Alt text, provided the Caption provides a meaningful description of the image.
However, Alt text is required in these contexts:
* When the image is a link, the Alt text should support the function of the link, not the image. Screen readers will treat this image as a standard link.
Alt text can be added to images in Assets. This is required for images that are then used in the Photo Gallery component, while it can also be used as an alternate source for Alt text in some components (e.g. the Photo setting 'Get Alt text from Assets').
Link text should describe where the link will take the user in a manner that is appropriate to the context on your page and also the target page. This is also true for images that act as links.
Best practice: Avoid meaningless standalone phrases like "click here", "see all" and "learn more".
Links in many components can be set to open in a new browser window (or tab). The user can thus explore the new page, while preserving the source page (and your website) in the original tab. However, this can be confusing if the user does not realize a new tab has opened. They may become lost, confused how they arrived on that new page and unable to return to your site.
Best practice: let the user control their experience and stay in the same tab, with two notable exceptions: