# Responsive shortcode - image not found

**URL:** <https://discourse.gohugo.io/t/responsive-shortcode-image-not-found/43625>\
**Category:** support\
**Tags:** images, shortcodes\
**Created:** [March 27, 2023, 1:43am UTC](https://discourse.gohugo.io/t/responsive-shortcode-image-not-found/43625 "2023-03-27T01:43:35Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![manas96](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/manas96/32/18985_2.png) [@manas96](https://discourse.gohugo.io/u/manas96)\
**Post date:** [March 27, 2023, 1:43am UTC](https://discourse.gohugo.io/t/responsive-shortcode-image-not-found/43625/1 "2023-03-27T01:43:35Z")

</div>

I’m trying to insert responsive images into my blog, using this shortcode taken from [here](https://www.adamwills.io/blog/responsive-images-hugo/):  
`layouts/shortcodes/img.html`

```auto
<!-- How the shortcode is used: -->

<!-- The shortcode functionality - in layouts/shortcodes/img.html -->
<div class="picture">
  {{ if .Get "caption"}}
  <figure>
  {{ end }}
    <picture>
      <!-- Large screens -->
      <source
        media="(min-width: 535px)"
        data-original-set="{{ .Get "src" }}.{{ .Get "type" }} 1x,
                {{ .Get "src" }}@2x.{{ .Get "type" }} 2x">
      <!-- Small screens -->
      <source
        media="(max-width: 534px)"
        data-original-set="{{ .Get "src" }}-sm.{{ .Get "type" }} 1x,
                {{ .Get "src" }}-sm@2x.{{ .Get "type" }} 2x">
      <!-- Fallback -->
      <img
        data-original="{{ .Get "src" }}.{{ .Get "type" }}"
        data-original-set="{{ .Get "src" }}@2x.{{ .Get "type" }} 2x"
        alt="{{ .Get "alt" }}"{{ if .Get "caption"}} class="img-fluid figure-img"{{ end }}>
    </picture>
  {{ if .Get "caption"}}
    <figcaption>{{ .Get "caption" }}</figcaption>
  </figure>
  {{ end }}
</div>

```

I use it in my post markdown as such:  
`{{< img src="/images/f1_guide/track" type="jpg" alt="" caption="test" >}}`

But when I render the page, I get no image and only the alt caption.  
I am confused because as far as I understand, Hugo looks in static/ for images, so I believe I am providing the correct path:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/3X/e/2/e2ba020de9c23e3385e2f350aafa73cab3d1d730.png)

For the image to render, do I also need to provide the other sizes of my image? My assumption is that it would default to the provided image different sized versions are not found.

---

<div class="post-metadata">

**Author:** ![cshoredaniel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/cshoredaniel/32/19684_2.png) [@cshoredaniel](https://discourse.gohugo.io/u/cshoredaniel)\
**Post date:** [March 27, 2023, 1:49am UTC](https://discourse.gohugo.io/t/responsive-shortcode-image-not-found/43625/2 "2023-03-27T01:49:09Z")

</div>

That looks like it’s using some kind of JavaScript library rather than ‘pure’ HTML. I think you might want to review:

> **[: The Picture element - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture)**
>
> The HTML element contains zero or more elements and one element to offer alternative versions of an image for different display/device scenarios.

---

<div class="post-metadata">

**Author:** ![manas96](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/manas96/32/18985_2.png) [@manas96](https://discourse.gohugo.io/u/manas96)\
**Post date:** [March 27, 2023, 2:46am UTC](https://discourse.gohugo.io/t/responsive-shortcode-image-not-found/43625/3 "2023-03-27T02:46:52Z")

</div>

Ah I see, I missed the part where the author mentions an asset build pipeline.

---

<div class="post-metadata">

**Author:** ![andrewd72](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/andrewd72/32/18371_2.png) [@andrewd72](https://discourse.gohugo.io/u/andrewd72)\
**Post date:** [March 28, 2023, 3:04pm UTC](https://discourse.gohugo.io/t/responsive-shortcode-image-not-found/43625/4 "2023-03-28T15:04:49Z")

</div>

Github would suggest that the shortcode you are looking at was written 6 years ago.  
I think now the usual approach now is have a good quality image asset and get Hugo to process to various sizes and quality (and webp if you wanted).

The only reason to use something external would be for progressive jpgs (doesn’t really matter if webp is shown in preference) or to provide avif images (good performance, less detail).

> **[Image Processing](https://gohugo.io/content-management/image-processing/)**
>
> Resize, crop, rotate, filter, and convert images.

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [March 30, 2023, 3:05pm UTC](https://discourse.gohugo.io/t/responsive-shortcode-image-not-found/43625/5 "2023-03-30T15:05:24Z")

</div>

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