Jump to content

Triple Image Callout Component: Difference between revisions

From Swarthmore Knowledge Base
← Older edit
VisualWikitext
No edit summary
Tags: Manual revert Visual edit
Kwhiteb1 (talk | contribs)
itsstaff
189 edits
No edit summary
 
(2 intermediate revisions by 2 users not shown)
Line 1: Line 1:
The Triple Image Callout component is a full-width collection of images and short supporting text beneath each entry.
{{DrupalBack}}
The '''Triple Image Callout''' component is a full-width collection of images with supporting text displayed beneath each item.


== Elements ==
== Elements ==
Line 11: Line 12:
# Triple Image Callout Item - Call to Action Link
# Triple Image Callout Item - Call to Action Link


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


== Examples ==
== Examples ==


{{StorybookComponent|id=components-triple-image-callout--triple-image-callout|height=650}}
{{Callout|type=tip|title=Interactive Example|content=The preview below shows the Triple 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-triple-image-callout Open Component Playground]'''}}
 
{{StorybookComponent|id=swarthmore-theme-components-triple-image-callout|height=650}}
 
== Step-by-step Instructions ==
== Step-by-step Instructions ==


# Provide a '''''Title '''''for the '''''Triple Image Callout. '''Note: This is used for internal purposes only and is not displayed to visitors.''
# Provide a '''Title''' for the '''Triple Image Callout'''. ''Note: This is used for internal purposes only and is not displayed to visitors.''
# Optionally, add a short '''''Label''''' to give further context to the '''''Triple Image Callout'''''.
# Optionally, add a short '''Label''' to provide additional context for the '''Triple Image Callout'''.
# To create each of '''''Items (Columns)''''' that make up a '''''Multi-Column Callout''''':
# To create each of the '''Items (Columns)''' that make up the '''Triple Image Callout''':
## 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'''.
## Provide a '''''Title''''' (this will appear as black text).
## Provide a '''Title''' (displayed as black text).
## Provide a '''''Subtitle '''''(this will appear above the title as red text)'''''.'''''
## Provide a '''Subtitle''' (displayed above the title as red text).
## Optionally, provide a '''''Call to Action Link '''''that's related to this specific '''''Item (Column) '''''in order to drive traffic to some part of your site.
## Optionally, provide a '''Call to Action Link''' related to this specific '''Item (Column)'''.
## Optionally, check the '''''Open URL in a New Window'''''.
## Optionally, enable '''Open URL in a New Window'''.
# Optionally, provide a '''''Call to Action Link''''' that relates to the entire '''''Triple Image Callout '''''in order to drive traffic to some part of your site.
# Optionally, provide a '''Call to Action Link''' related to the entire '''Triple Image Callout'''.
 


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

Latest revision as of 13:20, 10 July 2026

← Return to the Drupal User Guide

The Triple Image Callout component is a full-width collection of images with supporting text displayed beneath each item.

Elements

  1. Title (required, not displayed)
  2. Label
  3. Call to Action Link
  4. Triple Image Callout Item - Title
  5. Triple Image Callout Item - Image
  6. Triple Image Callout Item - Subtitle
  7. Triple Image Callout Item - Call to Action Link
Diagram showing the fields that make up the Triple Image Callout component.
Figure: The Triple Image Callout component fields.

Examples

Interactive Example
The preview below shows the Triple 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 Triple Image Callout. Note: This is used for internal purposes only and is not displayed to visitors.
  2. Optionally, add a short Label to provide additional context for the Triple Image Callout.
  3. To create each of the Items (Columns) that make up the Triple Image Callout:
    1. 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.
    2. Provide a Title (displayed as black text).
    3. Provide a Subtitle (displayed above the title as red text).
    4. Optionally, provide a Call to Action Link related to this specific Item (Column).
    5. Optionally, enable Open URL in a New Window.
  4. Optionally, provide a Call to Action Link related to the entire Triple Image Callout.
Retrieved from "https://kb.swarthmore.edu/index.php?title=Triple_Image_Callout_Component&oldid=3564"