HUGO

Partial to generate an image gallery by reading a directory

I’m trying to create an image gallery in the laziest way, that is processing all the files in a static folder for each gallery. I’m using hugo version 15 and readDir.

This gallery should be generated within a single.html template of the content type recipe, so I decided to use a partial template. My problem is the following:

  • every recipe has its set of images in static/images/$recipe
  • how can I represent $recipe in my partial?

This is my (almost working) partial with an absolute link to a single folder:

{{ $url := "/images/pesto" }}
{{ $files := readDir "/static/images/pesto" }}
<div>
  {{ range $files }}
  <figure>
    <a href="{{$url}}/{{.Name | urlize }}">
      <img src="{{$url}}/{{.Name | urlize }}">
    </a>
  </figure>
  {{ end }}
</div>

Obviously, pesto should be replaced by $recipe.
$recipe could be basically either the file name of the markdown file or the title parameter. I guess I may use .Title within the range of pages of type recipe, but then how can I join the string to the base path (/images)?

After reading this topic I realized that I may use printf. So I’ve reworked the example this way:

{{ range where .Site.Pages "Section" "recipe" }}
{{ $url := .Title | printf "/images/%s" }}
{{ $folder := .Title | printf "/static/images/%s" }}
{{ $files := readDir $folder }}

<div>
  {{ range $files }}
  <figure>
    <a href="{{$url}}/{{.Name | urlize }}">
      <img src="{{$url}}/{{.Name | urlize }}">
    </a>
  </figure>
  {{ end }}
</div>

{{ end }}

But I’m getting this error:

reflect: call of reflect.Value.Type on zero Value in partials/gallery.html

That error means that one of the values you are trying to work with is unset. You should use isset or with around these.

If I had to guess, I would think it’s the .Title variable as printf does use reflection, but that’s just a guess.

No, it shouldn’t be .Title, because the two markdown files under content/recipe have the title set.

sorry… looking closer at it. That syntax looks strange to me. [quote=“fedelibre, post:1, topic:2547”]
{{ $url := .Title | printf “/images/%s” }}
[/quote]

I don’t know if that does what you think it does.

I haven’t tested it yet, but I would think it evaluates the := before the |. That could explain the error message you are getting. Can you try it without the := part… Just those top lines, not the loop, just to make sure they do what you expect?

Try something like this:

{{ $url := (printf "/images/%s" .Title) }}

@spf13 If I remove the := the error disappears, but obviously I get the error about not defined variable.

@moorereason I’ve tried your suggestion, but I still get the same error.

If you want the real example to test on, please try this repository.
Thanks

You need to pass the current context from single.html into the partial template. Use:

{{ partial "gallery.html" . }}

instead of

{{ partial "gallery.html" }}
2 Likes

@moorereason thanks, indeed I missed the dot
it works now