Image slider
Another fun image treatment, placed via asset swap, where two images are placed one on top of the other. The user can then switch between the two to see how they are the same and/or different. This is great for "then and now" photo pairs, such as pre- and post-disaster photos.
This component should target a presto image to swap. That presto image will appear on distributed platforms, so it should include both images somehow. The two images used for the slider should cropped to identical sizes/ratios.
In the configuration, before is the first image you see (the one on top). The after image is the one that is revealed (on the bottom). An initial animation, to catch the reader's eye, is triggered when the component is 25% up the viewport
Examples
- A vital piece of Black music history set for rebirth
- Then and now: What Kenosha looks like one year after damage from protests, unrest
Configuration
Required
| property | purpose |
|---|---|
storytellingComponent |
slider |
imageBefore |
Absolute paths to images on CDN. |
imageBeforeAlt |
Well-written values for the image alt property. These should be descriptive of the specific image (for those who cannot see the it), not a photo caption. |
imageAfter |
Absolute paths to images on CDN. |
imageAfterAlt |
Well-written values for the image alt property. These should be descriptive of the specific image (for those who cannot see the it), not a photo caption. |
Optional
| property | purpose | default |
|---|---|---|
method |
Adjusts the way the images slide/transition. Can be horizontal, vertical and fade |
horizontal |
layout |
Supports all container classes. Use them at your own risk. | center-well |
position |
Supports all container classes. Use them at your own risk. | None |
headline |
Adds a label-sized headline above the image presentation | None |
chatter |
Adds body-text sized chatter above the image presentation, underneath the headline. | None |
labelBefore |
Adds label over the top photo | None |
labelAfter |
Adds label over the bottom photo | None |
Example
{assets.12343243}
storytellingComponent: slider
method: vertical
headline: A toggle example
chatter: This is chatter readout intro. Blah.
labelBefore: Yoda with scribbles
labelAfter: A clean Yoda
imageBefore:https://www.gannett-cdn.com/indepth-static-assets/uploads/staging/1621098001/bc74c07b-373a-4893-a484-d1be394f1603-yoda-2.jpg
imageBeforeAlt: An in-depth slider showing Yoda, staring into the distance, with colorful scribbles obscuring him.
imageAfter:https://www.gannett-cdn.com/indepth-static-assets/uploads/staging/1621098001/2e2bfef5-93d7-4143-8d63-2bc7f5f9751c-yoda-1.jpg
imageAfterAlt: An in-depth slider showing a clean view of Yoda staring into the distance in his swamp.
{}