jekyll-before-after demo showing a vertical drag-to-reveal comparison of Egypt’s new capital — desert in 2017 vs. city under construction in 2024. NASA Landsat imagery, public domain.

Open Source Plugin ∙ 22 August, 2026

jekyll-before-after

A Jekyll plugin providing a before_after Liquid tag for rendering a polished, accessible drag-to-reveal image comparison slider. Supports horizontal and vertical orientations, overlay labels, responsive images, keyboard navigation, and CSS custom property theming.

A Jekyll plugin that provides a before_after Liquid tag for rendering a drag-to-reveal image comparison slider. Pure vanilla JS — no external dependencies, GitHub Pages compatible. Supports horizontal and vertical orientations, overlay labels, responsive images with srcset, keyboard navigation, and full CSS custom property theming.

Installation

Add to your Gemfile:

gem "jekyll-before-after"

Add to _config.yml:

plugins:
  - jekyll-before-after

Copy _before-after.scss to your CSS directory and import it. Run bundle install.

Demo

Drag the handle to compare a Georgian brick facade before and after restoration.

Before

After

Photos by PMACRestoration, CC BY-SA 4.0, via Wikimedia Commons

Vertical orientation works great for aerial and satellite views — here, Egypt’s new administrative capital under construction.

Satellite view of Egypt's New Administrative Capital site in 2017 — desert

Satellite view of Egypt's New Administrative Capital under construction in 2024

NASA Landsat imagery, public domain. Constructing Egypt’s New Capital, NASA Earth Observatory.

Usage

{% before_after
  before="/images/before.jpg"
  after="/images/after.jpg"
  before_label="Before"
  after_label="After"
  start=50
  orientation=horizontal
  alt_before="Description of before image"
  alt_after="Description of after image"
%}

All options

Option	Default	Description
`before`	(required)	Path to the “before” image
`after`	(required)	Path to the “after” image
`before_label`	`"Before"`	Label overlaid on the before side
`after_label`	`"After"`	Label overlaid on the after side
`start`	`50`	Initial slider position (0–100)
`orientation`	`horizontal`	`horizontal` or `vertical`
`alt_before`	`""`	Alt text for the before image
`alt_after`	`""`	Alt text for the after image
`srcset_before`	`""`	srcset value for responsive before image
`srcset_after`	`""`	srcset value for responsive after image
`sizes`	`"(max-width: 768px) 100vw, 100vw"`	sizes attribute when using srcset

Styling

All visual properties are controlled via CSS custom properties:

.before-after {
  --ba-handle-color: #e67e22;
  --ba-knob-size: 3rem;
  --ba-label-bg: rgba(0, 0, 0, 0.75);
  --ba-label-color: #fff;
  --ba-line-width: 2px;
}

Configure site-wide defaults

before_after:
  start: 50
  orientation: horizontal
  before_label: "Before"
  after_label: "After"