Below is the complete and detailed guide on how to configure, use, and understand the core mechanics of the Gallery Layout (Bento Grid combined with Video Modal) in the TanaFlows theme.

Gallery Layout Configuration & Usage Guide

Gallery Layout (file gallery-layout.hbs) is a premium page template of TanaFlows, designed with a modern Bento Grid style. It displays your posts in a visually appealing grid of alternating large and small cards, while supporting direct video playback (YouTube, Vimeo, MP4) through an integrated overlay modal powered by the lightweight Plyr.js library.

1. How to Configure the Gallery Page in Ghost Admin

You can apply the Gallery Layout to your page in two ways:

Method 1: Create a Static Page (Recommended - Simplest)

1. Go to Ghost Admin -> Pages -> Click New Page.
2. Enter a title for the page (e.g., Video Gallery, Gallery, etc.).
3. In the page settings sidebar on the right:
   • Under the Template dropdown, select Gallery Layout (Ghost automatically detects this from the gallery-layout.hbs file).
4. Click Publish to publish the page.

Method 2: Define via routes.yaml (For Developers)

If you want this Gallery page to act as your homepage or a dedicated paginated section (Collection):

1. Download the routes.yaml file from your Ghost Admin panel.
2. Define a new route or collection using the gallery-layout template:

   routes:
     /gallery/:
       controller: channel
       template: gallery-layout
       data: page.gallery # if you want to bind data from a static page

3. Upload the modified routes.yaml back to Ghost Admin.

2. How to Write a Post to Enable Video Playback

To make a post display a “Play video” button and play video on the Gallery page, follow these steps in the Ghost Editor:

1. Add a Feature Image: Upload a high-quality cover image for your post.
2. Embed the Video Link in the Alt Text:
   • Click on the uploaded feature image and click the Alt button (or the image caption/alt text settings).
   • Enter your video link there.
   • Supported URL formats:
     • YouTube: https://www.youtube.com/watch?v=xxxxxx or https://youtu.be/xxxxxx
     • Vimeo: https://vimeo.com/xxxxxx
     • Direct Video (Direct MP4/WebM): https://domain.com/video.mp4

3. How the Bento Card Works

Each post is rendered on the page using the bento-card.hbs partial:

• Bento Grid Layout: Cards are arranged in an alternating ratio: the first card is large (spanning 2 columns, 16:9 aspect ratio), while the subsequent cards are smaller (spanning 1 column), creating a premium Bento-style layout.
• Hover Effect: The post title and short description (excerpt) are hidden by default, gently sliding up with a background darkening overlay when the user hovers over the card.
• Hover Play Mode (Direct MP4 Videos Only):
  • Hovering over a card containing a direct MP4 link triggers a hidden <video> element, playing a muted preview in place of the static background image.
  • Moving the cursor away immediately destroys/stops the <video> element to conserve device RAM.
• Play Button:
  • A branded blue glassmorphic play button floats at the bottom-right (on mobile) or in the center (on desktop).
  • Clicking the Play Button: Opens the Video Modal for instant viewing.
  • Clicking anywhere else on the Card: Redirects the user to the detailed post page ({{url}}).

4. How the Video Playback Modal Works

Clicking the play button opens a full-screen modal featuring:

1. Auto-loads Plyr Player: The modal lazy-loads the custom Plyr library for YouTube/Vimeo/MP4 videos, creating a unified UI with sleek controls rather than relying on browser-default players.
2. Contextual Information Below the Video:
   • Post Title: Bold, large white typography set against the dark overlay.
   • Short Excerpt: Displays the summary text (up to 80 words) to give viewers quick context without forcing them to navigate away.
3. ‘Read Post’ Action Button: Perfectly centered below the description with subtle arrow micro-animations on hover, encouraging users to read the full article.
4. Resource Cleanup (Memory Management): When the modal is closed (clicking X, clicking outside the container, or pressing Escape):
   • The Plyr instance runs .destroy() to terminate all background scripts.
   • The inner HTML of the video container is wiped clean (innerHTML = ''), freeing up RAM and GPU resources on the user’s device.