# Struggling with images

**URL:** <https://discourse.gohugo.io/t/struggling-with-images/32795>\
**Category:** support\
**Created:** [May 9, 2021, 9:24pm UTC](https://discourse.gohugo.io/t/struggling-with-images/32795 "2021-05-09T21:24:18Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![baconlorange](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/baconlorange/32/18645_2.png) [@baconlorange](https://discourse.gohugo.io/u/baconlorange)\
**Post date:** [May 9, 2021, 9:24pm UTC](https://discourse.gohugo.io/t/struggling-with-images/32795/1 "2021-05-09T21:24:18Z")

</div>

I want to access one image, which i define in my .md file.

So my structure is the following:

content/page/somename

This has an \_index.md and a subfolder images with the content  
mainimage.jpg  
someotherimage.jpg

Now i want to define in my frontmatter my image.  
Which path do i need to give my frontmatter variable “mainimage” to access my mainimage.jpg from the images folder?  
I tried it with that:  
mainImage: “/images/mainimage.jpg”

But as soon as i try to access it via the following:  
{{ $path := .Params.mainImage }}  
{{ $thumb := resources.Get $path }} I will get an error

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [May 9, 2021, 9:40pm UTC](https://discourse.gohugo.io/t/struggling-with-images/32795/2 "2021-05-09T21:40:04Z")

</div>

> [@baconlorange](#):
>
> This has an \_index.md and a subfolder images with the content

If this is a leaf bundle, rename \_index.md to index.md.

If this is a branch bundle, the images must be adjacent to the \_index.md file, not in a subdirectory.

> [@baconlorange](#):
>
> {{ $thumb := resources.Get $path }}

The `resources.Get` function retrieves a _global_ resource (e.g., an image in the `assets` directory).

Use the `.Resources.GetMatch` method to retrieve a _page_ resource.

---

<div class="post-metadata">

**Author:** ![idarek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/idarek/32/26229_2.png) [@idarek](https://discourse.gohugo.io/u/idarek)\
**Post date:** [May 10, 2021, 6:04am UTC](https://discourse.gohugo.io/t/struggling-with-images/32795/3 "2021-05-10T06:04:44Z")

</div>

> [@baconlorange](#):
>
> But as soon as i try to access it via the following:  
> {{ $path := .Params.mainImage }}  
> {{ $thumb := resources.Get $path }} I will get an error

```auto
{{ $path := resources.Get .Params.mainImage }}
{{ $thumb := $path }} 

```

---

<div class="post-metadata">

**Author:** ![baconlorange](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/baconlorange/32/18645_2.png) [@baconlorange](https://discourse.gohugo.io/u/baconlorange)\
**Post date:** [May 10, 2021, 7:20pm UTC](https://discourse.gohugo.io/t/struggling-with-images/32795/4 "2021-05-10T19:20:54Z")

</div>

I have moved my image into the \_index.md folder - still no luck - Is there somewhere a good tutorial which shows the usage of images?\*

I can not work with static images, as i want also to convert them into webp in a later step.

---

<div class="post-metadata">

**Author:** ![baconlorange](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/baconlorange/32/18645_2.png) [@baconlorange](https://discourse.gohugo.io/u/baconlorange)\
**Post date:** [May 10, 2021, 7:48pm UTC](https://discourse.gohugo.io/t/struggling-with-images/32795/5 "2021-05-10T19:48:59Z")

</div>

So my actual solution is:  
{{ $path := .Params.mainimage }}  
{{ $image := .Resources.Match $path}}

```
    {{ with $image }}
     {{ range . }}
     {{ $resized := .Resize "300x"}}
     <img src="{{ $resized.Permalink}}"/>
     {{ end }}
     {{ end }}

```

In my frontmatter i have  
mainimage: “images/main\_logo.jpg”

But this is not a nice solution as i have a range for just one item.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [May 10, 2021, 9:00pm UTC](https://discourse.gohugo.io/t/struggling-with-images/32795/6 "2021-05-10T21:00:13Z")

</div>

```nohighlight
content/
└── post/
    └── post-1/
        ├── images/
        │ ├── b.jpg
        │ └── main_logo.jpg
        └── index.md

```

```auto
{{ with .Params.mainimage }}
  {{ with $.Resources.GetMatch . }}
    {{ $resized := .Resize "300x" }}
    <img src="{{ $resized.Permalink }}">
  {{ end }}
{{ end }}

```

See [https://gohugo.io/content-management/page-resources/#methods](https://gohugo.io/content-management/page-resources/#methods).

The `.Match` method returns a slice of images, even if there is only one match.

The `.GetMatch` method returns a single image.

---

<div class="post-metadata">

**Author:** ![baconlorange](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/baconlorange/32/18645_2.png) [@baconlorange](https://discourse.gohugo.io/u/baconlorange)\
**Post date:** [May 11, 2021, 6:12am UTC](https://discourse.gohugo.io/t/struggling-with-images/32795/7 "2021-05-11T06:12:50Z")

</div>

Thank you for your explanation.

---

<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:** [May 13, 2021, 6:13am UTC](https://discourse.gohugo.io/t/struggling-with-images/32795/8 "2021-05-13T06:13:33Z")

</div>

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