Jump to content

Single Image Callout Component: Difference between revisions

From Swarthmore Knowledge Base
← Older edit
VisualWikitext
Kwhiteb1 (talk | contribs)
itsstaff
189 edits
No edit summary
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
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).
{{DrupalBack}}
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 ==
== Elements ==
Line 11: Line 12:
## <u>Options</u>: Red (''default''), Gray
## <u>Options</u>: Red (''default''), Gray


[[File:Screenshot 2024-06-14 at 1.40.43 PM.png|800px|alt=Diagram depicting the elements of the Single Image Callout component]]
{{Screenshot|Screenshot 2024-06-14 at 1.40.43 PM.png|800px|Diagram showing the fields that make up the Single Image Callout component.|The Single Image Callout component fields.}}


== Examples ==
== Examples ==
{{Callout|type=tip|title=Interactive Example|content=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.
'''[https://toolkit.swarthmore.edu/?path=/story/swarthmore-theme-components-single-image-callout Open Component Playground]'''}}


{{StorybookComponent|id=swarthmore-theme-components-single-image-callout|height=650}}
{{StorybookComponent|id=swarthmore-theme-components-single-image-callout|height=650}}
Line 19: Line 26:
== Step-by-step Instructions ==
== Step-by-step Instructions ==


# Provide a '''''Title '''''for the'' '''Single Image Callout'''.''
# Provide a '''Title''' for the '''Single Image Callout'''.
# Optionally, add a short '''''Label''''' to give further context to the callout. Example: '''Sustainability''' for a callout about composting on campus.
# Optionally, add a short '''Label''' to provide additional context. For example, '''Sustainability''' for a callout about composting on campus.
# Add the '''''Abstract''''' that will appear beside the image.
# Add the '''Abstract''' that will appear beside the image.
# Add the '''''Image''''' (optimal dimensions: width of '''1530px''' by height of '''1020px''')'''''.'''''
# Add the '''Image''' (optimal dimensions: '''1530px × 1020px''').
## <u>If using an existing image already in the system</u>:
## <u>If using an existing image already in the system</u>:
### Click '''''Insert an Image '''''button to launch the browser pop-up window.
### Click the '''Insert an Image''' button to launch the image browser.
### Navigate to the image under '''''Select Image''''', clicking on the radio button to the left of the thumbnail to select it.
### Navigate to the image under '''Select Image''', select it using the radio button, and click '''Select Image'''.
### Press the '''''Select Image''''' button in the bottom left.
## <u>If using a new image</u>:
## <u>If using a new image</u>:
### If you’re adding a new image to the system, click the '''''Insert an Image '''''button to launch the browser pop-up window button.
### Click the '''Insert an Image''' button to launch the image browser.
### Click '''''Upload Image '''''and then the '''''Browse…''''' button to browse your local system for the file, select it, and click the '''''Select Image '''''button.
### Click '''Upload Image''', then click '''Browse…''' to locate the image on your computer. Finally, click '''Select Image'''.
## Optionally, add a '''''Video URL'''''. The system expects the video to come from YouTube.
## Optionally, add a '''Video URL'''. The system expects videos to come from YouTube.
### ''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.
### ''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.
# Use the '''''Reverse Alignment''' ''checkbox to optionally flip the alignment of the image.
# Use the '''Reverse Alignment''' checkbox to optionally flip the alignment of the image.
# Set the '''''Callout Color '''''(the “callout” is the box that holds the text).
# Set the '''Callout Color''' (the "callout" is the box that contains the text).
 


[[Category:Drupal]]
[[Category:Drupal]]
<!-- Imported from Confluence page id=20513062 (https://swatkb.atlassian.net/wiki/spaces/DRUP/pages/20513062/Single+Image+Callout+Component) -->

Latest revision as of 13:15, 10 July 2026

← 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
Diagram showing the fields that make up the Single Image Callout component.
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).
Retrieved from "https://kb.swarthmore.edu/index.php?title=Single_Image_Callout_Component&oldid=3562"