Templates

Image

image.twig

The image.twig template is responsible for rendering a detailed view of a single image. It displays the image itself, along with metadata such as the title, description, upload date, and EXIF information like aperture, shutter speed, ISO, and camera model. This template provides a visually structured and informative layout for presenting individual images within the gallery.

Twig variables

Variable Type Data
image.title string Title from the image metadata
image.description string Markdown-formatted description (parsed to HTML)
image.filename string Original filename (e.g. IMG_1234.jpg)
image.guid string Unique identifier for caching and lookup
image.rating int Rating value (e.g. 0–5)
image.upload_date string Upload timestamp in Y-m-d H:i:s format
image.file string Path to the cached image or original image (set up in the settings)
image.url string Path single image page /i/example.jpg
image.exif object Contains all EXIF data if available
image.exif.aperture string Formatted aperture (e.g. f/2.8)
image.exif.shutter_speed string Formatted shutter speed (e.g. 1/250s or 2s)
image.exif.iso int ISO value (e.g. 100, 800)
image.exif.camera string Camera model (e.g. Canon EOS 700D)
image.exif.lens string Lens used (if available)
image.exif.date string Original date from EXIF (e.g. 2021:09:25 16:23:28)
image.exif.gps.latitude float Latitude coordinate (if GPS available)
image.exif.gps.longitude float Longitude coordinate (if GPS available)

Example Twig usage

<main>
    <h2>{{ image.title }}</h2>
    <img src="{{ image.file }}" alt="{{ image.title }}">
    <div><span>{{ image.exif.camera }} | {{ image.exif.aperture }} | {{ image.exif.shutter_speed }} | ISO {{ image.exif.iso }} | {{ image.exif.focal_length }}</span></div>
    {{ image.description|raw }}
</main>

Extented twig variables (Navigation)

There are some new variables since Version 2025.8.0

Variable Type Data
image.url string Public URL to the image detail page (/timeline/... or /album/...)
image.url_single string Direct link to the single-image page under /i/<filename>
image.goback object Go-back navigation link (to album or timeline)
image.goback.url string URL to go back (e.g. /timeline or /album/<slug>)
image.goback.label string Label for the go-back link (e.g. "Timeline" or album title)
prev object Previous image (if available)
prev.url string URL to the previous image detail page
prev.title string Title of the previous image (if available)
next object Next image (if available)
next.url string URL to the next image detail page
next.title string Title of the next image (if available)

Examples

{% if breadcrumbs %}
<nav class="breadcrumbs">
    {% for crumb in breadcrumbs %}
        {% if not loop.last %}
            <a href="{{ crumb.url }}">{{ crumb.label }}</a> /
        {% else %}
            {{ crumb.label }}
        {% endif %}
    {% endfor %}
</nav>
{% endif %}

Previous or next image

{% if prev or next %}
<div class="nav-images">
    {% if prev %}
        <a href="{{ prev.url }}">{{ prev.title }}</a>
    {% endif %}
    {% if next %}
        <a href="{{ next.url }}">{{ next.title }}</a>
    {% endif %}
</div>
{% endif %}
{% if image.goback %}
    <p class="goback">
        <a href="{{ image.goback.url }}">Back to {{ image.goback.label }}</a>
    </p>
{% endif %}
Previous
Album
Next
Blog List