Image gallery using data from .json files

support
4

The issue was, inter alia, due to my code parsing through a string, as pointed out by chrillek.

The solution, in case anyone encounters the same problem is as follows (and can be seen here):

1. css

.photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  align-items: stretch;
}
.photos img {
  object-fit: cover;
  height: $card-size;
  border-radius: $very-rounded;
  cursor: pointer;
}

2. data

2.1. tree

data
└── photos
    ├── archie_and_peggy
    │   ├── a-happy-pair.json
    │   ├── archie-at-home.json
    │   ├── archie-at-three-weeks.json
    │   ├── cat-tree-pair.json
    │   ├── emerging-from-a-nap.json
    │   ├── his-first-few-days.json
    │   ├── morning-affection.json
    │   ├── my-cat-peggy-aged-six-months.json
    │   ├── peggy-aged-one-month.json
    │   ├── peggy-jenkins.json
    │   ├── peggy-wanting-cuddles.json
    │   ├── pensive-burmese.json
    │   ├── playing-ball.json
    │   └── wise-beyond-his-years.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
    ├── 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
    ├── index
    │   ├── archie_and_peggy.json
    │   ├── black_and_white.json
    │   ├── colour.json
    │   ├── israel.json
    │   ├── me.json
    │   └── paris.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
    ├── me
    │   ├── at-conference-olivaint.json
    │   ├── at-french-embassy-dakar.json
    │   ├── at-la-treille-in-geneva.json
    │   ├── at-the-beach-in-knokke-le-zoute.json
    │   ├── at-the-western-wall.json
    │   ├── donald-at-fiac.json
    │   ├── in-bedford-ny.json
    │   ├── m-a-degree-ceremony-at-the-sheldonian.json
    │   ├── passover-dinner-in-tel-aviv.json
    │   ├── photoshoot-by-mathieu-camille-collin.json
    │   ├── portrait-by-niels-ackermann.json
    │   └── with-archie.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

2.2. .json file content [a-boy-in-a-south-madagascar-village.json]

{
  "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"
  }
}

3. Layout

    <div id="black-and-white">
      <h2 class="title">{{ index .Site.Data.photos.index.black_and_white "title" | markdownify }}</h2>
      <p class="subtitle">{{ index .Site.Data.photos.index.black_and_white "description" | markdownify }}</p>
      <div class="photos">
        {{ range $.Site.Data.photos.black_and_white }}
        {{ partial "widgets/gallery-image.html" . }}
        {{ end }}
      </div>
    </div>

4. Partial

{{ $id := .id }}
{{ $alt := .alt }}
{{ $image_url := printf "%s%s" site.Params.cloudflare_images $id }}
  <img
  src="{{ $image_url }}/w=420,fit=cover,quality=60"
  alt="{{ $alt }}"
/>

I’m certain there’s a better way of doing this, so if anyone has any suggestions to simplify the workflow, I’d be interested.