How to use the new feature image processing .Resize, .Fill and .Fit

1

Hi,
I would like to implement the new feature related to Image processing under Hugo 0.32.
I currently have a partial where the following code is implemented:

<div class="col-2 row-2">
<a href="{{ .URL }}">
<img alt="{{ .Title }}" src="{{ .URL }}{{ .Params.image }}.jpg">
</a>
</div>

i resized the image with custom css such as

#container article img:first-child {
  height: 20em;
  overflow: hidden;
  -o-object-fit: cover;
  object-fit: cover;
}

How to replace the code in the partial in order to replace css resizing by the new features.
Note that the image is located in the same folder than the article index.md.

2

See the new shortcode example at the Docs (I think it was added yesterday or the day before).

3

I want to note that there is

  1. Shortcodes
  2. Other templates (i.e. partials etc.)

Image processing can be used in both places.

Some people have started using this feature in the wild, example:

1 Like
4

Well of course. But looking at the shortcode example one can cook up a partial.

I pointed at that example since it was the one I knew about.

Good to see there are more examples out there.

PS. I’m also using .Resources and .Resize directly in the template.

5

Yes, I knew you knew. But I wanted to point that out to the thread starter and others, because if you only see the “shortcode side of it”, it is easy to miss out on the best part.

1 Like
6

Thank you for the swift answer.
But as I am not a developer and the above example (paceup) doesn’t provide the associated code directly in the template, I have to admit that I cannot manage to implement the code correctly.
The Hugo 0.32 Howto codes provide examples to list ressources as far as I understand.
Desperately need some additional help

7

The .Resize takes width values. In your CSS you have set height: 20em;

You should first check what is the width value of your rendered image with your browser’s Dev Tools.

Also I noticed that your CSS refers to the first image in your article. It would be best for you to create a naming convention for these images that you are using as article covers.

Assuming that you are giving your images a prefix of cover your partial should become something like the following:

<div class="col-2 row-2">
<a href="{{ .URL }}">
{{ $cover := .Resources.GetByPrefix "cover" }}
{{with $cover }}
{{ $scaled := .Resize "1280x" }}
<img src="{{ $scaled.Permalink }}" alt="{{ with $.Page.Params.title }}{{ . }}{{ end }}">
{{ end }}
</a>
</div>

Just replace 1280x with the width value of your rendered image -as I mentioned above- and you’re good to go.

EDIT
Please note that the above snippet is only for the resize. If you want this image to be responsive on different view ports I think that you need to keep the CSS object-fit property that you already use.

1 Like
8

Thank you for your help.
It works !
I tried to do it with png image (same prefix of cover) instead of jpg but it seems not possible.
Am i missing something ?

9

Can you please post your code snippet?

10

the code is the following:

{{ $sections := (.Site.GetPage "section" "dossiers").Sections }}
<div class="list">
  {{ range $sections }}
  <div class="card hovereffect">
{{ $cover := .Resources.GetByPrefix "cover" }}
{{with $cover }}
{{ $scaled := .Fill "550x350" }}
<img src="{{ $scaled.Permalink }}" alt="{{ with $.Page.Params.title }}{{ . }}{{ end }}">
{{ end }}
    <h2>{{- .Title -}}</h2>
    <div class="overlay">
      <a href="{{ .Permalink }}">
        <h3>{{- .Title -}}</h3><h4>{{- .Description -}}</h4></a>
    </div>
  </div>
    {{end}}
</div>

When the image is cover.png, (instead of cover.jpg) no image is displayed

11

I think that you should invoke $cover when you set the $scaled variable, like this:
{{ $scaled := $cover.Fill "550x350" }}

12

No, the code looks correct – so I guess the image does not exist … Which is hard to tell without seeing the complete project.