Photo Component

Display an image.

Flex UI Classic

Flex UI is available to all UBCMS users now. Learn more.

On this page:

Accessibility
  • Images require Alt text.
  • Use the Open in New Window setting sparingly.

> Read more.

Last reviewed: November 2, 2021

Using This Component

There are four tabs of settings for this component: Image (including Alt text), Caption, Image Properties, and Zoom.

Settings are adjusted in two places.

  • The pencil 'Edit' icon provides access to crop and rotate the image (once added).
  • The wrench 'Configure' icon provides access to add/clear the image and adjust settings in the other tabs.
Known Issue: "Sorry, could not start image editor..."

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).  

Selecting a 'floating' image

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.

Edit (pencil icon) - crop and rotate

The pencil icon provides access to crop and rotate. Click the X to cancel or the checkmark icon to save changes.

Basic image crop and rotation tools are available within the component, but for best results, consider a image editor software.

the Photo component opened in edit.

The Photo component opened in Edit.

Uncropping

the Photo component opened in edit showing the Full Screen crop options.

Full Screen crop otions.

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.

  1. Click the pencil icon, then click the 'Enter Fullscreen' button in the toolbar.
  2. Once in Fullscreen mode, click the Crop tool again in the upper left of the window.
  3. You will now be offered several choices:
    • Remove crop
    • Wide Landscape
    • Landscape
    • Square
    • Portrait
  4. Choose Remove Crop to return your image to its original look.
  5. You can now recrop the image or try one of the predefined shapes, then click the checkmark to save your changes.

Configure (wrench icon) - main settings

The wrench 'Configure' icon provides access to add/clear the image and change settings in the other tabs.

Image Tab (and Alt text)

Photo component opened to Configure settings.

Photo component opened to Configure settings.

  • Choose an image:
    • From digital Assets - Drag one from the Asset Browser onto the component. In this case, the image will remain in Assets, and is just referenced from your page.
    • From your desktop - Click within the Component's empty Image tab and then upload from your computer. Your image will be stored directly with the Web page in this case.
    • If you already have an image in the Image tab but want to replace it with a different one, click the Clear button adjacent to the crop/rotate tools.
    • Verify that the image is large enough for the space on the page you are filling; if an image is too small it will be stretched and thus appear pixelated or blurry on the page.
    • If you change the image, you will be reminded to check the Alt text.

Only JPG, GIF and PNG formats are allowed. JPGs are recommended for best results and faster load times.

  • Alt text
    • Add a description of the image for users who may have difficulty seeing it.
  • Get Alt text from Assets
    • This option becomes available when an image is referenced from Assets and is on by default.
    • When checked, the image's Alt text is populated with information from the original image in Assets (in its Properties), as follows:
      • The Alt Text value will be used first.
      • If there is no Alt text, the Description will be used.
      • If there is no Alt text or Description, the Title will be used.
      • If all three are blank, the Alt text field in the component's settings will be blank, and since text is required, you will need to either provide suitable Alt text in Assets, or deselect 'Get text from Assets' and provide the Alt text locally in the component.
    • Be careful that suitable Alt text is available. To easily set or adjust that value, once the image is added, click 'Go to Original' to go right to that image in Assets.
    • Please note, this is a live reference so any change in Assets will influence your page as well.
  • This image does not require Alt text
    • Use this option for purely decorative images that do not aid in navigation (is a link, or has zoom enabled).

Image Alt Text Details

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:

  • Alt text is required if the image is a link.
  • Alt text is required if the image is zoomable.
  • Alt text is required if the image contains important information not clearly provided in nearby text (or the caption).
  • Alt text is required for the static thumbnail images that are generated by Video and Flex Module components.

Caption Tab

  • Caption: Type a brief, descriptive sentence for your photo. 
    • A caption can serve instead of Alt text, unless the image is a link, or has zoom enabled.
    • The Rich Text Editor allows customization. By default, the text will be in italics. Use the italics tool to change this.

Tip: If you need a long caption or more formatting such as line breaks or font styles, consider using a separate Caption Component.

the Photo component with the Caption tab exposed for editing.

The Photo component with the Caption tab exposed for editing.

Image Properties Tab

  • Link to: Type a URL and your image will link to it. Using your image as a link will override the Zoom function.
    • Adding a link makes Alt text mandatory.
  • Open in New Window: When this is selected, an additional icon will follow the linked text, to alert visitors that they will be taken to a new browser window, or even leave the current website.
  • Image size: Use this drop-down menu to force the CMS to use your preferred display size.
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 *
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.

To over-ride these default proportions, choose your preferred WIDTH, and then select Flexible Height in the Advanced settings.

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.

Advanced

  • Flexible Height: Check the box to enable this option, which maintains the image's original proportions as it is fitted to the image width selected.
  • Float: A floating image causes text and titles to flow around it to the left or right. Use this drop-down menu to select No Float (default), Left, Right.
  • 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.

Zoom Tab

  • Allow zoom: Image zoom allows visitors to view a full-sized view when they click on it.
    • Check the box to activate the Image Zoom.
    • Note: the images on this page use the zoom feature.
    • Enabling zoom makes Alt text mandatory.
  • Caption for zoomed photo:  Type a caption that will show as 'mouseover text' and also displays beneath the image once it is enlarged.
    • There is no default text, so if left blank, no caption will be displayed.
    • It includes a Rich Text Editor that supports basic formatting (bold, italics and bullets) as well as hyperlinks.
Zoom Gallery

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.

the Photo component with the Zoom tab exposed for editing.

The Photo component with the Zoom tab exposed for editing.

Technical Restrictions

  1. Allowable image formats include JPG, GIF, PNG and PSD (PhotoShop) and others. Most images are recompressed in JPEG format for optimal page performance. GIF and PNG images are kept in those formats to retain their unique features (lossless compression, selective color palettes, transparency).
  2. Images uploaded directly into components should be less than 6000 pixels in both height and width or they will not load and be flagged with a red 'X' in author. (This restriction does not apply to images uploaded into Assets.)
  3. Alt text is required by state and federal accessibility laws, unless your image is purely decorative and does not aid in navigation, but is mandatory if the image is a link or has Zoom enabled.

Accessibility Concerns

See an Example

Watch a Training Video

Master Class Resources

Related Components

Was This Information Helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)