lightgallery_formatter

Synopsis

A field formatter for displaying media reference fields using the lightGallery JavaScript library — create beautiful, interactive image
galleries with minimal configuration.

Screenshots

Tutorial

Features

• Profile-based Configuration — create reusable gallery profiles with different settings
• Local Library
• Remote Video Support — automatic YouTube/Vimeo thumbnail extraction
• Touch & Swipe — full mobile support with gestures
• Modern JavaScript — ES6, no jQuery dependency
• Rich Controls — zoom, fullscreen, thumbnails, download, keyboard navigation

Why LightGallery Formatter?

Unlike drupal/lightgallery which configures each field separately, this module uses reusable profiles — configure once, use everywhere.

Key Advantages

• No JSON required — All settings via UI checkboxes and dropdowns. No need to learn LightGallery API
• Profile-based settings — Change one profile, update all galleries instantly (great thanks for the idea @bbu23 and @nk_)
• 30+ transitions — Slide, Fade, Zoom, Lollipop, Rotate, and more — all selectable from dropdown
• Config export — Profiles sync between environments
• Live preview — You can generate live preview directly in profile

Also Supports

• Keyboard controls (Esc key, arrow keys, mouse wheel navigation)
• Touch gestures (swipe, drag)
• UI customization (close icon, maximize, counter, download button)
• Auto-hide controls with configurable delay
• TODO:YouTube/Vimeo thumbnail extraction
• Live preview when editing profiles

Similar Projects

• Swiper formatter — mobile slider library
• Colorbox — classic lightbox, jQuery-based
• PhotoSwipe — gesture-focused gallery
• GLightbox — modern lightbox with video

Submodules

• LightGallery Formatter Demo — demo content for testing
• LightGallery Formatter Preview — live preview when configuring profiles

Credits

lightGallery library by Sachin Neravath (MIT License)

Installing LightGallery Library

Install via Composer to download the module and required libraries:

composer require drupal/lightgallery_formatter

Enable the module via Drush:

drush en lightgallery_formatter

Optional Submodules:

• lightgallery_formatter_preview: Adds a live preview tab to the profile configuration.
• lightgallery_formatter_demo: Creates a content type and demo nodes for testing.

Enable them if needed:

drush en lightgallery_formatter_preview lightgallery_formatter_demo

For Developers

The project uses ddev-drupal-contrib for local development.

Quick Start

git clone [email protected]:project/lightgallery_formatter.git
cd lightgallery_formatter
ddev start
ddev lgf:init

This installs Drupal with demo_umami profile, enables the module with demo content, and provides admin login.

Useful Commands

• ddev lgf:init — full reset and fresh install
• ddev phpcs — check coding standards
• ddev phpcbf — auto-fix coding violations
• ddev phpstan — run static analysis
• ddev phpunit — run tests

Architecture

• In progress...