Templates

Album

album.list.twig

The album.list.twig template renders a list of photo albums — each represented by its cover image, title, and link to the album detail page.
It’s typically used for gallery or portfolio overviews (e.g. /albums or /collection/{slug}).

What it does

  • Displays all available albums from the user’s content directory
  • Shows the album title and optional cover image
  • Links each album card to /album/{slug}
  • Optionally includes short descriptions (if provided)
  • Supports easy theming with consistent image sizes

Available Twig Variables

The template receives an array called albums containing album entries.

albums – List of album objects

Variable Type Description
album.slug string Unique identifier for the album (used in URL)
album.title string Album title (from YAML album.name or fallback slug)
album.cover string (optional) Cached image path for the album cover
album.url string Direct link to the album page /album/{slug}
album.description string (optional) Short text or Markdown description converted to HTML
album.images array (optional) List of images belonging to the album (only used in detail view)

Example

<section class="album-list grid gap-8 md:grid-cols-3">
{% for album in albums %} 
<article class="album-card text-center">
<a href="{{ album.url }}" class="block group">
   {% if album.cover %} <img src="{{ album.cover }}" alt="{{ album.title }}" class="rounded-xl shadow-md w-full h-auto transition group-hover:opacity-90" /> {% endif %} 
   <h2 class="mt-3 text-lg font-semibold text-gray-900 group-hover:text-indigo-600"> {{ album.title }} </h2>
</a>

album.twig

The album.twig template renders a single photo album page, showing its title, description, and all contained images as a responsive gallery grid.
Each image links to its own detailed page (/album/{slug}/{filename}), where EXIF data and descriptions are displayed.

What it does

  • Displays a single album with its title and optional description
  • Shows a grid of all images belonging to the album
  • Each image links to its detailed page view
  • Automatically uses cached, resized image files for performance
  • Supports album covers, breadcrumbs, and consistent theming

Available Twig Variables

The template receives an object called album representing the current album.

album – Single album object

Variable Type Description
album.slug string Album identifier (used in the URL /album/{slug})
album.title string Album title (from YAML album.name or fallback to slug)
album.description string HTML description (converted from Markdown, optional)
album.cover string (optional) Cached cover image path
album.url string Absolute URL for the album (e.g. /album/summer-2025)
album.images array Array of image objects included in this album

Inside each album.images[] entry

Variable Type Description
image.file string Cached image URL (e.g. /cache/images/{guid}_M.jpg)
image.url string Path to the detailed view /album/{slug}/{filename}
image.url.single string Shortcut URL /i/{filename}
image.title string Optional title (from image YAML)
image.guid string Unique image identifier
image.filename string Original filename
image.exif array Optional EXIF data (camera, lens, aperture, etc.)

Example Twig usage

<section class="album">
   {% if album.cover %} 
   <div class="album-cover mb-6"> <img src="{{ album.cover }}" alt="{{ album.title }}" class="rounded-xl shadow-md w-full h-auto" /> </div>
   {% endif %} 
   <h1 class="text-3xl font-bold mb-2">{{ album.title }}</h1>
   {% if album.description %}
   <div class="text-gray-700 prose mb-8">
      {{ album.description|raw }}
   </div>
   {% endif %}
   {% if album.images %}
   <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
      {% for image in album.images %}
      <a href="{{ image.url }}" class="block group">
         <img src="{{ image.file }}" alt="{{ image.title }}" class="rounded-lg shadow-sm transition group-hover:opacity-90" />
         {% if image.title %}
         <p class="mt-2 text-sm text-gray-700 text-center">{{ image.title }}</p>
         {% endif %}
      </a>
      {% endfor %}
   </div>
   {% else %}
   <p class="text-gray-500 mt-4">No images available in this album.</p>
   {% endif %}
</section>
Previous
Navigation
Next
Image