Photo Teaser Component

Build a teaser to another page.

On this page:

Accessibility
  • Images require Alt text.
  • Link text should be meaningful.

> Read more about making this component accessible.

Last reviewed: April 20, 2022

Using This Component

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.

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.

Edit (pencil icon) - Image Crop and rotate

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.

screenshot of the component when first opened in Edit mode.

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

  • 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

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.

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.

Technical Restrictions

  1. Image formats are limited to JPG, GIF, and PNG. (JPGs are recommended for best results and faster load times.)
  2. Alt Text is required by New York State policy, unless your image is purely decorative and does not aid in navigation.
  3. 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.

Accessibility Concerns

See an Example

Related Components

Was This Information Helpful?

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