Technique to display a bunch of photographs (with captions and descriptions - if needed) on a simple gallery page. This takes advantage of Grav's media functionality which allows a page to be aware of the images available in it's folder. The images placed in the enclosing folder will be stored and displayed in alphabetical order. The first image will be used as the header image. The actual gallery images will be displayed below any text on the page.

First thing is to title this page gallery.md instead of item.md. Inside the parent folder are a bunch of images. Each image will have an associated meta.yaml file for data such as title and caption text.

Effect Result
original size 640 x 480 x 72dpi
type jpeg - low
quality 0
blur 0.1
output progressive
auto-converted size 300 x 200 x 72dpi

Special page created: templates/gallery.html.twig

{% extends 'partials/base.html.twig' %}

{% block content %}

{% if config.plugins.breadcrumbs.enabled %}
        {% include 'partials/breadcrumbs.html.twig' %}
    {% endif %}

    {{ page.content }}

    <ul class="simplegallery">
    {% for image in page.media.images %}
    <li>
        <div class="image-surround">
            {{ image.cropResize(300,200).html }}
        </div>
        <div class="image-info">
            <h2>{{ image.meta.title }}</h2>
            <p>{{ image.meta.description }}
        </div>
    </li>
    {% endfor %}
    </ul>

    {% endblock %}