web_image_comparer Shortcode
The web_image_comparer shortcode renders the image comparer component.
The attributes below match the current Page Builder controls and public output. Use raw syntax only for reviewed content that cannot be maintained through the visual controls.
Usage
[web_image_comparer]Attributes
| Attribute | Default | Accepted values | Purpose |
|---|---|---|---|
left_image |
— | String unless stated otherwise | Select the image to be displayed on the left. |
right_image |
— | String unless stated otherwise | Select the image to be displayed on the right. |
device_visibility |
— | String unless stated otherwise | Applies the selected responsive visibility rule. |
el_class |
— | String unless stated otherwise | If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. |
el_id |
— | String unless stated otherwise | Sets a unique HTML ID on the rendered element. |
Customize the stylesheet
Administrators can replace the complete Juxtapose stylesheet under Settings → POM Theme → Advanced → Custom CSS → Shortcode CSS assets → Image comparer. Saving publishes an optimized per-site copy only for pages that already require web_image_comparer; reverting returns the existing web-image-comparer handle to the current image-comparer.min.css file.
This customization changes presentation only. It does not alter either image source, generated markup, slider behavior, responsive sizing, the bundled Juxtapose library, the existing web_image_comparer script, or conditional asset discovery.
Verification
Check web_image_comparer with the intended media, an appropriate responsive size and any required alternative text or transcript. Pay particular attention to left_image and right_image.