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/web-services/wp-content/uploads/sites/119/2018/09/kasser-day-150x150.jpg" alt="Kasser Theater in the day" width="150" height="150" /> <img src="http://www.montclair.edu/web-services/wp-content/uploads/sites/119/2018/09/kasser-night-150x150.jpg" alt="Kasser Theater in the night" width="150" height="150" /> [/beforeandafter]]