University at Buffalo - The State University of New York
Skip to Content
UB Web Management

Transforming UB’s digital communications through process and tools

Photo Teaser Component

Combine a header, image, link and text all in one component.

The component as it is first displayed on the page.

The component as it is first displayed on the page.

Using This Component

Add the component to the page. There are three tabs: Title, Text and Image.

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: Write a description of your Photo Teaser’s image in this field.

Tip: While Alt Text is required, if the image is purely aesthetic and does not aid in navigation, you may instead use a space (" ").
Read more about Alt text.

The component opened for editing showing the Title tab.

The component opened for editing showing the Title tab.

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.

The component opened for editing showing the Text tab.

The component opened for editing showing the Text tab.

Image Tab

Give your Photo Teaser an image by dragging one from the Content Finder into the Image Tab.

Another way to add an image is to click within the empty Image tab and then upload an image. (Your image will not be stored in the Digital Asset Manager if you choose to upload a file using this method.)

Crop and/or rotate your image by using the buttons that appear in the Image tab after you import your photo into it.

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.

Images should normally be under 1 MB.

The component opened for editing showing the Image tab.

The component opened for editing showing the Image tab.

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.

Advanced Use

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

Was this page helpful?

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

On this page:

See an Example:

Image Sizes

We recommend 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.

Skillful use of visual elements such as photography and video will lift your content to an entirely new and engaging level, one that words can’t achieve alone.

Related Components:

Related Videos:

Last Reviewed:

October 28, 2016