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

Mick West

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 [compare][/compare] tags, like [compare] ... image 1 ... ... image 2 ... [/compare] You can use linked images, or attached images, just like normal.
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: