Build a teaser to another page.
Last reviewed: April 20, 2022
There are three tabs: Title, Text and Image.
Settings are adjusted in two places.
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.
The pencil icon ('edit') provides access to crop and rotate. (Use the wrench icon to Configure all other settings.)
When you click the pencil icon, a new toolbar will display, with options to Crop, Rotate, and Enter Fullscreen mode.
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.
The wrench 'Configure' icon provides access to add/clear the image and change settings in the other tabs.
Heading: Type a title for your Photo Teaser.
Link to: If you would like your heading to link to another page, type that page’s URL into this field.
Open in new window: This optional setting forces the clicked link to open in a new browser tab or window.
When that 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. And if the hyperlink goes to a downloadable file, an document icon will instead be shown as well as the file size if the file is on the same server. (Read more about link labels.)
Alt text: Add a description of the image for users who may have difficulty seeing it.
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.
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.
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).
Only JPG, GIF and PNG formats are allowed. JPGs are recommended for best results and faster load times.
The image allows for use of the Adaptive Crop tool.
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.
Alternative text ('Alt text') is a best practice for all your UBCMS images and is often required for accessibility so screen readers can tell visually disabled users what they are not seeing.
Purely decorative images can be set as "This image does not require Alt text" in many components. This nullifies any Alt text that was already entered.
Captions -- Some components (e.g. Photo) support a nested Caption that can serve in place of Alt text, provided the Caption provides a meaningful description of the image.
However, Alt text is required in these contexts:
* When the image is a link, the Alt text should support the function of the link, not the image. 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').
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".