Help:Before-after slider - Revision history

LGBT-HP at 08:58, 15 July 2026

2026-07-15T08:58:46Z

← Older revision		Revision as of 08:58, 15 July 2026
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 '''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.		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. Rephoto was created by Jonathan Harbourne, the founder of this wiki.

	== Live example ==		== Live example ==

LGBT-HP: Add Rephoto app link (nearmark.co.uk/rephoto) + step-by-step

2026-07-15T07:38:18Z

Add Rephoto app link (nearmark.co.uk/rephoto) + step-by-step

← Older revision		Revision as of 07:38, 15 July 2026
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 ==		== Live example ==
Line 9:		Line 9:

	== How to use it ==		== How to use it ==
	~~Upload both photographs (ideally a~~ Rephoto~~-aligned pair~~ – 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 – 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>		<pre>
Line 29:		Line 33:
	; width		; width
	: Maximum display width in pixels (default 640).		: Maximum display width in pixels (default 640).

	~~The two images must be the same dimensions for the wipe to line up – which is exactly what Rephoto produces.~~

	See also the template: [[Template:Before after]].		See also the template: [[Template:Before after]].

LGBT-HP: Before/after slider help + demo

2026-07-15T07:05:03Z

Before/after slider help + demo

New page

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.

== Live example ==
{{Before after
| before = Beforeafter-demo-then.png
| after = Beforeafter-demo-now.png
| caption = 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 ==
Upload both photographs (ideally a Rephoto-aligned pair – the same size and crop), then add:

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

; 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).

The two images must be the same dimensions for the wipe to line up – which is exactly what Rephoto produces.

See also the template: [[Template:Before after]].