How to get the URL of the largest image in a Srcset

Support Themes & Styling
1

Hi,
I’m looking for a way to get the Url to the largest/original image from a Srcset.
My objective would be to open it in a fullscreen lightbox using the featherlight plugin.

The code I’m using right now in the twig template is :

{% for image in page.media.images %}
   <a href="{{ image.url() }}" rel="lightbox">{{ image.sizes('17vw').html|raw }}</a>
{% endfor %}

but image.url() returns the smallest (1x) image of the Srcset.

Would someone be able to shed some light on that matter ?
I feel like I’m missing something obvious…

Thanks!

2

Shouldn’t full size be in a <a href="{FULL SIE GOES HERE}">? srcset should contain only thumbnail sizes. I mean image.url() should return unmodified version URL :thinking: Is your image really big enough?

3

@MLecout, I think the behaviour is as intended and imho correct.

The srcset attribute provides a set of alternative images to the original src image.

When using image files with density notation (@2x, @3x, …), the @2x and up are larger alternatives for the ‘original’ (1x) image.

Browsers that support srcset, on devices with higher density displays, can pick a larger image size matching the density of their display.

Older browsers that don’t support the srcset feature will fallback to the image referenced in the src.

See the HTML tab in the example in the docs about Higher density displays: The src attribute references the smallest alternative.

4

@Karmalakas, I agree, full size image should be in <a href="...@3x.jpeg">.

But, image.url return the @1x version of the picture as you can see in the code generated below :

<a href="/images/d/f/a/2/d/d-2-cqvc121x.jpeg" rel="lightbox">
    <img alt="" src="/images/d/f/a/2/d/d-2-cqvc121x.jpeg" 
    srcset="/images/b/3/0/6/4/b-0-cqvc123x.jpeg 2000w, 
    /images/0/a/3/f/9/0-0-cqvc122x.jpeg 1333w, 
    /images/d/f/a/2/d/d-2-cqvc121x.jpeg 666w" sizes="17vw">
</a>

Resulting to this kind of display on the latest version of Chrome

gz-grav
gz-grav978×600 56.8 KB

So, has you can see in the srcset, there is a @3x image available.
Then, is there a way to force image.url to return the higher density image instead of the smallest one?

5

@MLecout, To get the url of the larger image, you could try the following.

Twig:

{% for image in page.media.images %}
  <a href="{{ image.higherQualityAlternative().url() }}" rel="lightbox">
    {{ image.sizes('17vw').html|raw }}
  </a>
{% endfor %}

Generated HTML:

<a href="/images/...-image4x.jpg" rel="lightbox">
  <img alt="" 
    src="/images/...-image1x.jpg" 
    srcset="/images/...-image4x.jpg 1200w, 
            /images/...-image3x.jpg 900w, 
            /images/...-image2x.jpg 600w, 
            /images/...-image1x.jpg 300w" 
    sizes="17vw"
  >
</a>
6

But why wouldn’t image.url() return the original? :thinking:
I will have to deal with this myself, so I’m wondering if will run into the same behavior

7

Thanks a lot!
It works just fine.

*Just wondering if I missed that method in the documentation… where did you find it?

8

@MLecout, Grav’s API is also part of the documentation… :wink:

See section for class: \Grav\Common\Page\Medium\ImageMedium

1 Like