Commerce Responsive Gallery

The Commerce Gallery module provides a feature-rich, high-performance block that renders Drupal Commerce product variation images in a responsive masonry, grid, or metro layout. Designed for modern e-commerce storefronts, it features a built-in lightbox, dynamic filtering, and per-block CSS scoping to ensure a seamless fit with any theme.

Key Features

• Layout Modes: Constrain galleries to Masonry (Pinterest-style), Uniform Grid, or Metro (alternating sizes) to create visually engaging product displays.
• Shared Lightbox Singleton: A high-performance modal architecture that works across multiple blocks on the same page, reducing DOM overhead and ensuring a consistent user experience.
• Dynamic Filter Bar: Interactive tabs to filter products by bundle or type, making it an ideal solution for large catalogs with diverse product lines.
• Responsive Breakpoints: Fully configurable column counts for Desktop, Tablet Large, Tablet Small, and Mobile devices using native CSS Grid variables.
• Theming Engine: Per-block accent colors, card radii, and hover effects (Lift, Zoom, Glow) controlled via scoped CSS variables and per-block configuration.
• Touch & Accessibility: Native mobile swipe support, keyboard navigation (Arrows/Esc), and ARIA-compliant markup for a WCAG-compatible storefront.

Installation

It is recommended to install the module via Composer to manage dependencies automatically:

composer require drupal/commerce_gallery

Enable the module using Drush:

drush en commerce_gallery

Configuration & Usage

The Commerce Gallery is implemented as a block, allowing you to place it on any product-related page or landing zone:

1. Navigate to Structure » Block Layout.
2. Click Place Block in your desired region.
3. Search for "Commerce Gallery (Advanced Masonry)".
4. Configure for Data Sources, Sort Order, and Limits.

Data Source & Card Display

The module handles complex product data automatically. You can select specific Variation Types to include, or leave all unchecked for a global gallery. Within the settings, toggle the visibility of specific product data including Price, SKU, and an optional "View Product" link that automatically resolves to the parent product's URL.

Visual Appearance & Lightbox

Customize the Grid Gap, Card Border Radius, and Accent Colors to match your site's branding. You can assign separate Drupal Image Styles for grid thumbnails and high-resolution lightbox views. UX options include autoplay for the lightbox, image counters (e.g., 3/12), and a "Group by bundle" setting to segment images into distinct, titled sections.

Requirements

This module requires Drupal 10.x or 11 and Drupal Commerce (specifically the commerce_product sub-module). It utilizes the native Drupal Image module for processing thumbnails and full-screen assets.

Supporting this Module

The Commerce Gallery module is an open-source project maintained for the Drupal community. Your support helps keep the tool robust, accessible, and updated for future Drupal releases. You can contribute in the following ways:

• Report Bugs: If you encounter rendering issues or configuration errors, please file a detailed report in the Issue Queue.
• Feature Requests: Have an idea for a new layout mode or a unique hover animation? We welcome innovative ideas to expand the module's capabilities.
• Documentation: Helping other users understand advanced CSS scoping or sharing snippets for custom filters is a great way to give back.

If you find this module useful in your storefront projects, please consider starring the project on Drupal.org or providing a testimonial in the issue queue!