Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[4.x] Add option to prepend parameters to Glide urls #9781

Conversation

rboonzaijer
Copy link

@rboonzaijer rboonzaijer commented Mar 23, 2024

Add option to prepend parameters to Glide urls.

In addition to the 'append_original_filename', this option 'prepend_used_parameters' will prepend the used Glide parameters to the url. It will be appended before the hash, so the original filename at the end won't change (important for SEO).

On custom glide caches (S3 buckets) you can then see what kind of parameters have been used. This can be used by developers or QA to easily spot mistakes in the used Glide parameters.

If these parameters were given: format=webp, width=600, dpr=2, then this would be added to the url: fmwebp-w600-dpr2

Example:

<picture>
    <source type="image/webp" media="(min-width: 1024px)" srcset="
        {{ glide :src="asset" format="webp" width="600" dpr="1" }}{{ url }}{{ /glide }},
        {{ glide :src="asset" format="webp" width="600" dpr="2" }}{{ url }}{{ /glide }} 2x,
        {{ glide :src="asset" format="webp" width="600" dpr="3" }}{{ url }}{{ /glide }} 3x
    ">
    <source type="image/webp" media="(min-width: 768px)" srcset="
        {{ glide :src="asset" format="webp" width="1000" }}{{ url }}{{ /glide }},
        {{ glide :src="asset" format="webp" width="1500" }}{{ url }}{{ /glide }} 2x,
        {{ glide :src="asset" format="webp" width="2000" }}{{ url }}{{ /glide }} 3x
    ">
    <img src="{{ glide :src="asset" format="jpg" width="1000" }}{{ url }}{{ /glide }}">
</picture>

If we now set the 'prepend_used_parameters' to true, we can check if the urls have proper parameters.

Output:

<picture>
  <source type="image/webp" media="(min-width: 1024px)" srcset="
    https://***amazonaws.com/***/image.png/fmwebp-w600-dpr1-aaaz8ca37e84b301d3fdf219e04ac1e0/image.webp,
    https://***amazonaws.com/***/image.png/fmwebp-w600-dpr2-bbbz8ca37e84b301d3fdf219e04ac1e0/image.webp 2x,
    https://***amazonaws.com/***/image.png/fmwebp-w600-dpr3-cccz8ca37e84b301d3fdf219e04ac1e0/image.webp 3x
    ">
  <source type="image/webp" media="(min-width: 768px)" srcset="
    https://***amazonaws.com/***/image.png/fmwebp-w1000-dddz8ca37e84b301d3fdf219e04ac1e0/image.webp,
    https://***amazonaws.com/***/image.png/fmwebp-w1500-eeez8ca37e84b301d3fdf219e04ac1e0/image.webp 2x,
    https://***amazonaws.com/***/image.png/fmwebp-w2000-fffz8ca37e84b301d3fdf219e04ac1e0/image.webp 3x
    ">
  <img src="https://***amazonaws.com/***/image.png/fmjpg-w1000-gggz8ca37e84b301d3fdf219e04ac1e0/image.jpg">
</picture>

@jasonvarga
Copy link
Member

Closing in favor of #9918

@jasonvarga jasonvarga closed this Apr 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants