University at Buffalo (UB)
Transforming UB’s digital communications.
Photo Teaser Component
Build a teaser to another page.
On this page:
Last reviewed: November 11, 2022
Accessibility
- Images require Alt text.
- Link text should be meaningful.
Using This Component
component toolbar
There are three tabs: Title, Text and Image.
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.
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.)
Technical Restrictions
- Image formats are limited to JPG, GIF, and PNG. (JPGs are recommended for best results and faster load times.)
- Alt Text is required by New York State policy, unless your image is purely decorative and does not aid in navigation.
- You do not have the option of selecting a particular size for your image; Small Landscape (140 pixels wide x 88 pixels tall) is the default size.
Edit (pencil icon) - Image Crop and rotate
The pencil icon ('edit') provides access to photo-editing tools. When you click the icon, a toolbar will display, with options to Crop, Rotate, and Enter Fullscreen mode.
Use the Wrench icon to configure all other settings.
component toolbar
initial Edit toolbar
Known Issue
When you first add this component, always Configure it (wrench icon) before you click Edit (pencil icon).
Editing this component BEFORE a photo is added will generate an error "Sorry, could not start image editor..."
For more control on cropping, try the Adapative Crop options in the Advanced settings.
Configure (wrench icon) - Main Settings
The wrench 'Configure' icon provides access to add/clear the image and change settings in the other tabs.
Title Tab
Heading: Type a title for your Photo Teaser.
Link to: Add the corresponding URL or use the magnifying glass to browse for a target page within the UBCMS.
Most 'link to' and hyperlink settings in UBCMS components have an optional companion setting that specifies where the linked page will load. Sometimes this is a 'Target' dropdown and for other components it is a simple 'Open in new window' checkbox.
'Target' supports several settings:
- Same Tab - The link will load in the current browser tab or within the current frame/iframe if one exists. This is the default setting.
- New Tab - The link will load in a new browser tab.
- Parent Frame – The link will load within the parent iframe if one exists, otherwise it will load in the current browser tab.
- Top Frame – The link will ignore all frames/iframes and load in the current browser tab.
'Open in new window' means to open in a new tab of the current browser.
When 'open in new tab' or 'window' is selected, an additional icon will follow the linked text on your published page, to alert visitors they are about to be taken to a new browser tab, and possibly leave the current website.
Note: For accessibility reasons, be careful about sending your visitor to a new tab. This behavior may be unexpected and disortienting. (> Learn more about link accessibility.)
The component opened for editing showing the Title tab.
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.
Alt Text is generally required under state and federal accessibility laws. Read more about Alternative Text.
Text Tab
The component opened for editing showing the Text tab.
Add descriptive text to your Photo Teaser. When you view your Photo Teaser, this text will appear below the heading and to the right of the image.
Image Tab
The wrench icon ('configure') provides access to add/clear the image and change settings in the other tabs. Use the pencil icon to edit the image (crop or rotate).
- Give your Photo Teaser an image by dragging one from Content Browser into the Image Tab.
- Alternately, click within the empty Image tab and then upload an image to embed it into the page.
- If you already have an image in the Image tab but desire to replace it with a different one, click the Clear button adjacent to the crop/rotate tools.
Only JPG, GIF and PNG formats are allowed. JPGs are recommended for best results and faster load times.
Adaptive Crop
The image allows for use of the Adaptive Crop tool.
- 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.
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:
- If the image you use is less than 140 pixels wide x 88 pixels tall, it will stretch (and appear pixilated) to fill those dimensions.
- Flexible Height is not an option in the Photo Teaser, so crop images larger than 140 pixels wide x 88 pixels tall to ensure that the part of the image you want to display is shown.
