Create photopost with shortcode

Hi there!
I built my blog some time ago in hugo and loved it.
Now, I also use it to post my photography on there.
Until now I did this in the very tedious way of linking every image separately.
I would love to have a shortcode I could just insert in the file that ranges over the images inside the bundle, but I can’t seem to get it to work.

I’ve made a layouts/shortcodes/photopost.html:

{{ with .Resources.Match "**.jpg" }}
{{ range . }}
<img src="{{ .RelPermalink }}">
{{ end }}
{{ end }}

I’m sure this looks very amateurish (which I totally am) but I thought that this would be an easy enough introduction into the working of shortcodes.
I think I get the basic idea: get the resources from the bundle, range over them, make it into a shortcode and use it in the file from the relevant bundle.
Any help would be greatly appreciated :slight_smile:

1 Like


I don’t know your structure, but if the images are bundled you can put your code in single.html after {{- with $.Resources.ByType "image" -}} or even as a block without needing to touch or create a shortcode.

Just my .02$

So instead of creating a shortcode just creating a single.html template? That’s a good idea, I’ll try to get that one to work.
So {{- with $.Resources.ByType "image" -}} would call the images in the bundle (even if they’re in a seperate subfolder?) and then I can range over them?
Thanks for the tip!

I got it to work in the end by constructing the following shortocde:

{{ $myImage := .Page.Resources.Match "**.jpg" }}
{{ with $myImage }}
    {{ range . }}
        <img loading=lazy src="{{.Permalink }}">
    {{ end }}
{{ end }}

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