Transforming UB’s digital communications.
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.
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
- 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).
- 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.)
- 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 Photo component opened in Edit.
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.
- Click the pencil icon, then click the 'Enter Fullscreen' button in the toolbar.
- Once in Fullscreen mode, click the Crop tool again in the upper left of the window.
- Choose Remove Crop to return your image to its original look.
- 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.
- 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.
- 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.
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.
- 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.
- The Alt Text value will be used first.
- 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 option becomes available when an image is referenced from Assets and is on by default.
- 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
The Photo component with the Caption tab exposed for editing.
- 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.
Alt text: Add a description of the image for users who may have difficulty seeing it.
- Alt text is required by New York State policy for most images and is always required if the image has a link or if the zoom feature is enabled, otherwise a caption can serve instead.
- Blanks or a carriage return are not in compliance and will be blocked.
- A period and space are now added at the end of any alt text that does not already end with punctuation. (This is not visible in the dialog box.) This increases the clarity with which a screen reader reads the page.
- See webaim.org for tips on writing alt text.
- If you change the image, you will be reminded to check the alt text for accuracy.
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.
- 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 |
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.
Once engaged, your component will stretch to fill the entire screen width, maintaining its size ratio.
Example of a website with a hero-sized image.
Brand and Stewardship Considerations
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 .
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.
Adaptive Crop settings in a Photo component.
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
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.
- Check the box to activate the Image Zoom.
- 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.
- There is no default text, so if left blank, no caption will be displayed.
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.
Accessibility Concerns
Alternative text ('alt text') is a short, written description that describes the appearance, content and/or function of an image on a webpage. Adding alt text is a best practice for all your UBCMS images and is required for accessibility so users will understand what they are not seeing.
Purely decorative images (that do not convey content or have a function on the page) can instead be set as "This image does not require Alt text" in some components, which also nullifies alt text that was previously entered.
Alt text is required in these contexts:
- If the image is a link. *
- If the image is zoomable.
- If the image depicts important information not clearly provided in a caption or nearby text on the page.
- If the image has a function; e.g. for navigation -- 'next slide'. *
- For the static thumbnail images that are generated by Video and Flex Module components.
* When the image is a link, starts an animation or video, or is a navigational element, alt text should indicate its function, not the image's content (i.e., "watch video ABC" and not "screenshot from video ABC"). 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').
Best practice:
- Screen readers automatically announce "image of...", so you do not need to include the word "image" or "graphic" in your alt text.
- Add a final period so screen readers will pause before reading the rest of the page.
- Be concise (under 150 characters) but include any significant elements to the image, e.g., "student using microscope in a research lab."
- If the image is used for navigation, describe what will happen, e.g. "next page of results".
- If the image is a link to another page, name or describe the target page (e.g., "School of Nursing.") but do not say it is a link -- screen readers indicate that as well. This also applies to zoomable Photos.
- If the image is a link that starts a video (named ABC), consider "YouTube video entitled ABC." or just "watch ABC."
- If the image contains a lot of text (e.g. a chart or table), provide this information in other ways on your page, perhaps as a nearby collapsible container labeled appropriately.
- Alt text should be added whenever images are uploaded into Assets.
Text Over Photo provides an accessible alternative to using images that have embedded text.
> Learn more about the Text Over Photo component.
Known Issues
Additional Reference:
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".
Additional Reference:
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:
- Use the 'open in new window' setting if loading a new page in the current window would disrupt their current activity (e.g. moving them to a new page while they are in the middle of completing a form).
- Use the 'open in new window' setting if loading a new page in the current window will break them out of a secure environment.
Additional Reference:
See an Example
Watch a Training Video
Training opportunities are available
The UBCMS does not support animations in the Photo component, and renders animated GIFs as a static image. We do not recommend using animations due to their technical limitations (including file size) and animation is generally an ineffective way to deliver information. They also present accessibility concerns: images with text are inaccessible to screen readers and animations without user controls can cause seizures and are distracting.
However, if you do need to display an animated GIF, try this approach but test on multiple browsers and OS and understand we do not support customization.
- Put your GIF in the DAM
- Add an HTML Snippet to your page with similar code:
<!-- Begin Snippet -->
<img class="animate-gif" src="/content/dam/your-site/some-folder/the-file.gif" alt="your Alt Text for the graphic."/>
<style type="text/css">
.animate-gif {width: 100%; height: auto;}
</style>
<!-- End Snippet -->