Image Asset Register

The directory structure for all photography, illustration, and brand-mark assets that flow through the editorial body of work.

Architecture

Images are organised by cornerstone and chapter / brand, mirroring the URL structure. Every cornerstone has its own folder; every sub-page has its own sub-folder.

/assets/images/
├── home/                          ← /
├── about/
│   ├── biography/                 ← /about/biography/
│   ├── recognition/               ← /about/recognition/
│   ├── ideology/                  ← /about/ideology/
│   ├── conservation/              ← /about/conservation/
│   ├── philanthropy/              ← /about/philanthropy/
│   └── teaching/                  ← /about/teaching/
├── restaurant-legacy/
│   ├── brasserie-enfin/           ← /restaurant-legacy/brasserie-enfin/
│   ├── enfin/                     ← /restaurant-legacy/enfin/
│   ├── bouchon-enfin/             ← /restaurant-legacy/bouchon-enfin/
│   ├── shin-labo/                 ← /restaurant-legacy/shin-labo/
│   └── meatmore/                  ← /restaurant-legacy/meatmore/
├── serumpun/
│   ├── launch/                    ← /serumpun/launch/
│   ├── expo-2025-osaka/           ← /serumpun/expo-2025-osaka/
│   ├── mulu/                      ← /serumpun/mulu/
│   ├── kuching-finale/            ← /serumpun/kuching-finale/
│   └── in-motion/                 ← /serumpun/in-motion/
├── collaborations/
│   ├── krug/
│   ├── hennessy/
│   ├── mortlach/
│   ├── the-macallan/
│   ├── louis-xiii/
│   ├── glenmorangie/
│   ├── gaggenau/
│   ├── the-plan/
│   ├── mepra/
│   ├── bmw/
│   ├── sarawak-state-government/
│   └── taylors-university/
├── media-centre/                  ← /media-centre/ and sub-pages
└── brand/                         ← Maison logos, lock-ups, brand marks
    ├── krug-logo.svg
    ├── hennessy-logo.svg
    └── …

Naming Convention

Within each chapter folder, images use kebab-case descriptive filenames:

shin-labo/
├── hero.jpg                       ← The hero image at the top of the page
├── exterior-bukit-bintang.jpg     ← Establishing context shots
├── krug-room-table.jpg            ← Specific dish or room photographs
├── ryoutei-omakase-counter.jpg
├── chef-james-portrait.jpg        ← Portrait register
└── press-cluster-2022.jpg         ← Press / collateral imagery

Avoid:

Preferred file types:

Image Sizing

Source images should be uploaded at larger dimensions; the build pipeline downsamples to the responsive sizes the layout needs.

Recommended source sizes:

Use case Source dimensions
Hero (full-width) 2400 × 1350px (16:9) or 2400 × 1029px (21:9)
Wide breakout (in prose) 2400 × 1600px (3:2) or 2400 × 1800px (4:3)
Card thumbnail 1200 × 900px (4:3)
Portrait 1600 × 2400px (2:3)
Gallery item 1600 × 1200px (4:3)
Brand logo Original SVG, or 1000 × 500px PNG

The build pipeline generates:

Each <img> rendered through the image shortcode automatically receives the right size at the right time via srcset.

Usage in Markdown / Front-Matter

Hero image (in front-matter)

hero:
  variant: image            # text | image | fullbleed
  eyebrow: "Spirits, Champagne, and Cognac"
  title: "Krug"
  subheading: "A friendship with a champagne house, cultivated over twelve years."
  image: /assets/images/collaborations/krug/hero.jpg
  imageAlt: "Krug Grande Cuvée poured at a private tasting at the Krug Chef's Table, Shin'Labo, 2022"

Inline image (in Markdown body)

<figure class="image image--pending" data-image-pending="true" aria-label="Image pending: The Krug Room at Shin'Labo, set for a single party of twelve, with the Pininfarina × Mepra × James Won flatware service"><div style="aspect-ratio: 16/9; background: linear-gradient(135deg, rgba(184,137,62,0.06) 0%, rgba(92,31,26,0.04) 100%); display: flex; align-items: center; justify-content: center; color: var(--colour-text-muted); font-family: var(--font-body); font-size: var(--type-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase;">Image pending</div><figcaption>Photograph: David Yeow / The Star — STAR2 Sunday Magazine cover feature, 10 April 2016</figcaption></figure>
gallery:
  columns: 3
  caption: "The Mortlach Room at MeatMore — opening night, 29 August 2023."
  items:
    - src: /assets/images/restaurant-legacy/meatmore/mortlach-room-01.jpg
      alt: "The Mortlach Room from the doorway, twelve seats around a single counter"
    - src: /assets/images/restaurant-legacy/meatmore/mortlach-room-02.jpg
      alt: "Mortlach 30 Years 2024 Special Release on the reserve shelf"
    - src: /assets/images/restaurant-legacy/meatmore/mortlach-room-03.jpg
      alt: "The signature Mortlach New York Strip plated for a single guest"

Alt Text — Editorial Discipline

Every image must carry alt text. The shortcode throws a build-time error if alt is missing — accessibility is not optional.

Alt text should follow the editorial register the rest of the site holds:

Photography Credits

Photography attribution lives at /src/_data/credits.json keyed by the image’s full path. The build can render the credit alongside the image figure caption automatically.

Example credit entry:

{
  "/assets/images/restaurant-legacy/enfin/star2-cover-april-2016.jpg": {
    "photographer": "David Yeow",
    "outlet": "STAR2 Sunday Magazine",
    "date": "2016-04-10",
    "license": "Editorial use"
  }
}

When the photography brief is delivered, credits flow into this file.

Phase 4 Status

This README documents the architecture. Image content uploads are a separate workstream from the website build. As assets are commissioned and delivered, they slot into the directory structure above with no architectural changes required.

The Phase 4 deliverables:

The Phase 5 deliverable that depends on this: