Purge image from browser cache after crop

Hi Veerap,

Could you try disabling all other plugins, and switching the theme over to Twenty-Nineteen and let us know if the problem persists.

Adding an automatic versioning would defeat caching all the time, which would likely cause excessive server loads.

I might suggest setting browser cache headers to not cache specific images instead.

Thanks, let us know what results you have.
Bytes.co

Same issue occurs with twenty nineteen theme & all other plugins are deactivated :/

It’s not an option in my case to exclude specific images from browser cache, so I think I’ll just try to create some other workaround for it (since there only few places in theme where “purge” is “critical”).

> Adding an automatic versioning would defeat caching all the time, which would likely cause excessive server loads.

Am I misunderstanding something about how browser caches work with url parameters?

If a user sets a new crop focus for foo.jpg, I believe you could store the current timestamp and present the image with that timestamp as a URL parameter, such as /uploads/foo.jpg?ts=1574267133

Subsequent requests for /uploads/foo.jpg?ts=1574267133 would still be served from the browser cache, no? If someone sets a new focus, save the new timestamp, present the image with that, and it’ll force a new GET.

@veerap:
Your use case is your own, of course, but I’m curious what kind of website(s) you have that this is a problem. I could definitely see you running into the issue while doing some development, but in the “real world”, won’t an Author upload a new image and set the crop more or less right away, before anyone’s browsers even cache it?

You could also take a look at how long you’re telling browsers to cache images for. I know all the “Page Speed” tools recommend super long times (like a month or longer), but it’s totally reasonable to limit these to 24 hours or something and you’ll still a lot of the cache benefits.

In my case we are talking about really large website where is +90 users who are creating the content -> so the level of technicality is varied, some do not even know what hard refresh/reload means. Featured images that are hard cropped as panorama like aspect ratio is my issue because even the less technical content creators needs to see the change in crop focus as easily as possible. So that’s why it was “critical” in apostrophes ??

My hack for it:
So I’m created my own “the_post_thumbnail” function that checks from attachment meta if
– there is a SmartCrop enabled
– if so, it sets xy coordinates from focus as attachment url parameter
Works as desired, browser sees the new version when first loaded and then saves it to cache (and next time serves it from there).

• This reply was modified 5 years ago by veerap.

@jslemahieu You are correct about how caching and URL parameters would work, but that would degrade caching in the typical use case, and as such is not a feature we’re considering at this time.

@veerap Glad to hear you’ve found a workaround.

Thanks,
Bytes.co

@veerap i have the same problem. can you send me your function please!?

best wishes
manu

Hi @manuelkottersteger,

my hack was tailored for specific custom theme. Maybe more global solution would be to detect cropping with wp_get_attachment_image_src filter:

function filter_wp_get_attachment_image_src( $image, $attachment_id, $size, $icon ) {

    // Check if SmartCrop is enabled.
    if ( get_post_meta( $attachment_id, '_wpsmartcrop_enabled', true ) ) {
        // Add focus meta to image src.
        $smartcrop = get_post_meta( $attachment_id, '_wpsmartcrop_image_focus', true );
        $image[0] .= '?smartcrop=' . 'x' . $smartcrop['left'] . 'y' . $smartcrop['top'];
    }

    return $image;
}; 
         
// Add the filter.
add_filter( 'wp_get_attachment_image_src', 'filter_wp_get_attachment_image_src', 10, 4 );