Reference Directory within leaf bundle instead of a 'fixed directory'

Question

I am using the docsy Theme in Hugo to create a documentation heavy website. I have integrated the easy-gallery shortcode in my Theme. I used an updated fork for this by Darthagnon.

I am working with leaf bundles and I want to alter this shortcode in the way in which I don't have to specify the whole directory, but only the folder in my bundle.

content/
├── branch-bundle-1
└── branch-bundle-2
    ├── _index.md   <-- in here
    ├── image-gallery-1
    └── image-gallery-2

So in _index.md I want to reference the shortcode which then reads the directory of _index.md and then adds image-galley-1 to the directory so it generates an image gallery with images within /content/branch-bundle-2/image-gallery-2 just with stating {{< gallery dir="image-gallery-2" />}}

By default the shortcode needs me to give it a directory in /static/. By default, it wants a directory /static/.../image-gallery-1 which I can then access with {{ gallery dir=".../image-gallery-1". So it starts automatically in /static/.

The original shortcode looks exactly like this:

{{- if not ($.Page.Scratch.Get "figurecount") }}<link rel="stylesheet" href="{{ relURL "/css/hugo-easy-gallery.css" }}" />{{ end }}
{{- $.Page.Scratch.Add "figurecount" 1 }}
{{ $baseURL := .Site.BaseURL }}
{{- $thumbnailSize := .Get "thumbnail-size" | default "300x300" -}}
<div class="gallery caption-position-{{ with .Get "caption-position" | default "bottom" }}{{.}}{{end}} caption-effect-{{ with .Get "caption-effect" | default "slide" }}{{.}}{{end}} hover-effect-{{ with .Get "hover-effect" | default "zoom" }}{{.}}{{end}} {{ if ne (.Get "hover-transition") "none" }}hover-transition{{end}}" itemscope itemtype="http://schema.org/ImageGallery">
  {{- with (.Get "dir") -}}
    <!-- If a directory was specified, generate figures for all of the images in the directory -->
    {{- $files := readDir (print "/static/" .) }}
    {{- range $files -}}
      <!-- skip files that aren't images, or that inlcude the thumb suffix in their name -->
      {{- $thumbext := $.Get "thumb" | default "-thumb" }}
      {{- $isthumb := .Name | findRE ($thumbext | printf "%s\\.") }}<!-- is the current file a thumbnail image? -->
      {{- $isimg := lower .Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp|webp|avif|jxl)" }}<!-- is the current file an image? -->
      {{- if and $isimg (not $isthumb) }}
        {{- $caption :=  .Name | replaceRE "\\..*" "" | humanize }}<!-- humanized filename without extension -->
        {{- $linkURL := print $baseURL ($.Get "dir") "/" .Name | absURL }}<!-- absolute URL to hi-res image -->
        {{- $filetype := index (findRE "[^.]+$" .Name ) 0 }}<!-- file extension of image -->
        {{- $thumb := .Name | replaceRE "(\\.)" ($thumbext | printf "%s.") }}<!-- filename of thumbnail image -->
        {{- $thumbexists := where $files "Name" $thumb }}<!-- does a thumbnail image exist? --> 
        {{- $thumbURL := print $baseURL ($.Get "dir") "/" $thumb | absURL }}<!-- absolute URL to thumbnail image -->
        <div class="box">
          <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
            <div class="img" style="background-image: url('{{ if $thumbexists }}{{ $thumbURL }}{{ else }}{{ $linkURL }}{{ end }}');" >
              <img itemprop="thumbnail" src="{{ if $thumbexists }}{{ $thumbURL }}{{ else }}{{ $linkURL }}{{ end }}" alt="{{ $caption }}" /><!-- <img> hidden if in .gallery -->
            </div>
            <figcaption>
              <p>{{ $caption }}</p>
            </figcaption>
            <a href="{{ $linkURL }}" itemprop="contentUrl"></a><!-- put <a> last so it is stacked on top -->
          </figure>
        </div>
      {{- end }}
    {{- end }}
  {{- else -}}
        {{ with .Inner -}}
            <!-- If no directory was specified, include any figure shortcodes called within the gallery -->
            {{ . }}
        {{- else }}
            <!-- Generate figures for all page resources of type image. -->
            {{- range $.Page.Resources.ByType "image" -}}

                {{- $thumbnail := .Fill $thumbnailSize -}}
                <div class="box">
                    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                        <div class="img" style="background-image: url('{{ $thumbnail.RelPermalink }}');" >
                            <img itemprop="thumbnail" src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}" height="{{ $thumbnail.Height }}" alt="{{ .Title }}" /><!-- <img> hidden if in .gallery -->
                        </div>
                        {{- with .Title -}}
                        <figcaption>
                            <p>{{ . }}</p>
                        </figcaption>
                        {{- end -}}
                        <a href="{{ .RelPermalink }}" itemprop="contentUrl"></a><!-- put <a> last so it is stacked on top -->
                    </figure>
                </div>
            {{- end }}
        {{- end }}
    {{- end }}
</div>

I have tried to change {{- $files := readDir (print "/static/" .) }} in line 8, specifacally the part after readDir but this didn't work.

I have tried to use things like .Dir, .Page.Dir, .File.Page.Dir inside (...) and I have tried to define a new variable by something like this: {{ $variable := .Dir }}and then I tried to change line 8 into something like {{- $files := readDir ("$variable" .)}}.

This unsurprisingly didn't work. Practiacally, I don't know anything about GoLang and its syntax. I guess I have to change some code below line 8 too, but I am not sure where and in what exactly.

The changes above gave me various kinds of errors. Manly errors in the fashion of You cannot use X in Y type of expressions.

I hope someone could walk me threw the changes necessary for the shortcode to read the current directory to use an image folder in the bundle I am in, just by stating the name of the folder in the bundle without the directory of the bundle itself.

Answer 1

What differentiates a directory from a (sub-)section? Not too much. That is why I would not go this route. The choice to go for the static folder is a wise one. Especially when you make the static folder the asset dir.

However, it IS possible to do it in the way you propose. Look at https://gohugo.io/content-management/page-resources/ and you will see that you can walk over the images by using:

{{ .Resources.Match "image-gallery-2/*" }}

When you store them in a variable and range/walk over them, you will get all images in your gallery. Surely, you have a very complex shortcode... but that shortcode is multi-purpose and has WAY too much lines. I would get rid of that shortcode and rewrite it using this strategy.

You need a shortcode call that looks like:

{{< mygallery dir="image-gallery-2" }>>

And then a shortcode called mygallery.html with code like:

{{ range (.Resources.Match (print (.Get "dir") "/*")) }}
  ... output your image ...
{{ end }}

Answer 2

Not long ago, it's been more easily to get working template for Hugo. I've forked some repositories, which are now available only on paid version.

You can find good idea to write your own shortcode from this

https://github.com/snayp/academic/blob/master/layouts/shortcodes/gallery.html