Having trouble creating a gallery from a shortcode

Good morning, everyone, I’m working at creating a gallery on my page as per this topic So far I’m not having any luck. Apparently, the image resources cannot be found by the shortcode, and I’ve tried everything I can think of. `
{{ $galleryimages := .Page.Resources.Match (printf “%s-*” (.Get “folder”)) }}

{{ .Get "title" }}

{{ range $galleryimages }} {{ $thumbnail := .Resize "320x" }}
	<figure itemscope itemtype="http://schema.org/ImageObject" class="image gallery-item">
	  <a href="{{ .Permalink }}" itemprop="contentUrl" data-size="{{ .Width }}x{{ .Height }}" >
	      <img src="{{ $thumbnail.Permalink }}" itemprop="thumbnail" alt="galleryImage" />
	  </a>

	  <figcaption itemprop="caption description">
	    <span itemprop="copyrightHolder"></span>
	  </figcaption>
	</figure>

{{ end }}

` Heres what I have in my shortcode,

` {{< gallery folder=“gallery” title=“Gallery” >}}

  </div>
  <div class="text">
    <h2>About Us</h2>
    <p>Twistmark Media provides social media management, digital marketing, video production, strategic marketing, and creation of custom TV channels to improve client education and grow your business.</p>
  </div>
</div>

` Here’s where i call the shortcode.

---

title: “Home”
date: 2021-04-15T06:43:37-05:00
draft: false.
resources:

  • src: “gallery/*.jpg”
    name: gallery-:counter
    title: gallery-title-:counter
    url: /
    layout: index

and here’s my front matter. If you need more of my code, you can check out my github repository here

I figured it out. The problem here is that my code doesn’t work when you use it in a section. If you rename _index.html just to index.html, the gallery shows up.

Maybe someone can suggest a way to work around this limitation.

1 Like

Ok I did give that a try and it worked great. On localhost, that is working fine. Could we just leave it like that?

yes of course, but, at least for me, it would be nice to fix my code so it works with sections as well. Maybe this is a limitation with Hugo ? I don’t know.

There are two types of page bundles: leaf bundles and branch bundles.

With leaf bundles (directories containing index.md) you may place the page resources adjacent to index.md or at any directory level beneath index.md.

With branch bundles (directories containing _index.md) you must place the page resources adjacent to _index.md.

If you wanted to structure your content like this:

content/
└── posts
    ├── post-1
    │   ├── images
    │   │   ├── x.jpg
    │   │   ├── y.jpg
    │   │   └── z.jpg
    │   └── index.md   <-- leaf bundle
    ├── a.jpg
    ├── b.jpg
    ├── c.jpg
    └── _index.md      <-- branch bundle


You could use the .BundleType page method (not documented yet) within your shortcode to conditionally handle the differences.

{{ if eq .BundleType "branch" }}
  Do branch stuff
{{ else if eq .BundleType "leaf" }}
  Do leaf stuff
{{ else }}
  This page is not a page bundle
{{ end }}

See https://gohugo.io/content-management/page-bundles.

3 Likes

That’s great @jmooring , thank you!

I’ll see to upgrading the shortcode one of these days

TIL about .BundleType. Nice.

1 Like

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