Templates

Collection

collection.twig

The collection.twig template renders a single collection page - a thematic group of multiple photo albums.
It displays the collection’s title, optional cover image and description, followed by all albums included in that collection.

What it does

  • Displays one collection from /collection/{slug}
  • Shows the collection title, description, and cover image (optional)
  • Lists all albums that belong to the collection
  • Each album card links to /album/{albumSlug}
  • Supports consistent layout and theming with other templates

Available Twig Variables

The template receives a variable called collection representing the current collection, plus a list of albums in albums.

collection – Collection object

Variable Type Description
collection.slug string Collection identifier (used in the URL /collection/{slug})
collection.title string Title of the collection (from YAML collection.name)
collection.description string HTML description (converted from Markdown)
collection.cover string (optional) Cached cover image URL
collection.url string Direct link to this collection (/collection/{slug})

albums – List of albums inside the collection

Each collection contains one or more albums, listed in its YAML file.
albums is an array of album entries, each having the following properties:

Variable Type Description
album.slug string Album identifier (used in URL)
album.title string Album title (from YAML album.name or slug)
album.cover string (optional) Cached album cover image path
album.url string Path to album page /album/{albumSlug}

Example Twig usage

collection.list.twig

The collection.list.twig template renders a list of all available collections - each represented by its title, optional cover image, and link to the collection’s detail page.
It’s used for the /collections route to give an overview of all thematic groups of albums.

What it does

  • Displays all available collections from the /userdata/content/collection/ directory
  • Shows each collection’s title and optional cover image
  • Links each collection card to its detail page (/collection/{slug})
  • Can optionally include descriptions or summaries (if available)
  • Supports consistent theming and responsive layouts

Available Twig Variables

The template receives an array called collections containing all available collection entries.

collections - List of collection objects

{% for collection in collections %}
{# render collection card #}
{% endfor %}

Inside each collection object

Variable Type Description
collection.slug string Unique identifier for the collection (used in URL)
collection.title string Collection title (from YAML collection.name)
collection.cover string (optional) Cached cover image path
collection.url string Direct link to the collection page /collection/{slug}
collection.description string (optional) Short text or summary (if available)

Example Twig usage

<section class="collection-list grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
   {% for collection in collections %} 
   <article class="collection-card text-center">
      <a href="{{ collection.url }}" class="block group">
         {% if collection.cover %} <img src="{{ collection.cover }}" alt="{{ collection.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"> {{ collection.title }} </h2>
      </a>
      {% if collection.description %}
      <p class="mt-2 text-sm text-gray-600 line-clamp-2">
         {{ collection.description|striptags }}
      </p>
      {% endif %}
   </article>
   {% else %}
   <p class="text-gray-500 text-center col-span-full">No collections found.</p>
   {% endfor %}
</section>
Previous
Map