Generate a page with multiple parts automatically


I’m trying to set up a personal travel blog/diary/gallery. In every page I’d like to have a structure like:

So, for every part of the trip I’m showing a map with the markers from exif data, then some content, then the pictures - all in a single page.

The screenshot comes from my first attempt to do it by abusing of bundles:

    ireland/        <- whole trip
      day_1/        <- first day - this will get rendered in one page
        road-trip/   <- leaf bundle - first part of the page
          media/ *.jpg        <- media for the part
        inis-mor/    <- leaf bundle - second part of the page
          media/ *.jpg        <- media for the second part
      day_2/        <- second page

I used just a layouts/trips/section.html to render everything: Title and description of each part come from the leaf index.html, while the pictures and maps are based on the leaf bundle resources.

Now, with this approach I cannot get navigation to work - in the context of day_1 and day_2 .Prev and .Next are undefined, while .Site.RegularPages.Next/Prev point to inner pages, and not to the siblings of the sections. I have a hunch I could traverse the tree recursively as shown in the breadcrumb example, and some posts here did hint at that direction. However, this seems to get overly complicated.

I also tried to write a shortcode to generate each part, taking a subdirectory as input and using Resources.Match to load only those resources - but then I must mention each subdir individually in each The previous approach was way more automated. Of course I could use an external script to generate the pages, but I’d rather not.

So, to come to my question: Can someone point me to a clean and lean way to build a page by scanning automatically some resources grouped by directory? The groups should also respect some ordering - date or some ancillary field, but content of day 2 should definitely come after day 1.



I use Fancybox to present all pics. Checkout my sample repo.

I created a template “gallery.html” to generate the pages from directory ./gallery (page bundles). My ATOM feed selects a pictore for the feed.

Thanks @ju52 ! The big difference with my aim, however, is that I want to have multiple galleries on the same page, and all of them autogenerated by scanning the bundle, while you list explicitly every image in

yes, change “gallery” as directory and data-fancybox=gallery
gallery1, data-fancybox=gallery1
gallery2, data-fancybox=gallery2

Don’t know, if this works with the script, shold included n-times?

fancybox will have a horizntal scroll bar in the next version.

Good luck

PS: Do you have seen my shortcode maplink ?

Mmmh, but that’s my problem, I don’t want to write all directories explicitly. I want a template that discovers automatically that there are three, or four, or five directories with images and generates three or four or five galleries, but I cannot find a lean way.

For the maps, I wrote a shortcode that uses leaflet

{{ $resources := .Get 0 | printf "%s*/*" | $.Page.Resources.Match }}
{{ $divid := substr ( md5 ( now.Unix ) ) 0 5 }} {{/* just generate a short, unique div id */}}
{{ $pics := $resources.ByType "image" }}

<div class="map-box" id="{{ $divid }}"></div>

    let coords = [
      {{ with $pics }}
        {{ range . }}
          {{ if (and .Exif.Lat .Exif.Long) }}
            [ {{ .Exif.Lat }} , {{ .Exif.Long }} ],
          {{ end }}
        {{ end }}
      {{ end }}

    let mymap ='{{ $divid }}', {'scrollWheelZoom': false});
    let bounds = L.latLngBounds(coords).pad(0.2);

    for (let pair of coords) {

    L.tileLayer('http://{s}{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="">OpenStreetMap</a> contributors'


This still assumes that I pass the directory name as a parameter, though, so it doesn’t satisfy my criteria yet.