On my new site, the staging version of which is hosted on Cloudflare pages and whose repository is here, and using the method described in this page of the Hugo docs, I’m trying to set up an image gallery in the following way:
1. css
.photos {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 20px;
align-items: stretch;
}
.photos img {
border: 1px solid #ccc;
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
max-width: 100%;
}
2. data
2.1. tree
data
└── photos
├── archie-and-peggy
│ └── archie-at-three-weeks.json
├── archie_and_peggy.json
├── black-and-white
│ ├── a-boy-in-a-south-madagascar-village.json
│ ├── abandoned-ship-at-moynak.json
│ ├── duck-collection-in-new-york-apartment.json
│ ├── manhattan-skyline-from-brooklyn.json
│ ├── masai-mara-national-reserve.json
│ ├── pastries-in-patisserie-valerie.json
│ ├── st-stephen-s-cathedral-in-vienna.json
│ ├── statue-of-hermes-at-the-villa-medicis.json
│ ├── the-burggarten-in-vienna.json
│ ├── the-cloister-at-quattro-santi-coronati-rome.json
│ ├── the-cloisters-at-new-college-oxford.json
│ ├── the-fountain-at-place-du-grand-mezel-in-geneva.json
│ ├── the-statue-of-st.-praxedes.json
│ └── traffic-at-tulear-madagascar.json
├── black_and_white.json
├── colour
│ ├── a-village-in-south-madagascar.json
│ ├── beduin-in-petra.json
│ ├── bicycle-made-of-wire.json
│ ├── children-in-south-madagascar-village.json
│ ├── demonstration-for-animal-rights.json
│ ├── driving-through-the-aral-sea.json
│ ├── far-east-meets-near-east.json
│ ├── kenyan-artifact.json
│ ├── modelling-at-grand-palais.json
│ ├── my-cat-peggy-aged-six-months.json
│ ├── on-what-used-to-be-the-aral-sea.json
│ ├── peggy-wanting-cuddles.json
│ ├── soldiers-in-kiev.json
│ ├── tents-in-the-karapakalstan-desert.json
│ ├── the-chor-minor-at-bukhara.json
│ ├── the-city-walls-at-khiva.json
│ ├── the-new-building-at-magdalen-college.json
│ └── village-children-in-madagascar.json
├── colour.json
├── israel
│ ├── a-bar-mitzvah-at-zion-gate.json
│ ├── an-ice-cream-parlour-in-west-jerusalem.json
│ ├── arab-women-playing-at-the-beach-tel-aviv.json
│ ├── boys-playing-in-the-jewish-quarter.json
│ ├── jews-praying-at-temple-mount.json
│ ├── mohammedans-in-jerusalem.json
│ ├── the-ethiopian-quarter-at-holy-sepulchre-church.json
│ ├── the-margosa-hotel-in-jaffa.json
│ ├── the-native-bazaar-near-the-holy-sepulchre.json
│ ├── the-promised-land.json
│ └── two-worlds-collide-at-temple-mount.json
├── israel.json
├── me
├── me.json
├── paris
│ ├── a-baker-in-rue-des-rosiers.json
│ ├── a-marais-street-at-night.json
│ ├── at-paris-photo-2017.json
│ ├── eiffel-tower-from-mur-de-la-paix.json
│ ├── french-tin-soldiers.json
│ ├── gare-du-nord-paris-on-the-day-after-the-november-2015-shootings.json
│ ├── montmartre-in-february.json
│ ├── musee-du-jeu-de-paume.json
│ ├── pont-alexandre-iii-paris-france.json
│ ├── teddy-bear-in-a-paris-flat.json
│ ├── the-anri-sala-exhibition-at-the-pompidou-centre.json
│ ├── the-ile-de-la-cite-in-autumn.json
│ ├── the-paris-zombie-march.json
│ ├── the-paris-zombies.json
│ ├── the-pompidou-centre-in-autumn.json
│ ├── the-pompidou-centre-in-mid-winter.json
│ ├── tricky-moment-in-rue-des-rosiers.json
│ └── tuileries-gardens-in-late-winter.json
└── paris.json
2.2. .json file content
I’m using two types of .json file:
2.2.1. a-boy-in-a-south-madagascar-village.json
There is one .json file for each image, stored in one the folders corresponding to a category that will then be rendered as a separate gallery. (At this stage, I’m only using the id part of the dataset, which contains the final component in the image’s URL. The remainder will serve for a lightbox with a caption that I’ll add later.)
{
"alt": "A boy in a South Madagascar villager",
"caption": "Ampanihy is one of the poorest parts of Madagascar",
"id": "dadc7948-0dcb-4ad7-b614-bde264f9cc00",
"camera": "iPhone X back dual camera 4mm f/1.8",
"flickr": "52909011237",
"geolocation": {
"latitude": "25.009123",
"longitude": "44.126013"
}
}
2.2.2. black_and_white.json
In addition to the .json files for each image, there’s also a .json file for each image folder, which includes a description and a Flickr album id to which I want to provide a link in due course.
{
"title": "Black and white",
"description": "Most of my favorite photographs—in keeping with my minimalist approach to art and to design—are black and white: these ones were shot all over the world.",
"flickr": "72157622017095408"
}
3. /content/_index.md
---
title: "Photos"
date: 2019-05-05T15:26:38+00:00
slug: "photos"
description: "Photographs by Donald Jenkins"
summary: "As Apple started producing increasingly seriously good cameras in their phones, I started using my [phone](https://www.flickr.com/photos/astorg/albums/72157621916056260) for the vast majority of my pictures. Many of the pictures on this page were taken with one. For serious pictures, have a look at [Flickr](https://www.flickr.com/photos/astorg), for more frequent updates, go to [Instagram](https://instagram.com/donaldjenkins_/). I tend to prefer working in black and white, but that isn’t by any means a systematic rule."
---
4. /layout/photos/section.html
{{ define "main" }}
<article class="archive">
<div id="content">
{{ .Summary }}
<div class="columns is-multiline">
<h2 id="black-and-white" class="title">Black and white</h2>
<p class="subtitle">{{ index .Site.Data.photos.black_and_white "description" | markdownify }}</p>
<div class="photos">
{{ range $.Site.Data.photos.black_and_white }}
{{ partial "widgets/gallery-image.html" . }}
{{ end }}
</div>
</div>
</div>
</article>
{{ end }}
My idea is that the <div>...</div> section would then be repeated each of the sets of images in each of the subfolders in data/photos (in this case, ‘colour’, ‘paris’, ‘israel’, ‘archie & peggy’ and ‘me’.
5. partials/widgets/gallery-image.html
{{ range .id }}
{{ $id := .id }}
{{ $image_url := printf "%s%s" .Site.Params.cloudflare_images $id }}
<img
src="{{ $image_url }}/w=420,gamma=0.36,quality=45"
alt=""
/>
{{ end }}
All images are stored in Cloudflare Images, with the URL being set as a parameter in config.toml (as cloudflare_images). The URL for the image is then concatenated by the partial for each of the .json files in the corresponding directory. By the way, I succeeded in setting up a similar workflow for my articles page.
Unfortunately, the above setup produces the following error:
Error: Error building site: failed to render pages: render of “section” failed: “/Users/donaldjenkins/sites/donaldjenkins/layouts/photos/section.html:10:11”: execute of template failed: template: photos/section.html:10:11: executing “main” at <partial “widgets/gallery-image.html” .>: error calling partial: “/Users/donaldjenkins/sites/donaldjenkins/layouts/partials/widgets/gallery-image.html:1:11”: execute of template failed: template: partials/widgets/gallery-image.html:1:11: executing “partials/widgets/gallery-image.html” at <.id>: can’t evaluate field id in type string
Can anyone point to what I’m getting wrong?
