#ZgotmplZ in my img src when using .Resources.GetMatch


After following @regis tutorial (https://regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/) on how to add images for multilingual support, I added the <img src="{{ .Resources.GetMatch " agence-img.jpg" }}> to get my images and it’s working in localhost.

But when I push it to Netlify, I have this strange url output coming out: <img src="#ZgotmplZ"> for all img tags where I use .Resources.GetMatch.
I tried with src="{{ .Resources.GetMatch "agence-img.jpg" | safeURL }}", but then I have another strange output for all img tags.
Any idea ?

Here’s the repo :

Hey there Resources.Get will return a resource which is an object with various variables an methods including .RelPermalink. I’m really suprised that it works on your local…

This is the proper way

{{ $img := .Resources.GetMatch "agence-img.jpg" }}
<img src="{{ $img.RelPermalink  }}" alt="{{.Params.agence_img_alt}}" class="pl-0 lg:pl-16">

Thanks for your help @regis, you are right!

I still have one issue.
I have this code in a partial footer.html

{{ $imgTheo := .Resources.GetMatch "sabir-theo-recoules.svg" }}
<img class="svg-title my-8 md:my-12" src="{{ $imgTheo }}" alt="{{ .Params.agence_title_alt }}">

But locally, I get this error :

Failed to render pages: render of "page" failed: execute of template failed: template: realisation/single.html:44:11: executing "realisation/single.html" at <partial "footer.html" .>: error calling partial: "/Users/vianneybernet/Library/Mobile Documents/com~apple~CloudDocs/Sites/sabir/themes/sabir/layouts/partials/footer.html:9:63": execute of template failed: template: partials/footer.html:9:63: executing "partials/footer.html" at <$imgPierre.RelPermalink>: nil pointer evaluating resource.Resource.RelPermalink

How can I fix that?
I guess it’s due to the partial.

Are you confident the image of Pierre is at the correct location?

You should wrap your code in a with statement like such:

{{ with .Resources.GetMatch "image-of-pierre.svg" }}
<img class="svg-title my-8 md:my-12" src="{{ .RelPermalink }}" alt="{{ $.Params.agence_title_alt }}">
{{ end }}

To better understand the $ and what is happenign inside the with :point_right: https://regisphilibert.com/blog/2018/02/hugo-the-scope-the-context-and-the-dot/

1 Like

Thank you ! That was the solution :slight_smile: !

I don’t know if you know, but your article is translated in french here, great article by the way!

Oh I know :slight_smile:. Ever grateful to @DirtyF for his amazing translations.

1 Like