How to show images, placed in /assets in partials & is it possible to resize/convert them there?

support
1

Totally new to Hugo and first of all big thanks to all authors.
I’m trying to create a small self-hosted site with something like 10 pages/100 images in total. I’ve managed to find here render-image.html by @jmooring the great and use it for handling images passed from markdown files, which did the job for me and finally found those images in /assets. But how to show them from a partial, used by that markdown? Even if I try some very basic approach like this:

<img src="{{ .Params.banner | relURL }}" class="img-responsive" alt="">

the image is not showing up (while page inspection shows rather correct path <img src="/images/CorrectName.jpg" class="img-responsive" alt="">). What am I missing?
Is it possible to call another partial from this partial to do image resizing and conversion?

2

Image Processing | Hugo (gohugo.io)

image to be processed before use - assets folder - bring it in with resources.Get
if you want to use an image as is - static folder

1 Like
3

Sounds strange as I don’t get, why it’s like this.
But ok, I’ve succeded with a code like this:

                {{ $image := resources.Get "images/CorrectName.jpg" }}
                {{ $img := $image.Resize "x200 webp" }}
                <img src="{{ $img.RelPermalink }}" class="img-responsive" alt=""/>

but failed to do the same, but basing on markdown-defined parameter:

{{ $image := resources.Get "{{ .Params.banner | relURL }}" }}

this throws an error

error calling Get: CreateFile blah-blah-blah\assets\{{ .Params.banner | relURL }}
4

You should code defensively to handle content pages without a banner param.

And you don’t nest actions {{ stuff }} within other actions.

{{ with .Params.banner }}
  {{ with resources.Get . }}
    {{ with .Fill "400x100 webp" }}
      <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
    {{ end }}
  {{ end }}
{{ end }}
1 Like
5

Thank you for solution. I left handling with defense to later stage, as with such a small number of pages I always could ensure that every page has this parameter. And where could I read about actions and passing variables/context/data to them? Why hardcoded width and height?

6

Context:

{{ $width := 800 }}
{{ $height := 400 }}
{{ $format := "webp" }}

{{ with .Fill (printf "%dx%d %s" $width $height $format) }}
1 Like
7

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.