Getting errors with Shortcodes and srcset responsive images

support
1

Hi! Very simply, all I want to do is build a shortcode I can insert in blogposts which uses the srcset and Hugo’s image resizing function to generate responsive images. I’m aware this has been discussed in other places, but I’m encountering a problem I can’t find solved anywhere else.

My shortcode is:

{{< image src="Bananas2.jpg" alt="alt goes here" caption="here's a caption" >}}

And inside my image.html I have the same code that is recommended on lots of articles and forums:

{{ $src := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) }}

{{ $tinyw := default "500x" }}
{{ $smallw := default "800x" }}
{{ $mediumw := default "1200x" }}
{{ $largew := default "1500x" }}

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

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

<img 
  {{ with .Get "sizes" }}sizes='{{.}}'{{ else }}sizes="(min-width: 35em) 1200px, 100vw"{{ end }}
  srcset="
  {{ if ge $src.Width "500" }}
    {{ with $tiny.RelPermalink }}{{.}} 500w{{ end }}
  {{ end }}
  {{ if ge $src.Width "800" }}
    {{ with $small.RelPermalink }}, {{.}} 800w{{ end }}
  {{ end }}
  {{ if ge $src.Width "1200" }}
    {{ with $medium.RelPermalink }}, {{.}} 1200w{{ end }}
  {{ end }}
  {{ if ge $src.Width "1500" }}
    {{ with $large.RelPermalink }}, {{.}} 1500w {{ end }}
  {{ end }}"
  {{ if .Get (print $medium) }}
    src="{{ $medium.RelPermalink }}" 
  {{ else }}
    src="{{ $src.RelPermalink }}" 
  {{ end }}/>

Except when I run hugo serve I get a text print out of the different images, not the images themselves. It looks like this:

error
error1752×742 155 KB

It seems like Hugo is generating the different sized images, but doesn’t render them through the img tag?

2

You are more likely to receive a prompt and accurate response if you post a link to the public repository for your project.

See https://discourse.gohugo.io/t/requesting-help/9132.

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.

3

IF you run hugo server, the images are under resources/_gen/images/films/banans.
Otherwise you should find it anywhere under public/films/banans.

HTH, or go with the hint from jmooring

4

Thanks for the reply - you’re right, Hugo is putting the resized images into resources/_gen/images - inserting that filepath into the shortcode doesn’t fix the problem.

It seems strange that the shortcode is printing the HTML out as a paragraph text - including changing the font - and not rendering it as HTML.

I’m building this locally so I don’t have anything on Github yet, but thanks for your reply all the same!

5

If you don’t have a repository somewhere, consider posting a link to a zip file. It’s tough to fix what we can’t see.