# Gallery Columns Documentation

Installation steps and a complete reference for every setting, with concrete examples — the same level of detail our support uses to help customers.

## Installation

### Requirements

Magento 2.4.x. PHP 8.1–8.5. Works with **Hyvä** (any child theme) and **Luma** (the default Magento theme) — the active theme is detected automatically, no configuration needed. On any other theme the module has no effect (safe no-op, same as being disabled).

### Setup steps

1. Add the credentials you'll receive by email to `auth.json` in your Magento project root:
   ```json
   { "http-basic": { "repo.codingrow.com": { "username": "...", "password": "..." } } }
   ```
2. `composer config repositories.codingrow composer https://repo.codingrow.com`
3. `composer require codingrow/module-gallery-columns`
4. `bin/magento module:enable Codingrow_GalleryColumns`
5. `bin/magento setup:upgrade && bin/magento setup:di:compile`
6. Paste your license key into **Admin → Stores → Configuration → Codingrow Extensions → Gallery Columns → License → License Key**, save, then `bin/magento cache:flush`.
7. `bin/magento setup:static-content:deploy -f` (if running in `production` mode).

No Tailwind build step or theme configuration is required: every layout-critical rule (grid ratios, sticky positioning, breakpoints) ships as plain CSS inlined in the module's own templates, not as Tailwind utility classes — it works regardless of whether your Hyvä theme's Tailwind build has been configured to scan this module's templates.

### Configuration

**Admin → Stores → Configuration → Codingrow Extensions → Gallery Columns → General**:

- **Enable column gallery on desktop** — 2-column image grid instead of one image at a time.
- **Enable sticky buy-box on desktop** — on Hyvä, both the images and price columns become sticky (the naturally shorter one stays pinned in view while the taller one scrolls past); the description moves under the gallery, and unlocks the two settings below. On Luma, only the price/buy-box column stays fixed while scrolling — the image and description column always scrolls normally.
- **Enable repeated image strip below description** — requires the sticky buy-box setting above. Shows all product images again in a wrapping row (3 per row on desktop, reflowing down as the screen narrows).
- **Enable simplified section titles** — drops the repeated product name next to titles like "Description" (Hyvä only — Luma's tabs don't repeat the product name to begin with, so this setting has no visible effect there).

All four require a valid license; without one, the module behaves as if fully disabled (unmodified theme default layout, no error shown to store visitors).

### Uninstallation

`composer remove codingrow/module-gallery-columns` then `bin/magento setup:upgrade && bin/magento setup:di:compile && bin/magento cache:flush`.

## User guide

### Column gallery

On desktop (1024px and up), every product image is shown at once in a 2-column grid instead of Hyvä's single-image-plus-thumbnail-strip or Luma's Fotorama slider. Mobile is never affected — it always keeps the theme's native gallery behavior (single image, swipeable thumbnail strip below).

On Hyvä, this is implemented as an additive block inside the theme's own Alpine.js gallery component, reusing the same image data already loaded for the default gallery — no duplicate JavaScript state.

On Luma, the grid is added alongside the native Fotorama widget (never modified or reinitialized); the two are toggled with plain CSS at the desktop breakpoint.

### Sticky buy-box

**On Hyvä**: both the image column and the price/buy-box column become `position: sticky` — whichever one is naturally shorter (usually the price column, since the image+description column is normally taller) stays pinned in view while the other scrolls past it. The description moves from its default position (below both columns) to directly under the images, inside that same left column.

**On Luma**: only the price/buy-box column stays visually fixed while you scroll, between the header and the end of the product information section — the image and description column always scrolls normally. This is implemented in JavaScript (`transform: translateY()`, recalculated on scroll) rather than CSS `position: sticky`, since sticky positioning was found not to work reliably combined with Luma's native float-based two-column layout. The description is also repositioned to sit directly under the images (Luma's default puts it full-width below both columns).

### Repeated image strip

Requires the sticky buy-box setting. Below the description, every product image is shown again at a fixed size (274×274px), wrapping naturally as the screen narrows — 3 per row on a typical desktop width, fewer per row as it gets narrower, down to 1 per row on mobile. Images only shrink below their fixed size once even a single one no longer fits the available width.

### Simplified section titles

Hyvä's default theme shows "Description / *Product Name*" as the heading above the description tab — redundant once the product name is already prominent elsewhere on a rearranged page. This setting swaps it for a plain "Description" heading. Luma's own tabs never had this repetition, so the setting has no visible effect there.

### Hyvä and Luma support

The active theme is detected automatically (no configuration needed) by walking up the current theme's parent chain looking for "Hyva" or "Luma" in the theme code. On any theme that isn't a Hyvä or Luma descendant, every plugin in this module is a guaranteed no-op — the page renders exactly as it would without the module installed, never an error.

### License

One license key per Magento domain, entered in **Stores → Configuration → Codingrow Extensions → Gallery Columns → License → License Key**. The key is validated offline (signature + domain match) with an online revocation check (24h cache, fail-open: if the license server is unreachable, the key stays valid — no dependency on codingrow.com for day-to-day operation). Moving to a new domain requires a new key — contact support with your original purchase details.
