# Create photopost with shortcode

**URL:** <https://discourse.gohugo.io/t/create-photopost-with-shortcode/26319>\
**Category:** support\
**Created:** [June 17, 2020, 11:40am UTC](https://discourse.gohugo.io/t/create-photopost-with-shortcode/26319 "2020-06-17T11:40:03Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ArnoVdH](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/arnovdh/32/9109_2.png) [@ArnoVdH](https://discourse.gohugo.io/u/ArnoVdH)\
**Post date:** [June 17, 2020, 11:40am UTC](https://discourse.gohugo.io/t/create-photopost-with-shortcode/26319/1 "2020-06-17T11:40:03Z")

</div>

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 index.md 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 index.md file from the relevant bundle.  
Any help would be greatly appreciated 🙂

---

<div class="post-metadata">

**Author:** ![thelightstain](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/thelightstain/32/9431_2.png) [@thelightstain](https://discourse.gohugo.io/u/thelightstain)\
**Post date:** [June 17, 2020, 7:16pm UTC](https://discourse.gohugo.io/t/create-photopost-with-shortcode/26319/2 "2020-06-17T19:16:06Z")

</div>

Hi,

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 `index.md` or create a shortcode.

Just my .02$

---

<div class="post-metadata">

**Author:** ![ArnoVdH](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/arnovdh/32/9109_2.png) [@ArnoVdH](https://discourse.gohugo.io/u/ArnoVdH)\
**Post date:** [June 18, 2020, 3:49pm UTC](https://discourse.gohugo.io/t/create-photopost-with-shortcode/26319/3 "2020-06-18T15:49:01Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![ArnoVdH](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/arnovdh/32/9109_2.png) [@ArnoVdH](https://discourse.gohugo.io/u/ArnoVdH)\
**Post date:** [June 23, 2020, 8:09pm UTC](https://discourse.gohugo.io/t/create-photopost-with-shortcode/26319/4 "2020-06-23T20:09:18Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [June 25, 2020, 8:09pm UTC](https://discourse.gohugo.io/t/create-photopost-with-shortcode/26319/5 "2020-06-25T20:09:19Z")

</div>

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