The Responsive Gallery provides the image formatter forimage field multiple cardinality which saves your time and helps to easily create beautiful, modern responsive image gallery with overlay windows containing images with touch enabled, responsive and fully customizable image gallery that varies between number of image items per row depending on screen size according to the configurations.

Module Features

Provides a formatter for entities.
Choose image styles for images displayed via the fancyBox formatter.
Custom wrapper class
The image will be grouped on the fancybox if the images are in same view, image or media field with multiple cardinality
Images per row according to the screensizes where we can configure for: Extra large devices, Large devices, Medium devices and Small devices

Fancybox Key features

No external dependencies
Touch and mobile optimized with swipe, drag and pinch-to-zoom gestures
Highly customizable with configuration options, Sass and CSS variables
Multiple zoom levels
Properly manages focus
Closes with Back Button
Accessible
Smooth, natural animations
Multiple instances
Widely used, battle-tested
Best user and developer experience

We can customize the design and layout according to the theme installed on the site or customize with custom css. We can copy the template file from templates/responsive-gallery.html.twig to your theme file and customize the html and implement your own layout with custom css.

Available variables on the twig file are:

Available variables:

- gallery.wrapper_class: wrapper glass
- thumbnails.images: thumbnail images.
- gallery.thumbnail_classes: thumbnail classes

Demo

Installation and download

Installation with Composer:

composer require 'drupal/responsive_gallery'

Download latest version

Looking for support?

Responsive Gallery Formatter

Issues

Wrong grid-item classes in field formatterRTBCCode Created about 1 year ago

Wrong grid-item classes in field formatter
RTBC
Code
Created about 1 year ago