Transparent Image Overlay Callout

Community Feedback

Along with the Folwell component criteria, the best practice and accessibility information included with each component was considered in the design and development phase. To provide feedback and suggest changes to the design below, please see this component request on the feedback page. The feedback period is open through February 14. Feedback will be taken into account before moving forward with this component.

Provide Feedback

About the Transparent Image Overlay Callout

Transparent image overlay callout allows you to layer visually pleasing text and colors on top of images

Example

University of Minnesota graduate

Tomorrow begins now.

New University of Minnesota graduates celebrate on all five campuses. See the Twin Cities spring commencement calendar.

UMN marching band

Homecoming 2019

105 years after it began, Homecoming still energizes the campus community. See a full list of events.

University of Minnesota graduates

Ranked #2 Nationally

For more than 125 years, the University of Minnesota College of Pharmacy has been at the forefront of preparing pharmacists to be leaders in health care and society, and is consistently recognized as

PharmD Program

Flowers and Foliage

Visit Campus

First impressions are everything–you should visit. Visit Folwell for more info.

Emphasis link

Flowers and Foliage

Visit Campus

First impressions are everything–you should visit. Visit Folwell for more info.

Emphasis link

Flowers and Foliage

Visit Campus

First impressions are everything–you should visit. Visit Folwell for more info.

Emphasis link


Usage

The transparent image overlay callouts are available through paragraphs only. To add a transparent image overlay callout to your content type, please follow the steps below.

  1. Enable the “Folwell Transparent Overlay Callouts” module by going to the “Extend” page.
  2. Go to your content type (structure/content types/”name of your content type”).
  3. Under the Manage fields tab, click the Add field button.
  4. Add a new field type, Paragraph, add the Transparent Overlay Callout label, and click the Save and continue button.
  5. On the next screen, click Save field settings.
  6. Under the reference type, click default as a reference method, and under paragraph types, select Folwell Transparent Overlay Callout.
  7. Click Save settings.
  8. Go to your content type and click the Manage Display tab and change the default Transparent Overlay Callout label to Hidden. (Note: this screen does not appear in Drupal Lite sites. Simply click Save on the screen that comes up and you will have enabled callouts.)
  9. The transparent overlay callout should be available in your content type.
  1. Add content (content/add content/”name of your content type”).
  2. Navigate to the Folwell Transparent Overlay Callout section.
    image browser screenshot
  3. Add the Callout Image. Browse existing images in the Media Library or upload a new image.
  4. Enter the callout text under the Callout Text section. 
    callout text area
  5. Under the Background Color dropdown, select the overlay background color you would like. 
    callout background color dropdown
  6. Under the Overlay Placement dropdown, select the position you would like the overlay background color. 
    overlay placement dropdown menu
  7. Click the Save button and the transparent overlay callout should be added to your page.
Best Practice
  • The main image serves as a background for the transparent overlay. The text in the overlay should be able to pop forward and be easily read.
  • Ensure the background image is easy to identify and has a connection to the overlaying text.
  • Avoid covering vital parts of your image with the overlay, such as a person’s face or a logo
Accessibility
  • Meets WCAG 2.1 AA color contrast requirements.
  • Has a high enough contrast for both light and dark background images.