Jump to content

Double 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 '''''Double Image Callout''''' is a full-width component type used to display a set of two clickable images with overlaid text. This component type is great for grabbing users' attention and driving traffic to a particular part of your site.
{{DrupalBack}}
The '''Double Image Callout''' is a full-width component used to display a pair of clickable images with overlaid text. This component is ideal for drawing visitors' attention and directing them to important content on your website.


== Elements ==
== Elements ==
Line 10: Line 11:
# Double Image Callout Item - Call to Action Link
# Double Image Callout Item - Call to Action Link


[[File:double-image-callout.png|800px|alt=Diagram depicting the elements of the Double Image Callout component]]
{{Screenshot|double-image-callout.png|800px|Diagram showing the fields that make up the Double Image Callout component.|The Double Image Callout component fields.}}


== Examples ==
== Examples ==
{{Callout|type=tip|title=Interactive Example|content=The preview below shows the Double 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-double-image-callout Open Component Playground]'''}}


{{StorybookComponent|id=swarthmore-theme-components-double-image-callout|height=650}}
{{StorybookComponent|id=swarthmore-theme-components-double-image-callout|height=650}}
Line 18: Line 25:
== Step-by-step Instructions ==
== Step-by-step Instructions ==


# Provide a '''''Title '''''for the '''''Callout on Image.'''''
# Provide a '''Title''' for the '''Double Image Callout'''.
# This component type is designed to support two images side-by-side (see above). To add the callouts items (repeat below twice for left and right items):
# This component is designed to display two callout items side by side. Repeat the following steps for each callout item:
## Enter '''''Callout Title '''''to provide a title to your callout item.
## Enter a '''Callout Title'''.
## Add the '''''Image''''' (landscape orientation is optimal)'''''.'''''
## Add an '''Image''' (landscape orientation is recommended).
### <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 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. Example: '''Sustainability''' for a callout about composting on campus.
## Optionally, add an '''''Abstract '''''that will appear at the bottom of the image (see example above).
## Optionally, add an '''Abstract''' that will appear at the bottom of the image.
## ''Optionally, ''add a '''''Call to Action Link '''''that will drive traffic to some part of your site.
## Optionally, add a '''Call to Action Link''' to direct visitors to another page on your site.
 


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

Latest revision as of 13:18, 10 July 2026

← Return to the Drupal User Guide

The Double Image Callout is a full-width component used to display a pair of clickable images with overlaid text. This component is ideal for drawing visitors' attention and directing them to important content on your website.

Elements

  1. Title (required)
  2. Double Image Callout Item - Callout Title
  3. Double Image Callout Item - Image
  4. Double Image Callout Item - Label
  5. Double Image Callout Item - Abstract
  6. Double Image Callout Item - Call to Action Link
Diagram showing the fields that make up the Double Image Callout component.
Figure: The Double Image Callout component fields.

Examples

Interactive Example
The preview below shows the Double 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 Double Image Callout.
  2. This component is designed to display two callout items side by side. Repeat the following steps for each callout item:
    1. Enter a Callout Title.
    2. Add an Image (landscape orientation is recommended).
      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 short Label to provide additional context. Example: Sustainability for a callout about composting on campus.
    4. Optionally, add an Abstract that will appear at the bottom of the image.
    5. Optionally, add a Call to Action Link to direct visitors to another page on your site.
Retrieved from "https://kb.swarthmore.edu/index.php?title=Double_Image_Callout_Component&oldid=3563"