Photo of desk with computer monitor displaying Montclair State University website.

Before and After

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.


Kasser Theater in the dayKasser Theater in the night


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
Wide Aspect
Square Aspect

Code Sample

To use the before and after shortcode, copy and paste the sample below:

[[beforeandafter class="wide"]
<img src="" alt="Kasser Theater in the day" width="150" height="150" />
<img src="" alt="Kasser Theater in the night" width="150" height="150" />