Struggling with images

support
1

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

2

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.

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.

3 
{{ $path := resources.Get .Params.mainImage }}
{{ $thumb := $path }}
4

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.

5

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.

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

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

See 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.

7

Thank you for your explanation.