Features Breakdown: Masonry Gallery (Video & Image)

This section creates a dynamic, Pinterest-style grid that mixes Images and Videos seamlessly. It uses a smart layout engine to eliminate gaps between items of varying heights and handles video playback efficiently to maintain page speed.

1. Mixed Media Grid

• Hybrid Content: Supports both Images and Videos within the same grid.

• Video Handling:

  • Sources: Supports Shopify-hosted videos and direct MP4 URLs.

  • Playback: Click-to-play functionality with a custom "Play" button overlay.

  • Smart Pausing: Automatically pauses other videos when a new one starts (only one plays at a time) and pauses videos when they scroll out of view.

  • Controls: Global toggle for Loop, Mute, and Player Controls visibility.

• Images: Supports high-resolution images with optional click-through links.

2. Intelligent Layout (Masonry)

• Gap-Free Design: Uses JavaScript to calculate optimal positions for each item, ensuring a tight, gap-free layout regardless of varying aspect ratios.

• Responsive Columns: Independent control over the number of columns for Desktop (1-6) and Mobile (1-3).

• Display Limits: Set a maximum number of items to show on Desktop vs. Mobile (e.g., show 12 items on desktop but limit to 4 on mobile).

3. Aspect Ratios & Styling

• Per-Block Ratios: Each media item can have its own aspect ratio (16:9, 21:9, 4:3, 1:1, 4:5, 3:4, 9:16), allowing for a true "collage" feel.

• Card Design: Adjustable corner radius (rounded corners) for all media items.

• Section Width: Options for Full Bleed (100%), Theme Page Width, Container, or Custom Max-Width with adjustable padding.

4. Typography & Headings

• Header Block: Includes a main Heading and Subheading with responsive font size controls (Mobile/Desktop) and alignment options (Left/Center/Right).

• Font Source: Choose between the Theme's global typography or force a specific Custom Font for this section.

5. "View More" Button

• Footer CTA: An optional button at the bottom of the grid (e.g., "View Full Gallery").

• Styling: Supports Solid Colors or Gradients, adjustable border radius, and bold text.

• Alignment: Align the button to the Left, Center, or Right.

6. Performance & Optimization

• Lazy Loading: Images and video posters are lazy-loaded.

• Video Optimization: Videos are only loaded into the DOM when the user clicks play, preventing heavy page load times.

• Auto-Posters: If no poster image is provided for a video, the system attempts to automatically generate a snapshot from the video source.