Responsive images with Glide

[enxoco]

We are in the process of migrating a rather unwieldy site from Statamic 2.11.21 to the latest version. This may be a silly question and not necessarily Statamic related but in one of my older templates I have a snippet like this for an image:

          {{ asset:image }}
            <img
              src="{{ glide:url width="580" height="320" fit="crop_focal" dpr="1" }}"
              srcset="{{ glide:url width="580" height="320" fit="crop_focal" dpr="2" }} 2x"
              class="c-feature-secondary__tile-image"
              alt="{{ alt }}"
            >
          {{ /asset:image }}

How would I achieve this in Statamic 3? Is there a built in way to do this or do I need an addon?

[jasonvarga]

I assume your field is named image.

In that case, you can drop the asset: prefix and use the image variable directly.

Also, re-pass the image into glide instead of passing the url. Passing url into the glide tag would work, but passing the asset directly into it is more performant.

          {{ image }}
            <img
              src="{{ glide:image width="580" height="320" fit="crop_focal" dpr="1" }}"
              srcset="{{ glide:image width="580" height="320" fit="crop_focal" dpr="2" }} 2x"
              class="c-feature-secondary__tile-image"
              alt="{{ alt }}"
            >
          {{ /image }}

[kbarkhurst]

As Lighthouse now flags images without explicit heights and widths, what syntax would you add to this to automatically fill the width and height fields in the image <img src="" width="" height="" alt=""> I was thinking that {{ width }} would display it, but I'm seeing that showing up as blank.

[enxoco]

@jasonvarga Thanks! That got me pointing in the right direction. If I do it the way you suggest this is what I get rendered out:
<img src="/[{}]" srcset="/[{}] 1x,/[{}] 2x" class="c-feature-secondary__tile-image" alt="">

If instead I do:

          {{ image }}
            <img
              src="{{ glide:url width="580" height="320" fit="crop_focal" dpr="1" }}"
              srcset="{{ glide:url width="580" height="320" fit="crop_focal" dpr="2" }} 2x"
              class="c-feature-secondary__tile-image"
              alt="{{ alt }}"
            >
          {{ /image }}

then everything works as expected. Thoughts? I will say that this is a partial and the image is part of a replicator field.

[jasonvarga]

Is image an assets field? Does it have max_files set on it?

Since it's named image and not images, I assumed it was a single. If it's supposed to be only one, adding max_files: 1 to the field should fix it.

If it's intended to be multiple, then you can change my suggestion of {{ glide:image to {{ glide:id .

[enxoco]

Got it thanks! Setting max_files did indeed fix it. Thanks for the help!