jekyll-before-after

A Jekyll plugin providing a {% before_after %} Liquid tag for rendering a drag-to-reveal image comparison slider. Built on the proven img-comparison-slider web component. Supports horizontal and vertical orientations, responsive images, keyboard navigation, touch support, and full CSS custom property theming. Pure vanilla JS with zero external dependencies — GitHub Pages compatible.

Installation

Add to your Gemfile:

gem "jekyll-before-after"

Add to _config.yml:

plugins:
  - jekyll-before-after

Run bundle install.

Usage

{% before_after
  before="/images/before.jpg"
  after="/images/after.jpg"
%}

All options

Option Default Description
before (required) Path to the "before" image
after (required) Path to the "after" image
orientation horizontal horizontal or vertical

Examples

Horizontal comparison

{% before_after
  before="/images/main-street-2018.jpg"
  after="/images/main-street-2024.jpg"
%}

Vertical comparison

{% before_after
  before="/images/building-2015.jpg"
  after="/images/building-2025.jpg"
  orientation="vertical"
%}

Multiple sliders

Multiple sliders on the same page are fully supported. The library script is injected only once per page.

Styling

All visual properties are controlled via CSS custom properties. Target the img-comparison-slider element:

img-comparison-slider {
  --divider-width: 4px;
  --divider-color: #fff;
  --handle-width: 60px;
  --handle-height: 60px;
  --handle-opacity: 0.3;
  --handle-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

See img-comparison-slider docs for all available CSS custom properties.

Interaction

  • Drag the divider to reveal
  • Click anywhere on the image to jump the slider to that position
  • Keyboard: focus the slider and use arrow keys
  • Touch and stylus supported via Pointer Events API

How it works

This plugin wraps the lightweight img-comparison-slider web component, loading it from CDN. The Liquid tag converts your {% before_after %} markup into the web component format, and the plugin injects the library script into the page once per build.

Requirements

  • Jekyll >= 3.9
  • Ruby >= 2.7
  • Modern browser with Web Components support (all modern browsers)

License

MIT — see LICENSE.txt.

The plugin wraps img-comparison-slider by sneas, also licensed under MIT.