Before / after block
Show a change with two pictures that swap on a tap: a restoration, a renovation, a photo edit, a skincare result.
How it works
Set a Before image and an After image of the same size, and a Description of what they show. Screen readers read it with "before" or "after", so describe the subject ("A rotary phone"), not the change.
- Where it can switch (Mail on iOS, iCloud Mail, Thunderbird and Yahoo Mail), the before picture shows with a hint under it. A tap swaps it for the after picture, and another tap swaps it back.
- Everywhere else, both pictures show, one above the other, each with its label, so the comparison still reads.
Configurable fields:
- Show labels, Before label and After label. Left blank, the labels are "Before" and "After" in the email's language.
- Hint: the line under the picture where a tap switches it. Left blank, it's "Tap to see after".
- Label color, Label font size, and the block's Background, Padding, Border and Corner radius.
Nothing is recorded when someone switches the pictures.
Examples
Subject
We restored a 1950s rotary phone
The preflight check warns when one of the two pictures is missing.