# Page Bundle Image References

**URL:** <https://discourse.gohugo.io/t/page-bundle-image-references/10750>\
**Category:** support\
**Created:** [February 26, 2018, 9:39pm UTC](https://discourse.gohugo.io/t/page-bundle-image-references/10750 "2018-02-26T21:39:39Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![aidan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/aidan/32/5109_2.png) [@aidan](https://discourse.gohugo.io/u/aidan)\
**Post date:** [February 26, 2018, 9:39pm UTC](https://discourse.gohugo.io/t/page-bundle-image-references/10750/1 "2018-02-26T21:39:39Z")

</div>

Hi all,

I am having trouble understanding page bundle content organization and would appreciate any guidance / explanation you are able to give. I am trying to transition from using static/images/ to store my images to using page bundles (both because I’d like to use image processing shortcodes and because page bundles seem cleaner as a longterm organizational strategy). I am using Hugo v.0.36.1.

Currently, I have one page organized as follows:

```
/content/posts/my-section/my-post/
    index.md
    images/
        my-img-1.jpg
        my-img-2.jpg
        etc.

```

I’d like to understand how to reference those images from my-post at index.md. I have tried the following:

```
{{ with .Resources.ByType "image" }}
    <div class="Image">
    {{ range . }}
        <img src="{{ .RelPermalink }}">
    {{ end }}
    </div>
{{ end }}

```

with no luck. Console logging shows a 404 for that image.

What am I doing wrong here?

Thanks!

---

<div class="post-metadata">

**Author:** ![Randy\_Lough](https://avatars.discourse-cdn.com/v4/letter/r/85e7bf/32.png) [@Randy\_Lough](https://discourse.gohugo.io/u/Randy_Lough)\
**Post date:** [February 26, 2018, 9:42pm UTC](https://discourse.gohugo.io/t/page-bundle-image-references/10750/2 "2018-02-26T21:42:22Z")

</div>

Try `{{ with .Page.Resources.ByType "image" }}`

---

<div class="post-metadata">

**Author:** ![aidan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/aidan/32/5109_2.png) [@aidan](https://discourse.gohugo.io/u/aidan)\
**Post date:** [February 26, 2018, 10:01pm UTC](https://discourse.gohugo.io/t/page-bundle-image-references/10750/3 "2018-02-26T22:01:26Z")

</div>

> [@Randy\_Lough](#):
>
> Try {{ with .Page.Resources.ByType “image” }}

No luck there either. In both cases, I am having the page render the shortcodes out:

 ![21%20PM](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/2/2d0f460f702a19d258bea80b21eb7154df7229eb.png)

Does this help diagnose my issue?

---

<div class="post-metadata">

**Author:** ![Randy\_Lough](https://avatars.discourse-cdn.com/v4/letter/r/85e7bf/32.png) [@Randy\_Lough](https://discourse.gohugo.io/u/Randy_Lough)\
**Post date:** [February 26, 2018, 10:18pm UTC](https://discourse.gohugo.io/t/page-bundle-image-references/10750/4 "2018-02-26T22:18:37Z")

</div>

**UNTESTED:** But considering all your images are in it’s own folder I’d try `{{ with .Page.Resources.Match "images/*" }}` that should at least grab all the images in that folder.

@regis has a great article on [Page Resources](https://regisphilibert.com/blog/2018/01/hugo-page-resources-and-how-to-use-them/) that helped me out a lot. Worth checking out if you havent already.

---

<div class="post-metadata">

**Author:** ![aidan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/aidan/32/5109_2.png) [@aidan](https://discourse.gohugo.io/u/aidan)\
**Post date:** [February 26, 2018, 10:54pm UTC](https://discourse.gohugo.io/t/page-bundle-image-references/10750/5 "2018-02-26T22:54:30Z")

</div>

> [@Randy\_Lough](#):
>
> UNTESTED: But considering all your images are in it’s own folder I’d try {{ with .Page.Resources.Match “images/\*” }} that should at least grab all the images in that folder.
> 
> @regis has a great article on Page Resources that helped me out a lot. Worth checking out if you havent already.

Ahh, that article does help! My issue was simple: I was trying to run my code in my index.md file rather than in the single.html template.

Will I have to build a shortcode which loads and displays images from page bundles in my markdown files? Or is there a built-in (or add-on) shortcode that can load images from page bundles? For example, could I use the [figure](https://gohugo.io/content-management/shortcodes/#figure) shortcode with my page bundled images?

I am currently using [Hugo Easy Gallery](https://github.com/liwenyip/hugo-easy-gallery/) to display images, and appreciate being able to create figures and galleries with shortcodes. I usually want to display images in specific positions throughout my posts, so hard-coding the location of images in my single.html file is not ideal.

Thanks again for the guidance!

---

<div class="post-metadata">

**Author:** ![RickCogley](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/rickcogley/32/10269_2.png) [@RickCogley](https://discourse.gohugo.io/u/RickCogley)\
**Post date:** [February 26, 2018, 11:04pm UTC](https://discourse.gohugo.io/t/page-bundle-image-references/10750/6 "2018-02-26T23:04:13Z")

</div>

If you want to run it from the markdown file, yes, make a shortcode. Template codes won’t parse directly in a markdown file.