{"id":3560,"date":"2024-12-11T15:56:00","date_gmt":"2024-12-11T20:56:00","guid":{"rendered":"https:\/\/www.montclair.edu\/university-communications\/?page_id=3560"},"modified":"2024-12-11T15:56:00","modified_gmt":"2024-12-11T20:56:00","slug":"before-and-after","status":"publish","type":"page","link":"https:\/\/www.montclair.edu\/university-communications\/web-development-and-experience\/montclair-edu-website-framework\/wordpress-shortcodes\/before-and-after\/","title":{"rendered":"Before and After"},"content":{"rendered":"

The beforeandafter<\/strong> 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.<\/p>\n

Example<\/h2>\n
\"Kasser\"Kasser<\/div>\n

Attributes<\/h2>\n\n\n\n\n\n
Name<\/th>\nPossible Values<\/th>\nRequired<\/th>\nNotes<\/th>\n<\/tr>\n<\/thead>\n
class<\/td>\nwide<\/strong> or square<\/strong><\/td>\nNo<\/td>\nConfigures the shape of the image<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Image Sizing<\/h2>\n

The beforeandafter<\/strong> shortcode will display images based on the class name you provide. Using the square<\/strong> class will create a 1:1 image, wide <\/strong>will create a 16:9 image, and leaving class blank will create a 4:3 image.<\/p>\n

Recommended Image Sizes<\/h3>\n
\n
Default Aspect<\/dt>\n
2000×1500<\/dd>\n
Wide Aspect<\/dt>\n
1920×1080<\/dd>\n
Square Aspect<\/dt>\n
1500×1500<\/dd>\n<\/dl>\n

Code Sample<\/h2>\n

To use the before and after shortcode, copy and paste the sample below:<\/p>\n

\r\n\r\n[[beforeandafter class="wide"]\r\n<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" \/>\r\n[\/beforeandafter]]\r\n\r\n<\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":411,"featured_media":3554,"parent":3552,"menu_order":10,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-3560","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3560","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/users\/411"}],"replies":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/comments?post=3560"}],"version-history":[{"count":4,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3560\/revisions"}],"predecessor-version":[{"id":3656,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3560\/revisions\/3656"}],"up":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3552"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/media\/3554"}],"wp:attachment":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/media?parent=3560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}