How to create a Before/After image comparison with [Compare] Tags

Mick West

Administrator
Staff member
The image below has a slider you can move that will show two version of an image, a before and after.



To do this yourself, simple add two images, one after the other, and then enclose them in [noparse] tags, like

... image 1 ... ... image 2 ...


You can use linked images, or attached images, just like normal.
[/noparse]
The images should be the same size, but will simply overlay at the left and bottom edges if not.

After editing a page with one of these, you may need to refresh the page before the images show up.
 
Last edited:
Top