Help:Before-after slider: Difference between revisions

Revision as of 07:38, 15 July 2026

The before/after slider lets a reader drag between a historic photograph and a modern re-shot of the same view. It is a natural companion to Rephoto: the free Rephoto app lines your new photo up with the old one, then both are uploaded here and shown together with a draggable slider.

Live example

ThenNow

Placeholder demo – drag the handle to wipe between "then" and "now". These are stand-in images until real photos are added.

How to use it

1. Align the pair. Use the free Rephoto app to line your new photograph up with the historic one – this is what makes the wipe match. That page has the download and a full explanation of how to use it.

2. Upload both photographs to the wiki. They should be the same size and crop, which is exactly what Rephoto produces.

3. Add the slider to the article:

{{Before after
| before = Historic_photo.jpg
| after  = Modern_photo.jpg
| caption = Royal Vauxhall Tavern, then and now
| beforelabel = 1985
| afterlabel  = 2026
}}

before / after: The two image filenames (required).
caption: Optional text shown beneath the slider.
beforelabel / afterlabel: The small corner tags (default "Then" / "Now").
width: Maximum display width in pixels (default 640).

See also the template: Template:Before after.

@@ Line 1: / Line 1: @@
-The '''before/after slider''' lets a reader drag between a historic photograph and a modern re-shot of the same view. It is a natural companion to the Rephoto alignment workflow: Rephoto lines the new photo up to the old one, then both are uploaded here and shown together with a draggable slider.
+The '''before/after slider''' lets a reader drag between a historic photograph and a modern re-shot of the same view. It is a natural companion to '''Rephoto''': the free [https://nearmark.co.uk/rephoto Rephoto app] lines your new photo up with the old one, then both are uploaded here and shown together with a draggable slider.
 == Live example ==
@@ Line 9: / Line 9: @@
 == How to use it ==
-Upload both photographs (ideally a Rephoto-aligned pair &ndash; the same size and crop), then add:
+'''1. Align the pair.''' Use the free '''[https://nearmark.co.uk/rephoto Rephoto app]''' to line your new photograph up with the historic one &ndash; this is what makes the wipe match. That page has the download and a full explanation of how to use it.
+'''2. Upload both photographs''' to the wiki. They should be the same size and crop, which is exactly what Rephoto produces.
+'''3. Add the slider''' to the article:
 <pre>
@@ Line 29: / Line 33: @@
 ; width
 : Maximum display width in pixels (default 640).
-The two images must be the same dimensions for the wipe to line up &ndash; which is exactly what Rephoto produces.
 See also the template: [[Template:Before after]].