Display an image on your page.
Add the component to the page. There are four tabs of options for the Photo component: Image, Caption and Alt Tags, Image Properties, and Zoom.
If you choose the Zoom feature, all zoomable images on the page can then be accessed in a 'zoom gallery.'
Only JPG, GIF and PNG formats are allowed. JPGs are recommended for best results and faster load times.
Alt Text is generally required under state and federal accessibility laws. Read more about Alternative Text.
Tip: If you need a long caption or more formatting such as line breaks or font styles, consider using a separate Caption Component.
|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|
|Featured||for use in special cases |
(see Advanced Use below)
Control how images display in unusual configurations by specifying crop focus and zoom for small screen-sized devices, teaser thumbnails, off-center point images (e.g. full-width narrow banners) as well as fitting 'non-ideal' images into almost any display size.
Applied after other adjustments (e.g. main crop setting).
Only impacts images that are being reduced in size by the UBCMS.
Horizontal crop focus midpoint
Vertical crop focus midpoint
Image has been adaptively cropped at Vertical 0%, Horizontal 0% and Zoom 300%. List Builder teaser shows the imapct, with the image focused top right and zoomed in tighter on the falcon's head.
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: Zooming is incompatible with making the image a link. Using a link (on the Advanced tab) will override zooming.
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 Featured Size does not apply (most pages), it is treated the same as Full Size.
Images must have meaningful 'alt text.' A caption can serve as alt text, unless the image is a link or has zoom enabled.
Always grab the green border to drag a Photo to a new place on the page. Dragging by the image itself will either just not work, or in some browsers, will create a duplicate image!
> read more about this Known Issue
We recommend 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.
But beware using many large images (over 1 MB each) in a Photo Gallery. > Known Issue: Photo Galleries Do Not Load or Load Very Slowly
How to Crop
November 25, 2020