Flex Module Component

Bundle a headline, image or video (for narrow columns).

On this page:

Accessibility
  • Beware of duplicate link text.
  • Link text should be meaningful.
  • Images require Alt text.
  • List Teaser images require Alt text.
  • Use 'Open in New Window' sparingly.
  • Let users control animations.

> Read more about making this component accessible.

This component only works for YouTube videos.

Last reviewed: May 23, 2022

Using This Component

This component has four tabs -- Flex Module, Image, Text and Video -- accomodating various combinations of a block of text, an image, or a video.

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.

Tip: Default images and text are shown when you display lists as certain kinds of teasers. Learn how to override the defaults by adding custom text and images to your teasers.

Technical Restrictions

  • You are required to include Alt text for your Photo Teaser’s image. In some cases a blank (" ") may be substituted for nonessential images.

Configure - Main Settings

Click the wrench icon to 'configure' these settings.

Flex Module Tab

  • Headline: Type an informative title for your Flex Module that will be seen on the published page.
  • Subheading: Optionally add a descriptive secondary headline.
  • Primary link: Input a URL into this field. The subheading, button and image will all hyperlink to this URL. (If you use the video option and image option simultaneously, the image will instead link to your video.)
  • New window: Select Open link in new window if desired.
  • Image size: Select an image size:
    • Large (209 x 131 pixels)
    • Small Square (60 x 60 pixels)
    • Small Portrait (60 x 87 pixels)
  • Alt text: If you decide to include an image or video in your Flex Module, you are required by state law to write a functional description of your image (or video thumbnail) in this field. (See webaim.org for tips on writing alt text.)
  • Show button: Check the box to display a button that takes your visitors to the page with the URL you have specified in the Primary Link field.
  • Button text: Type text that will be displayed on your button.

Image Tab

This tab has the settings of a standard Photo Component.

  • Add an image by dragging one from the Content Finder.
  • Alternately, 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.
  • Alt text is required for this image. If there is also a link in the module, the Alt text must describe where the link goes, and not the image itself, because the image acts as a functional link.
  • You will be reminded to verify Alt text when changing images.

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.

Text Tab

This tab has the settings of a standard Body Text Component.

  • Type descriptive text for your Flex Module.
  • When you view your Flex Module, this text will appear to below your Headline and to the right of your image.

Video Tab

  • Add a video by entering YouTube video ID or URL.
  • The video will appear below your headline and above your subheading.
  • A play button will be superimposed on the image of the video.
  • Videos are represented by a thumbnail image, which requires alt text.
  • Note: Unlike the regular Video (YouTube), this component does not support starting part way through the video.

This component only works for YouTube videos.

Accessibility Concerns

See an Example

Was This Information Helpful?

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