Index Gallery

Index Gallery

The twelve included LOW WEATHER photographs alternate Mountain and Fashion. The final two Fashion details also appear under Details. A photo appears once even when it belongs to multiple filters. Numbered captions sit below natural image frames; desktop viewer thumbnails form a side rail.

React

Import the named component from the installed folder. Its wrapper imports the stylesheet. Keep assets/ beside the source.

import { IndexGallery } from './components/index-gallery/src/react';

export default function Gallery() {
  return <IndexGallery gap={16} thumbnails={true} />;
}

IndexGallery and Component are aliases. They accept every manifest setting plus className, style and paused. The server renders real image links before hydration. Settings changes update the framework-neutral engine. The title is displayed above the filter rail.

Vanilla JavaScript

import { mount } from './components/index-gallery/src/core';
import './components/index-gallery/src/styles.css';

const gallery = mount(document.querySelector('#gallery'), {
  heading: 'LOW WEATHER',
  gap: 16,
});

gallery.pause();
gallery.resume();
gallery.update({ heading: 'Field notes', gap: 12 });
// Remove the containing view:
gallery.destroy();

update() replaces the configuration using manifest defaults; it does not patch the previous configuration. Invalid settings throw before changing the live gallery. pause() settles animation and retains controls. Offscreen galleries also suppress motion. destroy() removes owned listeners, observers, markup and viewer scroll locking. Instances own their markup and CSS namespace.

Images and filters

Leave imageUrls empty for the included twelve-photo collection. Manifest defaults provide its title, captions, display tags and memberships. Explicit caption or category overrides also work with included images.

<IndexGallery
  imageUrls={['./images/coast.webp', './images/studio.webp']}
  captions={['Waves beneath a rocky headland', 'A sunlit ceramics studio']}
  categories={['Coast', 'Studio']}
  memberships={['Coast, Quiet', 'Studio']}
  initialCategory="Quiet"
/>

Supply matching lists when using custom images. categories sets the visible tag; memberships sets optional comma-separated filter names for each image. When memberships are omitted for custom images, each display tag is its filter membership. A photo can belong to multiple filters and still appears once in the grid or viewer. “All” is reserved for the complete collection. Unknown initial categories fall back to All; clicking the selected category again returns to All.

Up to 24 custom image URLs are supported. HTTPS, relative file paths and raster base 64 data URLs are accepted; other protocols are rejected. There are no remote requests unless explicitly configured. Caption text supplies custom image alternative text. Omitted lists retain manifest defaults, so supply captions and categories or pass empty lists for numbered/Uncategorized fallbacks. Caption positions beyond the supplied list receive numbered labels. Blank categories become Uncategorized. Failed images keep their frame and display “Image unavailable.”

The LOW WEATHER photographs retain their varied natural aspect ratios in the grid and viewer. The bundled derivatives use proportional resizing and WebP encoding only. Production PNG masters are not included. These generated images are creative artwork rather than verified documentary locations or products.

Layout and appearance

columns is the actual desktop maximum. Small inner grids use two columns; tablet widths use at most three. gap changes spacing, radius changes image corners, and the palette controls surface, text and active filter tint. Colors accept six- or eight-digit hex values or transparent. captionMode chooses always-visible numbered captions or hides them together with their reserved space.

Index uses a 16px default gap. The gap control is the actual spacing in pixels.

Viewer and keyboard

With the viewer disabled or JavaScript unavailable, images remain ordinary links to the largest included file. Custom image links use their configured URL. The viewer follows the active category. Previous/next wrap; thumbnails select an image. Arrow and thumbnail navigation reset zoom. Home and End select the first or last photo while preserving zoom. Clicking the large image or zoom button toggles zoom. Zoomed photographs can be scrolled or panned. On touch devices, swipe horizontally over an unzoomed photograph to navigate.

Tab reaches filters, image links and viewer controls. Enter or Space opens an image; Escape closes it. Left/right navigate inside the modal. Focus stays inside the native dialog and returns to the opening image on close. Updating while the viewer is open closes it and focuses the selected filter. Results and viewer position use polite status announcements. Filter exits immediately leave keyboard navigation and become inert.

Motion and lifecycle

The existing CSS masonry transitions and 320ms viewer entrance remain. Below-image captions are visible whenever captions are enabled. Rapid filter changes cancel superseded movement. The motion toggle, paused prop, pause API, offscreen visibility and system reduced-motion preference stop motion while filtering and viewing remain available. Reduced motion also disables hover scaling.

The core has no framework, service or account dependency. It owns listeners, observers, animations and any pending image presentation until update or destroy. The React wrapper renders server markup once and preserves the live engine through unrelated React rerenders.

Responsive delivery and rights

Grid images have 480/960/1600px candidates; the masonry engine sets sizes to the actual column width. Viewer 960/1600/largest candidates are attached only after opening or navigating. Thumbnails use 160px files. The largest derivative is up to 2400px wide, without enlargement. Explicit dimensions preserve layout before image loading. All assets are local and each gallery includes only its own collection.

Original Arclen artwork was generated using Higgsfield GPT Image 2.5 in October 2026. Inter is bundled under the SIL Open Font License. Keep LICENSE.md, NOTICE.md, PROVENANCE.md and assets/OFL-Inter.txt with redistributed files according to their licences.