Single Image Callout Component

The Single Image Callout component is a simple yet visually compelling component consisting of an image/video, abstract, and label. The abstract will slightly reposition itself based on the scrolling behavior of the user (also known as a parallax scrolling 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

Open

Examples

Step-by-step Instructions

1. Provide a Title for the Single Image Callout.

2. Optionally, add a short Label to give further context to the callout. 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: width of 1530px by height of 1020px).

   1. If using an existing image already in the system:

      1. Click Insert an Image button to launch the browser pop-up window.

      2. Navigate to the image under Select Image, clicking on the radio button to the left of the thumbnail to select it.

      3. Press the Select Image button in the bottom left.

   2. If using a new image:

      1. If you’re adding a new image to the system, click the Insert an Image button to launch the browser pop-up window button.

      2. Click Upload Image and then the Browse… button to browse your local system for the file, select it, and click the Select Image button.

   3. Optionally, add a Video URL. The system expects the video 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 way the system is intended to be used 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 holds the text).