How to Add Image Gallery Module

The Image Gallery module displays selected Google Drive images in a responsive gallery. Configure sources, filters, layout, thumbnails, overlay, and permissions to match your use case.

Quick Start

1. Go to Google Drive → Module Builder.
2. In Modules, choose Image Gallery and click Next.
3. In Source, select folders/files to display, then Save Changes → Next.
4. Configure Filter, then open Advanced to set layout, thumbnails, and overlay options.
5. Adjust Permissions (viewer access) and click Finish.

Step 1 Modules

• Image Gallery — renders Drive images in Justified, Grid, or Masonry layouts with optional captions and overlays.

Step 2 Source

Select where images come from.

• Pick Folders/Files: Click items to select; your selections appear in the right sidebar.
• Toolbar: Upload, Create Folder, Refresh, Grid/List toggle.
• Sort & Order: Name, Size, Created At, Updated At with Ascending/Descending.

Step 3 Filter

Control which items appear in the gallery.

• Allowed Extensions: Include image types (e.g., jpg, jpeg, png, webp, gif).
• Exclude Extensions: Hide non-image or unwanted formats.
• Allowed Names: Comma-separated list; supports wildcards like banner*, *.webp, img?, product_*.
• Apply To: Files / Folders for name filters.

Step 4 Advanced

Module Settings

• Container Size: Width/Height (e.g., 100%, 720px, 70vh), or leave blank for default.
• Module Theme: Light or Dark.

File Loading

• Load Type: Load More, Infinite Scroll, or Pagination.
• Files in First Render: Initial items to display (slider).

Gallery Layout

• Layout: Justified (rows auto-filled), Grid, or Masonry.
• Row Height (Justified): Set the target row height (px).

Thumbnail

• Spacing: Gap around the image caption (px).
• Quality: Original, Medium, or Thumbnail.
• View Shape: Rounded or Square.

Overlay

• Show Overlay: Enable/disable the image overlay.
• Display Type: Always or On Hover.
• Show Title / Description / Size: Toggle which metadata appears in the overlay.

Automatic Fetch

• Enable Automatic File Fetching: (Coming Soon) Periodically checks for new files.
• Fetch Interval: Seconds between checks (e.g., 60).

Sorting

• Sort By: Name, Size, Created At, Updated At.
• Order: Ascending / Descending.

Permissions & Access Controls

A. Preview Controls

• Preview – Allow/deny preview for frontend users.
• Inline Preview – Open in a pop-up lightbox; if off, open in Google Drive.
• Allow Pop-out – Button to open Google Drive’s native viewer.
• Show Preview Thumbnails – Show/hide thumbnails under the lightbox preview.

B. Filter Users & Roles

• Audience: Everyone or Logged In.
• User Access Modes:
  • Role-Based – Choose specific roles.
  • User-Based – Pick individual users from a searchable list.
• Access Denied Message – Custom text shown when a user lacks permission (e.g., You do not have access to this module.).

C. Password Protection

• Enable Password – Gate the module with a password.
• Generator – Create a strong random password.

D. Display For

Control who can see the module on the frontend: Everyone or Logged (logged-in users only).

Step 6 Usage

Embed the gallery with a shortcode (example ID shown):

[integration-google-drive id="123"]

Best Practices

• Prefer Role-Based visibility for easier long-term management.
• Use Medium or Thumbnail quality for faster pages; switch to Original only when necessary.
• For many images, set a smaller Files in First Render and enable Infinite Scroll.
• Choose Justified layout for clean, uniform rows; use Masonry for varied aspect ratios.

Troubleshooting

• No images shown? Verify Source selections and Filter (extensions/names).
• Layout look uneven? Adjust Row Height (Justified) or switch to Grid.
• Slow loading? Use Thumbnail/Medium quality and reduce First Render count.
• Users can’t see the gallery? Check Display For and User Access, or customize the Access Denied message.