Responsive imgset

support
1

Tried to follow this tutorial for responsive images:

Added shortcode to the template:

{{< imgset src="{{ .Params.image }}" alt="{{ .Params.title }}" >}}

and get error trying to start Hugo on Windows

Error: add site dependencies: load resources: loading templates: ".........layouts\partials\post-card.html:4:1": parse failed: template: partials/post-card.html:4: unexpected "<" in command
2

See requesting help

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

1 Like
3

You can only pass literal values (string, int, float, bool) to a shortcode.

4

Shortcodes are not used in templates.
Shortcodes are used by content (to call a template) whereas Partials are called by templates.

5

I found another solution but get error <.Scratch.Set> “can’t evaluate field Scratch in type string”. Where is mistake?
Post card takes post image then use {{ partial “imgoptim.html” . }}

<article class="post-card">
    <div class="featured-image">
      <a href="{{ .RelPermalink }}" class="card-link" aria-label="{{ .Params.title }}"></a>
      {{- with .Params.image -}}
      {{ partial "imgoptim.html" . }}
      {{- end }}
    </div>
    <div class="about-post">
      <div class="tags">
        {{ with .Params.tags }}
        {{- range first 1 . -}}
        <a class="tag-wrapper" href="/temat/{{ . | urlize}}/">{{ . }}</a>
        {{- end -}}
        {{ end }}
        <div class="break"></div>
        {{ with .Params.tags }}
        {{- range first 2 (after 1 . ) }}
        <a class="tag-wrapper" href="/temat/{{ . | urlize}}/">{{ . }}</a>
        {{- end -}}
        {{ end }}
      </div>
      <h2 class="post-card-title"><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
      <p class="post-summary">{{ .Summary }}</p>
    </div>
  </article>

partial “imgoptim.html”

{{/* get file that matches the filename as specified as src="" in shortcode */}}
{{ $src := resources.GetMatch "{{ . }}" }}

{{/* set image sizes, these are hardcoded for now */}}

{{ $tinyw := default "300x" }}
{{ $smallw := default "600x" }}
{{ $mediumw := default "1200x" }}

{{/* resize the src image to the given sizes */}}

{{ .Scratch.Set "tiny" ($src.Resize $tinyw) }}
{{ .Scratch.Set "small" ($src.Resize $smallw) }}
{{ .Scratch.Set "medium" ($src.Resize $mediumw) }}

{{/* add the processed images to the scratch */}}

{{ $tiny := .Scratch.Get "tiny" }}
{{ $small := .Scratch.Get "small" }}
{{ $medium := .Scratch.Get "medium" }}

{{/* only use images smaller than or equal to the src (original) image size */}}
<img srcset='
  {{ if ge $src.Width "300" }}
    {{ with $tiny.RelPermalink }}{{.}} 300w{{ end }}
  {{ end }}
  {{ if ge $src.Width "600" }}
    {{ with $small.RelPermalink }}, {{.}} 600w{{ end }}
  {{ end }}
  {{ if ge $src.Width "1200" }}
    {{ with $medium.RelPermalink }}, {{.}} 1200w{{ end }}
  {{ end }}'
  sizes="(max-width:480px) 300px, (max-width:768px) 600px, 1200px" src="{{ $src.RelPermalink }}" alt="{{ .Params.title }}">
6

I also tried this scenario by removing {{- with .Params.image -}} from the post-card file and changed resources.GetMatch “{{ .Params.image }}” in partial file. Then get this error: at <$src.Resize>: nil pointer evaluating resource.Resource.Resize.

changed GetMatch to .Resources.Match and the error is:

.Params.image.Resize>: can't evaluate field Resize in type string
7

Images were moved from static to assets root folder.

8

I might not be following but…
I’m not sure why you need to use Scratch?
Also test the size before trying the .Resize might be more efficient.

I did it with the image in the page bundle
In your first template use:

{{ if .Params.image }}
  {{ $src := $.Page.Resources.GetMatch .Params.image }}
  {{ with $src }}
    {{ partial "imgoptim.html" . }}
  {{ end }}
{{ end }}

then imgoptim.html doesn’t need Scratch

<img srcset='
  {{ if ge $.Width "300" }}
    {{ ($.Resize "300x").RelPermalink }} 300w
  {{ end }}
  {{ if ge $.Width "600" }}
    ,{{ ($.Resize "300x").RelPermalink }} 600w
  {{ end }}
  {{ if ge $.Width "1200" }}
    ,{{ ($.Resize "1200x").RelPermalink }} 600w
  {{ end }}'
  sizes="(max-width:480px) 300px, (max-width:768px) 600px, 1200px" src="{{ $.RelPermalink }}" alt="{{ .Params.title }}">

I moved your comma in the srcset, hope it is correct.

9

Unfortunatelly, it doesn’t work. images are not rendered at all, blank space.

10

I get rid of one partial. now the code is like below and get error: <$src.Resize>: can’t evaluate field Resize in type resource.Resources

<article class="post-card">
    <div class="featured-image">
      <a href="{{ .RelPermalink }}" class="card-link" aria-label="{{ .Params.title }}"></a>
      {{ $src := .Resources.Match .Params.image }}
      {{ $tiny := $src.Resize "300x" }}
      {{ $small := $src.Resize "600x" }}
      {{ $medium := $src.Resize "1200x" }}

      {{/* only use images smaller than or equal to the src (original) image size */}}
      <img srcset='
        {{ if ge $src.Width "300" }}
          {{ with $tiny.RelPermalink }}{{.}} 300w{{ end }}
        {{ end }}
        {{ if ge $src.Width "600" }}
          {{ with $small.RelPermalink }}, {{.}} 600w{{ end }}
        {{ end }}
        {{ if ge $src.Width "1200" }}
          {{ with $medium.RelPermalink }}, {{.}} 1200w{{ end }}
        {{ end }}'
        sizes="(max-width:480px) 300px, (max-width:768px) 600px, 1200px" src="{{ $src.RelPermalink }}" alt="{{ .Params.title }}">
    </div>
    <div class="about-post">
      <div class="tags">
        {{ with .Params.tags }}
        {{- range first 1 . -}}
        <a class="tag-wrapper" href="/temat/{{ . | urlize}}/">{{ . }}</a>
        {{- end -}}
        {{ end }}
        <div class="break"></div>
        {{ with .Params.tags }}
        {{- range first 2 (after 1 . ) }}
        <a class="tag-wrapper" href="/temat/{{ . | urlize}}/">{{ . }}</a>
        {{- end -}}
        {{ end }}
      </div>
      <h2 class="post-card-title"><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
      <p class="post-summary">{{ .Summary }}</p>
    </div>
  </article>
11

It did show for me using the selected image of the page bundle.

I think now you have a problem with Match vs GetMatch
Page Resources | Hugo (gohugo.io)

12

I do not have page bundle, my images are under /assets dir

13

I don’t think it matters where they are, if you use Match you end up with a slice, not a single image.

If you have blog I personally think each post being self contained in a page bundle with its content images, opengraph image, image used for a listing thumbnail etc is a more fool proof way of doing things.