Pass attributes to image render hook

support
1

The render-hook-template approach works well. However, I do not understand how to pass multiple parameters from the markdown file to the render hook. E.g., if I have markdown like:

![Alternate Text](image.jpg)

How would I pass an additional height or width parameter?

Thank you very much in advance for a short explanation.

2

If your content structure is like this…

content/articles/
└── article-1/
    ├── image.png
    └── index.md

… it is called page bundle, and the image is a page resource.

If your render hook is something like this…

layouts/_default/_markup/render-image.html 
{{- $u := urls.Parse .Destination -}}
{{- $alt := plainify .Text -}}
{{- $title := plainify .Title -}}
{{- $img := "" -}}

{{- if $u.IsAbs -}}
  {{- with resources.GetRemote $u.String -}}
    {{- with .Err -}}
      {{- errorf "%s" -}}
    {{- else -}}
      {{- $img = . -}}
    {{- end -}}
  {{- else -}}
    {{- errorf "Unable to get remote image" -}}
  {{- end -}}
{{- else -}}
  {{- with .Page.Resources.GetMatch $u.Path -}}
    {{- $img = . -}}
  {{- else -}}
    {{- errorf "Unable to get local image" -}}
  {{- end -}}
{{- end -}}

{{- with $img -}}
  <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}"
    {{- with $alt }} alt="{{ . }}" {{- end -}}
    {{- with $title }} title="{{ . }}" {{- end -}}
  >
{{- end -}}

It will automatically determine the dimensions of the image whether it is local or remote.

![Alternate text](a.jpg "This is the title")
![Alternate text](https://gohugo.io/images/gohugoio-card-1.png "Hugo rocks!")

You can modify this render hook to parse the image path for a query string. For example:

![Alt text](a.jpg?w=400&h=300)
![Alt text](https://gohugo.io/images/gohugoio-card-1.png?w=250&h=175)

Then do some conditional checking. If the dimensions are present, scale and crop using the .Fill method.

References:

3 Likes
3

Great example, thanks!

Pros/Cons of placing images in content/ vs static/?
I guess the main pros is that in content/ they are a Page Resource and therefore can be processed?

Wondering how to setup my structure.

4

And you’re keeping your content+assets together in one place. I think of this as “content encapsulation.”

5

Which for images also has the benefit that they get rendered fine on GitHub.

2 Likes