Timeline // Minniark

timeline.twig

The timeline.twig template is used to display a visual timeline of images — like an Instagram feed. It automatically shows your uploaded images with their date, title, and optional description.

What it does

Shows all images from your gallery in a nice grid
Displays the upload date on each image
Optionally shows a title and description
Uses smaller optimized images for faster loading

Available Twig Variables

The template receives an array called timeline containing image entries. Each image entry is a structured array with the following variables:

timeline – List of images

{% for image in timeline %}
  {# render image card #}
{% endfor %}

Inside each image object

Variable	Type	Description
image.filename	string	Original filename (e.g. IMG_1234.jpg)
image.guid	string	Unique image identifier (used for thumbnails)
image.title	string	Optional title of the image
image.description	string	Optional description text
image.upload_date	string	Upload date (Y-m-d H:i:s format), used for sorting and display
image.file	string	Default image URL (e.g. medium-sized version) used in the gallery
image.url	string	Path single image page /i/example.jpg
image.thumb.s	string	URL to the small image version (e.g. for thumbnails)
image.thumb.m	string	URL to the medium image version (used by default)
image.thumb.l	string	URL to the large image version
image.thumb.xl	string	URL to the extra large image version
image.exif.Camera	string	(optional) Camera model, if available
image.exif.Lens	string	(optional) Lens used
image.exif.Aperture	string	(optional) Aperture setting (e.g. f/5.6)
image.exif.Date	string	(optional) Original capture date from EXIF
image.tags	array	Array of tags (strings), can be used for filtering

Example Twig usage

<img src="{{ image.thumb.m }}" alt="{{ image.filename }}" class="rounded shadow" />

{% if image.title %}
  <h3 class="text-lg font-semibold">{{ image.title }}</h3>
{% endif %}

{% if image.description %}
  <p class="text-sm text-gray-600">{{ image.description }}</p>
{% endif %}

<p class="text-xs text-gray-500">Uploaded: {{ image.upload_date|date("d.m.Y H:i") }}</p>

Pagination

Variables

Variable	Typ	Description
current	int	current page
total	int	complete count of pages
has_prev	bool	Has prev page
has_next	bool	Has next page

Example Pagination

{% if pagination is defined %}
  <nav class="w-full flex items-center justify-between border-t border-gray-200 px-4 sm:px-6 mt-8">
    {% if pagination.has_prev %}
      <a href="?page={{ pagination.current - 1 }}">Previous</a>
    {% endif %}
    <span>Page {{ pagination.current }} from {{ pagination.total }}</span>
    {% if pagination.has_next %}
      <a href="?page={{ pagination.current + 1 }}">Next</a>
    {% endif %}
  </nav>
{% endif %}

Without Pagination

To use the timeline without the pagination, use timelinefull instead of timeline.

Example

{% for image in timelinefull %}
  {# render image card #}
{% endfor %}