Highlight Template

Build a shared content page that works well with the carousels and slide decks as a bridge page to other content.

On this page:

Last reviewed: October 11, 2022

Accessibility Concerns

State and federal rules require most images to be ADA compliant, with meaningful 'alt text.'  > read more on accessible images

Using This Template

Normally you would use a Highlight Template page as a handy bridge page leading to a richer source of content. You are essentially building a teaser, with an automatic link to that other page. This page was developed to work well in our carousel and slide deck components.

Navigate to your shared content area (e.g. /content/shared/www/your-site/) and click New, then select this template.

The page you create will appear with two stacked components and a bottom area that displays any tags that have been associated with the page.

Important Notice for Shared Content Templates

In order for any piece of shared content to function properly, there should not be any blank elements or incomplete links in the page (i.e., a photo component without a photo in it or an incorrect link).

No Additional Components Needed

Do not be alarmed if the Sidekick looks empty. This page does not allow any additional components to be added.

Highlight Component

The stacked components are very similar to the Sidebar Flex Module.

Highlight Tab

Heading - Enter a descriptive title for the page that will be displayed in its published teaser.

Primary Link - Add a URL that will be applied to the heading and image.  

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.) See webaim.org for tips on writing alt text.

Alt Text is generally required under state and federal accessibility laws.  Read more about Alternative Text.

Image Tab

This will show in the published teaser for this page.

  • Add an image by dragging one from the Assets Browser onto the component.
  • Another way to add an image is to click within the empty Image tab and then upload an image from your computer. (Your image will not be stored in the Digital Assets Manager if you choose this method.)
  • While basic image crop and rotation tools are available within the component, for best results use an external image editor such as Adobe Photoshop prior to upload.
  • Recommended ratio for images is 418 pixels x 262 pixels. (Often the final rendering will be 209 x 131.)
  • If you embed a video, you can also embed an image, which will then act as the 'freeze frame' starting image in the module.  (A 'start' button will automatically be displayed overlying the image.)

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.

Text Tab

It includes a Rich Text Editor that supports basic formatting (bold, italics and bullets) as well as hyperlinks.

Pre-formatted text can be pasted in from other sources (e.g. a word processor). This allows inclusion of additional text formatting such as sub- and super-script, but any incompatibly formatted text will be suppressed (e.g. titles or images).

Video Tab

Add the URL for a YouTube video.

  • Please note, the thumbnail for this video will NOT be shown in the published teaser for this page. As a workaround, create your own thumbnail and include it in the Image tab.

List Builder Component

This second component is the standard List Builder.

Master Class Resources

Was This Information Helpful?

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