Hashed images working in file.html but not file.md

I’m using gulp with hugo, my file.html call hashed image and working fine:

<img src="/images/{{ index .Site.Data.images.hash "profile.jpg" }}" alt="Profile">

but in my file.md (markdown) it’s not working. =/

I tried:

[profile]: /images/{{ index .Site.Data.images.hash "profile.jpg "profile".

Content files aren’t templates. Hence they won’t be parsed. Have a look at shortcodes instead.

I put in my file.md

{{<img src="/images/{{ index .Site.Data.images.hash "profile.jpg" }}" title="Profile">}}

I created the file /layouts/shortcodes/img.html

<!-- image -->
<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 }}
    {{ end }}
<!-- image -->

but I get it on inspect:

<img src="/images/%7b%7b%20index%20.Site.Data.images.hash%20">

Error to load image.

Have a look at the safeURL template function to mark your generated urls as save.

Also if safeURL doesn’t work you might try using this:

<img src="{{ .Get "src" | safeHTMLAttr }}"

More info over here: Functions Quick Reference | Hugo

It’s not working too =/

Of course it doesn’t.

It’s not just the broken URL output.

You’re also calling the img Parameter the wrong way.

The Param Method should be inside your img.html not in the content file.

See here for proper use: https://gohugo.io/templates/variables#param-method

Read about Shortcodes a bit more. Also search the forum. There are plenty of examples about your issue.

1 Like

@alexandros May you give me a bit more tips about this issue?

It’s so dificult for me, maybe could you tell me what the correct term I have to search in forum?

I’ll read a bit more about shortcodes too.

Sorry but I tried to find something but I did not find the same problem.

Thank You for help me.

How have you specified the image that you’re trying to call with .Site.Data.images.hash?

Is it specified in config.toml or in the front matter of a content file? Will this image be used site wide? Or are you calling different images with the same parameter under different sections and/or content files?

Is it specified in config.toml or in the front matter of a content file?

I’m using gulp whit hugo, http://danbahrami.io/articles/building-a-production-website-with-hugo-and-gulp-js/.**

I’ll call different images with the same parameter different sections and/or content files**