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 left_image="123" right_image="456" starting_position="50" accessible_name="Kitchen renovation"]Attributes
| Attribute | Default | Accepted values | Purpose |
|---|---|---|---|
left_image |
— | Library ID, library URL or HTTP(S) image URL | Image displayed on the left; determines comparison height. |
right_image |
— | Library ID, library URL or HTTP(S) image URL | Image displayed on the right. |
starting_position |
50 |
Integer 1–99 | Initial percentage of the left image. |
accessible_name |
Image comparison | Plain text | Accessible name for the group and slider. |
left_label |
Before | Plain text | Left side name in the slider's accessible value. |
right_label |
After | Plain text | Right side name in the slider's accessible value. |
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
The comparison fills its container and scales both images proportionally as the container changes size. Moving the divider reveals each image without changing its proportions.
Use equally proportioned images and review keyboard arrows, Home/End, Page Up/Page Down, dragging and initially hidden containers. Missing pairs render no comparer. Library IDs and matching library URLs use current metadata; external image URLs retain their source without a server download. Without JavaScript, the two images remain visible. The interactive player loads both comparison sources when it initializes, including when the fallback images use native lazy loading in a cached HTML page. Both the shortcode and Image Comparer block use the same conditional assets and continue rendering with Page Builder administration disabled.