The beforeandafter shortcode will allow you to display two images with a slider between them. The visitor can move the slider back and forth to switch between the before and after images.
Example
Attributes
| Name | Possible Values | Required | Notes |
|---|---|---|---|
| class | wide or square | No | Configures the shape of the image |
Image Sizing
The beforeandafter shortcode will display images based on the class name you provide. Using the square class will create a 1:1 image, wide will create a 16:9 image, and leaving class blank will create a 4:3 image.
Recommended Image Sizes
- Default Aspect
- 2000×1500
- Wide Aspect
- 1920×1080
- Square Aspect
- 1500×1500
Code Sample
To use the before and after shortcode, copy and paste the sample below:
[[beforeandafter class="wide"] <img src="http://www.montclair.edu/university-communications/wp-content/uploads/sites/144/2024/12/kasser-day-1024x576.jpg" alt="Kasser Theater in the day" width="1024" height="576" class="alignnone size-large wp-image-3638" /><img src="http://www.montclair.edu/university-communications/wp-content/uploads/sites/144/2024/12/kasser-night-1024x576.jpg" alt="Kasser Theater at night" width="1024" height="576" class="alignnone size-large wp-image-3639" /> [/beforeandafter]]