Single Image Callout Component

← Return to the Drupal User Guide

The Single Image Callout component is a simple yet visually compelling component consisting of an image or video, abstract, and label. The abstract slightly repositions itself as the visitor scrolls the page, creating a subtle parallax effect.

Elements

1. Title (required, not displayed)
2. Label
3. Image/Video (not required, but strongly recommended)
4. Abstract (not required, but strongly recommended)
5. Reverse Alignment
6. Callout Color
   1. Options: Red (default), Gray

Figure: The Single Image Callout component fields.

Examples

Interactive Example

The preview below shows the Single Image Callout component using its default configuration.

To experiment with different layouts and other settings, open the interactive component playground.

Open Component Playground

Step-by-step Instructions

1. Provide a Title for the Single Image Callout.
2. Optionally, add a short Label to provide additional context. For example, Sustainability for a callout about composting on campus.
3. Add the Abstract that will appear beside the image.
4. Add the Image (optimal dimensions: 1530px × 1020px).
   1. If using an existing image already in the system:
      1. Click the Insert an Image button to launch the image browser.
      2. Navigate to the image under Select Image, select it using the radio button, and click Select Image.
   2. If using a new image:
      1. Click the Insert an Image button to launch the image browser.
      2. Click Upload Image, then click Browse… to locate the image on your computer. Finally, click Select Image.
   3. Optionally, add a Video URL. The system expects videos to come from YouTube.
      1. Note: If both a Video URL and Image File are present, the image will be used as the video's poster image. This is the intended behavior but is not required.
5. Use the Reverse Alignment checkbox to optionally flip the alignment of the image.
6. Set the Callout Color (the "callout" is the box that contains the text).