Lightbox and Gallery

support
1

Hello. I’m trying to create gallery/single lightbox using the official Hugo documentation and small JS gallery script from CDN. It seems like I’m having some trouble.

First example “year” shortcode works like a charm. (Create your own shortcodes | Hugo).

Trying to get the results from next example “image gallery”
(Create your own shortcodes | Hugo)

Created the theme/layouts/shortcodes/gallery.html with that content:

<div class="{{ .Get "class" }}">
  {{ .Inner }}
</div>

Created the theme/layouts/shortcodes/img2.html (because img.html already exists but I need another solution) with:

{{- $src := .Get "src" -}}
{{- with .Parent -}}
  <a href="{{ $src }}" class="spotlight gallery-thumbnail"></a>
    <img src="{{ $src }}" class="spotlight">
{{- else -}}
  <img src="{{ $src }}" class="spotlight">
{{- end -}}

Inserting into my _index.md code:

{{< gallery class="content-gallery" >}}
  {{< img2 src="/img/boots.jpg" >}}
{{< /gallery >}}

Works like a charm. But I want to generate thumbnail because I won’t use CSS rules for minimize thumbnail image. I’m looking to that article: Thumbnail Images on your Hugo Blog Posts · Make with Hugo and try to integrate that code into existing img2.html like that:

{{- $src := .Get "src" -}}
{{- with .Parent -}}
  <a href="{{ $src }}" class="spotlight gallery-thumbnail"></a>
    <img src="{{ ($src.Fill "200x200 q100 Center").RelPermalink }}" class="spotlight">
{{- else -}}
  <img src="{{ $src }}" class="spotlight">
{{- end -}}

…and I got the error: [0m: can’t evaluate field Fill in type string

  1. Why is everything broken? : )
  2. I want to load gallery for post in the front matter, how I can change that code for that?

PS: 3. After critical error I need always restart npm?

2

What is the full path to this image relative to the root of your project?

3

/public/img/boots.jpg

4

I don’t want to know the published path. I want to know the source path. Is it in the static directory, the assets directory, something else that’s mounted?

5

Now I’m changed the path to the files in the assets/img folder. Without .Fill it works like a charm. But when I change it…

{{- $src := .Get "src" -}}

{{- with .Parent -}}
  <a href="{{ $src }}" class="spotlight gallery-thumbnail"></a>
    <img src="{{ ($src.Fill "200x200 q100 Center").RelPermalink }}" class="spotlight">
{{- else -}}
  <img src="{{ $src }}" class="spotlight">
{{- end -}}

…i got the error
[0m: execute of template failed at <$src.Fill>: can’t evaluate field Fill in type string

6

The shortcode examples that you reference were written long before page resources were a thing.

If I were you I would take a different approach.

content structure

content/
├── posts/
│   ├── post-1/
│   │   ├── gallery/
│   │   │   ├── a.jpg
│   │   │   ├── b.jpg
│   │   │   └── c.jpg
│   │   └── index.md
│   ├── post-2/
│   │   ├── gallery/
│   │   │   ├── d.jpg
│   │   │   ├── e.jpg
│   │   │   └── f.jpg
│   │   └── index.md
│   └── _index.md
└── _index.md

layouts/posts/single.html

{{ range .Resources.Match "gallery/**" }}
  <a class="spotlight gallery-thumbnail" href="{{ .RelPermalink }}">
    {{ with .Fill "200x200 q100 Center" }}
      <img class="spotlight" src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
    {{ end }}
  </a>
{{ end }}

Try it:

git clone --single-branch -b hugo-forum-topic-50494 https://github.com/jmooring/hugo-testing hugo-forum-topic-50494
cd hugo-forum-topic-50494
hugo server
7

It works like a charm. Thank you!

8

One question. Now my files placed in the ./gallery/ and works.
How can I use that path in front matter?

9

Sorry, I don’t understand the question. By placing the images within a page bundle as shown in the content structure above, we don’t need to use front matter to build a gallery.

10

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.