Jump to content

Template:Before after: Difference between revisions

From LGBT History Project
Before/after slider template
 
Add Rephoto app link
 
Line 1: Line 1:
<div class="ba-slider" style="max-width:{{{width|640}}}px;">[[File:{{{before}}}|link=|alt={{{beforelabel|Then}}}]]<span class="ba-after-wrap">[[File:{{{after}}}|link=|alt={{{afterlabel|Now}}}]]</span><span class="ba-label ba-label-before">{{{beforelabel|Then}}}</span><span class="ba-label ba-label-after">{{{afterlabel|Now}}}</span></div><div class="ba-caption">{{{caption|}}}</div><noinclude>
<div class="ba-slider" style="max-width:{{{width|640}}}px;">[[File:{{{before}}}|link=|alt={{{beforelabel|Then}}}]]<span class="ba-after-wrap">[[File:{{{after}}}|link=|alt={{{afterlabel|Now}}}]]</span><span class="ba-label ba-label-before">{{{beforelabel|Then}}}</span><span class="ba-label ba-label-after">{{{afterlabel|Now}}}</span></div><div class="ba-caption">{{{caption|}}}</div><noinclude>
'''Before/after image slider.''' Drag to wipe between a historic photo and a modern re-shot — a companion to the Rephoto alignment workflow.
'''Before/after image slider.''' Drag to wipe between a historic photo and a modern re-shot. Align the pair first with the free [https://nearmark.co.uk/rephoto Rephoto app] (download and how-to).


<pre>
<pre>

Latest revision as of 07:38, 15 July 2026

[[File:{{{before}}}|link=|alt=Then]][[File:{{{after}}}|link=|alt=Now]]ThenNow

Before/after image slider. Drag to wipe between a historic photo and a modern re-shot. Align the pair first with the free Rephoto app (download and how-to).

{{Before after
| before = Old_photo.jpg
| after  = New_photo.jpg
| caption = Optional caption
| beforelabel = Then
| afterlabel  = Now
| width = 640
}}

Both images should be the same size and crop. Full guide and a live demo: Help:Before-after slider.