resources.Get "image here" not working on Content .md files

[fritzjeran]

Good day,

My problem is resource.Get does not work under Content .md files, but if I put the code on the layout baseof.html, it works. The image is under assets/images/ecosystem.jpg. Below are the pictures:

Inside the content file: 2024-04-03-I-Like-to-roar.md

---
title: I like to roar
date: 2024-04-03
---

{{ $image := resources.Get "images/ecosystem.webp" }}
<img src="{{ ($image.Resize "200x").RelPermalink }}"/>
Testing Post with Image

I have tried using the following paths e.g., images/ecosystem.jpg, /images/ecosystem.jpg, ecosystem.jpg, /ecosystem.jpg, asset/images/ecosystem.jpg, /assets/images/ecosystem.png, etc., but none works.

{{ $image := resources.Get  "/ecosystem.webp" }}
<img src="{{ ($image.Resize "200x").RelPermalink }}"/>

But if I put the above code inside the html body inside baseof.html, then the image is displayed.
Why is it not working under the Content Posts .md files?

P.S. I’m new to Hugo

[chrillek]

This code does not belong in an MD file. That’s the reason why it is not working.
You can only use shortcodes in MD, not template code.

[fritzjeran]

Hi Chrillek,

Would you mind giving a sample code inside the md file and the shortcode file. I still have to learn shortcodes…

Thanks Chrillek

[chrillek]

With an image render hook, you wouldn’t need a short code. There are many posts on that issue here, no need to repeat that.

In any case, you should program defensively:

{{ $image := resources.Get "images/ecosystem.webp" }}
{{with $image}}
<img src="{{ (.Resize "200x").RelPermalink }}"/>
{{end}}

That will prevent error messages if the image doesn’t exist or isn’t found.

[irkode]

Check out the supplied hugo included shortcode.

Shortcodes

[fritzjeran]

Hi Irkode,

I’ve studied shortcodes and made a custome shortcode under layout/shortcodes/getimage.html

<!-- getimage -->
<figure {{ with .Get "class" }}class="{{ . }}"{{ end }}>
    {{ with .Get "link" }}<a href="{{ . }}">{{ end }}
      <img src="{{ .Get "src" }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" }}{{ end }}"{{ end }} />
      {{ if .Get "link" }}</a>{{ end }}
      {{ if or (or (.Get "title") (.Get "caption")) (.Get "attr") }}
        <figcaption>{{ if isset .Params "title" }}
          <h4>{{ .Get "title" }}</h4>{{ end }}
          {{ if or (.Get "caption") (.Get "attr") }}<p>
          {{ .Get "caption" }}
          {{ with .Get "attrlink" }}<a href="{{ . }}"> {{ end }}
            {{ .Get "attr" }}
          {{ if .Get "attrlink" }}</a> {{ end }}
          </p> {{ end }}
        </figcaption>
    {{ end }}
  </figure>

The above code comes from Hugo documentation

And use it on the markdown file:
{{< getimage src="/images/ecosystem.jpg" title="Getting Global Image Example" >}}

and it works now I’ll study Chrillek image render hook.

Thanks Irkode…

[chrillek]

The image render hook has the advantage that you can use standard MD syntax to add your image. Which is better supported by editors than shortcodes, afaik.

[fritzjeran]

Chrillek thanks for the defensive coding tips. Following your input, below is the image render hook…

Under the Markdown file:
![Ecosystem Description](/images/ecosystem.jpg "Ecosystem Title")

and under the markup file:/layout/_markup/render_image.html

<img src="{{ .Destination | safeURL }}"
  {{- with .Text }} alt="{{ . }}"{{ end -}}
  {{- with .Title }} title="{{ . }}"{{ end -}}
>
{{- /* chomp trailing newline */ -}}

Thank you Chrillek and Irkode. Have a good day.