Photo Component

Display an image.

On this page:

Accessibility
  • Images require Alt text.
  • Link text should be meaningful.
  • Use the Open in New Window setting sparingly.

> Read more about making this component accessible.

Last reviewed: November 11, 2022

Using This Component

This component has four tabs: Image (includes Alt text), Caption, Image Properties, and Zoom.

Settings are adjusted in two ways:

  • Pencil 'Edit' icon -- provides access to crop and rotate the image (once added).
  • Wrench 'Configure' icon -- provides access to add/clear the image and adjust settings in the other tabs. Start here for a new image.
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.

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

Edit (pencil icon) - crop and rotate

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.

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)

  • 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 this tool is disabled. 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.

Image Properties Tab

  • Link to: Add the corresponding URL or use the magnifying glass to browse for a target page within the UBCMS.
    • Using your image as a link will override the Zoom function.
    • Adding a link makes Alt text mandatory.
  • Image size: Use this drop-down menu to force the CMS to use your preferred display size.

The UBCMS optimizes images for best display on the user's device, but we recommend:

  • Vertical images between 600 - 1800 px tall.
  • Horizontal images between 800 - 2800 px wide.
  • Hero images work well with a 1900 px width.
  • Large images display clearest in full screen mode.
  • Do not skimp. Images may be pixelated in large settings.
    (Retina displays can show images at 2656 x 1744 px.)
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

To over-ride default proportions, choose your preferred WIDTH plus Flexible Height .

  • Flexible Height: This option maintains the image's original proportions as it is fitted into the selected image width.
  • Float: Allows subsequent components to display to the left or right of the image. No Float is the default. To limit this behavior, use a Divider set to Clear Float.

Adaptive Crop Settings

  • Adapative Crop is applied to your original image after any Image Size changes.
  • These modifications override any changes previously made with the main Crop tool. You will be asked 'Would you like to override the native crop and use the adaptive crop?' Click Override to get started.
  • Flexible Height is applied to your desktop image after Adaptive Crop adjustments and has no impact on mobile or teaser images.

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.

Advanced

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

Accessibility Concerns

See an Example

Watch a Training Video

Training opportunities are available

> Learn more about building UBCMS pages.

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)
(Required)