Responsive Gallery Formatter

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

• Go to https://simplytest.me/project/responsive_gallery.
• Click "Launch Sandbox".
• Install Drupal as normal.
• Enable "Responsive Gallery" module, and any optional modules you wish to try out.
• Edit the view where you wish to apply the fancybox and select the image field
• Select the 'Responsive Gallery' formatter
• Configure the Image style, Wrapper class and images per row for different devices according to your requirement

Installation and download

Installation with Composer:

composer require 'drupal/responsive_gallery'

Looking for support?

Free community support options

Developers can participate our support channels on a best-effort basis, Drupal Answers.

Contact