Litos: Photos Page Config

Configure Photos page: page texts (PHOTOS_CONFIG), file locations, and usage examples.

August 10, 2025

2 mins

The Photos page displays moments in a timeline with a polaroid-style gallery. This document explains how to configure page texts and how to add photo timelines.

The following files are compatible with this document:

src/pages/photos/index.astro - photos page.
src/components/photos - timeline and polaroid gallery components.
src/config.ts - page config (PHOTOS_CONFIG) and PhotosList data.
src/types.ts - Type definitions for PhotosConfig, PhotoData, and Photo.

Photos Page Configh3

Configure page texts in src/config.ts:

export const PHOTOS_CONFIG: PhotosConfig = {
  title: 'Photos',
  description: 'Here I will record some photos taken in daily life.',
  introduce: 'Here I will record some photos taken in daily life.',
}

Property	Description
title	Title shown on the page and browser tab.
description	The metadata description in the head.
introduce	Intro text displayed under the title.

Data Source: PhotosListh3

The page reads data from PhotosList in src/config.ts. Each item in the array represents one timeline entry (a day, a trip, an album, etc.).

export const PhotosList: PhotoData[] = [
  {
    title: "Friend's Adorable Cat",
    icon: { type: 'emoji', value: '🌠' },
    description: 'So kawaii (*^ω^*)',
    date: '2025-06-21',
    travel: '',
    photos: [
      { src: '/photos/cat1.webp', alt: "Friend's Adorable Cat", width: 1080, height: 810, variant: '4x3' },
      { src: '/photos/cat2.webp', alt: "Friend's Adorable Cat", width: 1080, height: 810, variant: '4x3' },
      { src: '/photos/cat3.webp', alt: "Friend's Adorable Cat", width: 1080, height: 810, variant: '4x3' },
    ],
  },
]

PhotoData fieldsh4

Property	Description
title	Title of the timeline item.
icon	Icon displayed on the left timeline axis. See the table below for supported formats.
description	Optional text shown below the title.
date	Display date string (free format).
travel	Optional additional label for travel/route info.
photos	Array of `Photo` objects rendered as a polaroid stack and openable in a modal gallery.

Icon objecth5

TimelineIconType supports: emoji | icon | color | number | image

Property	Description
type	One of the supported types above.
value	Emoji (e.g. ’🌅’), icon name, color class, number text, or image URL/path.
fallback	Optional fallback text when icon cannot be shown.

Photo fieldsh4

Property	Description
src	Image path (recommend using files under `/public/photos`).
alt	Image alt text.
width	Image intrinsic width.
height	Image intrinsic height.
variant	Polaroid layout variant: `1x1`、`4x5` 、4x3``9x16.
location	Optional. Shooting location.
date	Optional. Photo shooting date.
camera	Optional. Shooting device.
description	Optional. Additional caption for the single image (used in modal).

TIP

Variants control the polaroid aspect: 1x1 (square), 4x5 (classic polaroid), 4x3 (landscape), 9x16 (portrait).

How it rendersh3

Timeline and icons are rendered by src/components/photos/PhotoTimeline.astro.
Polaroid stack and modal gallery are handled by PolaroidStack / PhotoGalleryModal.
Clicking any photo opens a modal gallery. Hovering reveals a subtle spread animation.

Recommended practicesh3

Optimize images (WebP/AVIF) and provide correct width/height to avoid layout shift.
Keep 3–6 photos per timeline item for a balanced stack effect.
Prefer consistent variants within one item for a neat layout.