21 – Image Reveal
- 2 Minutes to read
- Print
- DarkLight
21 – Image Reveal
- 2 Minutes to read
- Print
- DarkLight
Article summary
Did you find this summary helpful?
Thank you for your feedback
Description
Interactive Image Reveal block. Images can be clicked to reveal up to five underlying images, tap each image to reveal the next, and so on. These could show offers, questions, and answers to a quiz, etc. The last layer can be an external link; however, a link can be applied to any layer, but subsequent layers are removed. All elements are editable and can be hidden or shown.
Default block view
Desktop
Mobile
Formatting options
Padding
Refers to the space between the block's content and border. This can be edited per the requirements using the panel on the right side (Details tab).
Option | Details | Default |
| Top | 30 |
| Top | 0 |
| Bottom | 0 |
| Bottom | 0 |
| Bottom | 30 |
Block Background Color
Used to change the block background color. Only use HEX color values. HTML email only recognizes 6-digit long-hand versions and has patchy support for shorthand versions.
Option | Details | Default |
Background Color | Block Background Color | #e0dede |
Font Weight
Used to change the font sizes for each element.
Option | Details | Default |
Heading Font Size | Values are in px; enter values | 34 |
Description Font Size | 18 | |
Subtext Font Size | 18 | |
T&C's Font Size | 14 |
Hide/Show
Use the toggles to hide or show all the different elements.
Option | Details | Default |
Hide/Show | Heading | Show |
Description | Show | |
Subtext-1 | Show | |
Subtext-2 | Show | |
T&C's | Show |
Image Selection
It allows you to change the number of images from 0 to 3.
Option | Details | Default |
Image Quantity? | 0 - Images | 3 - Images |
1 - Image | ||
2 - Images | ||
3 - Images |
Fallback Images
Upload the fallback images to the Content Store and add the image URLs to the relevant fields in the Details Tab.
Only the fallback image will be visible in the Editing UI.
Option | Details | Default |
Fallback Images | Fallback Image 1 | http://cts-demo.cust-mta.de/imgproxy/img/2041545096/fallback_01.png |
Fallback Image 2 | http://cts-demo.cust-mta.de/imgproxy/img/2041545097/fallback_02.png | |
Fallback Image 3 | http://cts-demo.cust-mta.de/imgproxy/img/2041545098/fallback_03.png |
Reveal Images
This refers to the options to add the reveal images. Upload the images to the content store first, then add the image URLs to the relevant fields in the Details Tab.
You must do this for all the reveal images you want to use. If you only have two main images and wish to have three taps to reveal those, then you will need to upload six reveal images. 3 for position one and 3 for position 2.
Image Links
This refers to the option to link the image between the 1 to 5 images.
The setting is the same for each set of links. Adding a link to reveal two on position one means the tap/reveal will stop at reveal 2, and the 3 rd will not render. Leaving all five off will render all five reveal images.
Option | Details | Default |
Interactive Image Toggle Links | Link Image 1 | Off |
Link Image 2 | Off | |
Link Image 3 | Off | |
Link Image 4 | Off | |
Link Image 5 | Off |
Fallback Image Links
It allows you to add the link to the fallback image.
Option | Details | Default |
Fallback Image Links | Fallback Image 1 Link | Blank |
Fallback Image 2 Link | Blank | |
Fallback Image 3 Link | Blank |
T&C's Link
Add the terms and conditions should they be needed.
Option | Details | Default |
T&C's Link | Terms and Conditions Link | Blank |
Compatibility
As with the Video, Carousel, and hotspot blocks, support can be limited, but applying fallback assets for incompatible devices will still make for enjoyable viewing and interaction.
Interactive view
Desktop
Mobile
Fallback view
Desktop
Mobile
Was this article helpful?