statamic/cms

[4.x] URL is not regenerated when working with presets and focal point changes

pakogn opened this issue · 2 comments

pakogn commented

Bug description

While working with glide:generate and presets I noticed that when the focal point is changed the URL stays the same.

domain.com/img/asset/dXBsb2Fkcy9wb3J0YWRhLWd1aWxsZXJtby0oMykuanBn/portada-guillermo-%283%29.jpg?p=thumbnail_condensed&s=e4112fd8e82a25bf0fcaffb0a3df9981

The expected behavior would be to change so Editors can watch the updated image with the new focal point.
Because the URL doesn't change the browser cache it and doesn't allow to watch the updated one.

I saw that the url uses a signature based on the path so maybe to considerate the focal point in the signature could be a solution.

How to reproduce

  • configure a preset in config/assets.php:
'featured' => ['w' => 850, 'h' => 480, 'q' => 90, 'fit' => 'crop_focal'],
  • with a "featured_image" asset field in an entry show the entry image in a view like this:
@foreach (Statamic::tag('glide:generate')->src($post->featured_image)->filename($post->featured_image->basename)->preset('featured') as $image)
    <img loading="lazy" src="{{ url($image['url']) }}" height="300" width="100%" alt="{{ $post->featured_image->alt }}" title="{{ $post->portada_titulo }}" />
@endforeach

Logs

No response

Environment

Statamic v4.58.2, even have tested this in v5.30.0

Laravel Version: 9.52.16
PHP Version: 8.2.24
Composer Version: 2.5.3

Installation

Fresh statamic/statamic site via CLI

Additional details

No response

jasonvarga commented

A workaround is to add fit="crop_focal" to the glide tag. Then the focal point will be part of the URL and will change appropriately.

This will be handled properly as part of #10204. Presets will be expanded on the URLs rather than having p=featured in the URL.

  • 👍1
pakogn commented

Great! thanks, @jasonvarga

When doing this, the images still cached?

I opted for something like this:

@foreach (Statamic::tag('glide:generate')->src($post->featured_image)->filename($post->featured_image->basename)->preset('featured') as $image)
    <img loading="lazy" src="{{ url($image['url']) }}&{{ urlencode(base64_encode("{$image['focus']}")) }}" height="300" width="100%" alt="{{ $post->featured_image->alt }}" title="{{ $post->featured_image_titulo }}" />
@endforeach

Appending the focus to the url doesn't break the signature and keep serving the generated image that lives in storage/statamic/glide/containers/etc...