3

I'm new to both Hugo and Netlify, so it's possible I'm simply doing this wrong.

I've successfully built and deployed a site with galleries, using Hugo, the Galleria plugin, and deploying to Netlify This has all worked. However, I want to try using the Netlify CMS, and am struggling to set it up to handle the gallery feature (it's doing fine for just writing a text post)

I'm not sure if this is a limitation of Netlify CMS, or if I'm doing galleries in a way that isn't suited to static sites.

To implement the gallery in Hugo, I am doing the following in the front matter of each post:

+++
date = "2017-02-13T23:17:09+01:00"
summary = "In which I fail to RTFM, visit a Lamasery, and eat a lot of fruit."
tags = []
title = "China 2017: Day 11"

[[galleria]]
imgSrc = "../images/china/11/Lama-Temple.JPG"
imgTitle = "Hall In The Lama Temple"
imgDesc = "One of the main halls of the Lama Temple."

[[galleria]]
imgSrc = "../images/china/11/Octagonal-Hall.JPG"
imgTitle = "Octagonal Hall"
imgDesc = "An octagonal building just inside the entrance of the Lama Temple"

.
.
.
+++

Then in the layout page:

  {{ if isset .Params "galleria" }}
  <div class="galleria">
  {{ range .Params.galleria}}
  <img src="{{ .imgSrc }}" alt="{{ .imgTitle }}" data-title="{{ .imgTitle }}" data-description="{{ .imgDesc }}">
  {{ end }}
  </div>
  {{ end }}

The on the Netlify CMS setup I tried adding an Object widget:

 -  name: "galleria"
         label: "Gallery" 
         widget: "object"
         optional: true
         fields:
          - {label: "Title", name: "imgTitle", widget: "string"}
          - {label: "Gallery Image", name: "imgSrc", widget: "image"}
          - {label: "Description", name: "imgDesc", widget: "string"}

I'm left with two problems:

(i) The object shows up, but of course only once. How would I set it up to allow me to enter as many images as I want?

(ii) On build, I'm getting an error: ERROR 2017/05/28 22:37:20 Error while rendering "page": template: _default/single.html:23:15: executing "_default/single.html" at <.imgSrc>: can't evaluate field imgSrc in type interface {}

So it seems I'm doing something wrong even trying to get one image (and associated data) in to a post.

tech4him
  • 970
  • 5
  • 20
Starfall Projects
  • 395
  • 4
  • 21

1 Answers1

7

Putting this here in case other people get stuck on this.

After asking around, and thanks to the lovely people in the Netlify Gitter channel:

I should have used a list widget, rather than an object. The YAML now looks like this:

-  name: "galleria"
         label: "Gallery" 
         widget: "list"
         optional: true
         fields:
          - {label: "Title", name: "imgTitle", widget: "string"}
          - {label: "Gallery Image", name: "imgSrc", widget: "image"}
          - {label: "Description", name: "imgDesc", widget: "string"}

This has removed the build error, and provides me a widget in the CMS editor where I can add as many (or few) images as I wish.

I have now hit a follow up problem, where posts created with the CMS are created correctly, appear in the right folders in the repo, but 404 . . .

Starfall Projects
  • 395
  • 4
  • 21
  • 1
    Did you ever get an answer for your second question? It sounds like it's caused by your Hugo theme not being included as a submodule. If it's not included properly, the buildbot doesn't find it, and the pages aren't built. You can solve this by removing the .git folder from the theme folder, or you can [include it using git-submodule](http://choomnuan.com/blog/2015/07/18/how-to-setup-hugos-theme-using-git-submodule/). (Since this is secondary to the main question, I'm just going to link to some instructions, rather than writing them out in this comment.) – Jessica Parsons Jun 16 '17 at 21:36
  • The 404 was down to developer error - baseURL (obviously) not working while testing on a netlify domain when the site url was set as my proper domain – Starfall Projects Jun 16 '17 at 21:42