All image styles being flushed on edit image causing cache tags to clear for all related pages

Created on 17 October 2024, about 1 month ago

Problem/Motivation

Upon editing any image (either by replacing image or changing focal point etc), all image style are getting flushed which causes pages which has those image styles as cache tags to flush also.

In imagestyle.php there is a flush() function which gets called for edit image operations by different modules and at the end, the function adds all the image style cachetags (config:image.style.xxx) to purge queue.

// Let other modules update as necessary on flush.
$module_handler = \Drupal::moduleHandler();
$module_handler->invokeAll('image_style_flush', [$this, $path]);


// Clear caches so that formatters may be added for this style.
\Drupal::service('theme.registry')->reset();


Cache::invalidateTags($this->getCacheTagsToInvalidate());

so if my content pages has those image styles as cache tags, all such pages have their cache invalidated when purge gets processed.

Example I have a page which has following style cache tags

config:image.style.brc_redesign_category_thumb_180_x_180
config:image.style.brc_redesign_category_thumb_180x180_2x
config:responsive_image.styles.brc_redesign_category_thumb

so any time any image being replaced or newly added all styles (200+) gets added to purge and gets flushed eventually, causing all content pages having those styles to have cache flushed.

Steps to reproduce

In presetup:
1) Have image, crop, image style, media, media replace, purge modules installed and setup to use
2) Have some images and styles.
3) Add those images to any content which are part of any page

To reproduce
1. Clear purge queue
2. Perform any edit operation on images (or media)
3. Check purge queue to see what all cache tags go added
4. Process everything in purge queue
5. Check the cache got cleared for all the pages where the image style cache tags were added.

Proposed resolution

I think commenting this line in imagestyle.php may work. (in the same function we are already deleting the image derivatives so flushing styles may not be needed)

Cache::invalidateTags($this->getCacheTagsToInvalidate());

But not sure its implications hence the case.

Thanks

πŸ› Bug report
Status

Active

Version

10.3 ✨

Component

image.module

Created by

πŸ‡ΊπŸ‡ΈUnited States dinaish20 San Francisco

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @dinaish20
  • Have image, crop, image style, media, media replace, purge modules installed and setup to use

    Can you determine the simplest possible steps to reproduce so we know exactly which Core code, Core configurations or contributed modules cause the bug?

  • πŸ‡ΊπŸ‡ΈUnited States dinaish20 San Francisco

    Hi Cilefen

    I think issue is in core class (Drupal\image\Entity\ImageStyle::flush), contributed modules are just calling the function
    For example media_entity_file_replace.module calls image_path_flush method of image.module which calls the above mentioned flush method.

    I am not sure if I can make it simpler but will give a try

    1) Create some image styles and associate with an image
    2) Add that image to any content which is viewed as page
    2) Edit (replace) the image through media_entity_file_replace module
    3) Notice what all cache tags are getting flushed
    4) Notice page which have those cache tags associated is also having its cache flushed.
    5) Also notice similar page with different image having flushed its cache too as it had same cache tags associated.

    So instead of flushing just the image being edited it flushes all styles associated with image

    Here is the real data
    I have a category page which has these cache tags
    config:image.style.brc_redesign_category_thumb_180_x_180
    config:image.style.brc_redesign_category_thumb_180x180_2x
    config:responsive_image.styles.brc_redesign_category_thumb
    file:197676
    file:197691
    media:538736
    media:539806
    media_view
    node:277151
    node:28461
    node_view
    paragraph:449016
    taxonomy_term:11906
    taxonomy_term_list
    taxonomy_term_view
    user:161

    I have a image in Drupal which is not part of above content when I edit the image , following cache tags gets cleared
    +-----------------+--------------+------------------------------------------------------------------------------+
    | Type | State | Expression |
    +-----------------+--------------+------------------------------------------------------------------------------+
    | Tag | New | file:242876 |
    | Tag | New | config:image.style.video_embed_wysiwyg_preview |
    | Tag | New | config:image.style.thumbnail |
    | Tag | New | config:image.style.slick_media |
    | Tag | New | config:image.style.media_library |
    | Tag | New | config:image.style.max_650x650
    | Tag | New | config:image.style.brc_redesign_2_col_578x325_2x |
    | Tag | New | config:image.style.brc_redesign_adhoc_2_col_1_1 |
    | Tag | New | config:image.style.brc_redesign_adhoc_2_col_1_1_2x |
    | Tag | New | config:image.style.brc_redesign_adhoc_3_col_3_2 |
    | Tag | New | config:image.style.brc_redesign_adhoc_3_col_3_2_2x |
    | Tag | New | config:image.style.brc_redesign_category_thumb_180_x_180 |
    | Tag | New | config:image.style.brc_redesign_category_thumb_180x180_2x |
    | Tag | New | config:image.style.brc_redesign_feature_single_527_x_351_3_2

    Note above list has 2 tags common with my page which causes this issue.

    So if I comment that code which I mention in proposed solution, it only clears below cache tags, which is sufficient I think to clear this image's flush on the page where this image is.

    Type | State | Expression |
    +-----------------+--------------+------------------------------------------+
    | Tag | New | file_list |
    | Tag | New | file:242871 |
    | Tag | New | file:242878 |
    | Tag | New | media_list |
    | Tag | New | media_list:image |
    | Tag | New | media:556191 |
    | Tag | New | local_task

    Hope fully I did explain it better.
    Let me know if need to give any other details

    Thanks

  • πŸ‡¬πŸ‡§United Kingdom catch

    If you look at https://api.drupal.org/api/drupal/core%21modules%21image%21src%21Entity%... it only invalidates cache tags when $path is null.

    Is media_entity_file_replace module passing in $path?

  • πŸ‡ΊπŸ‡ΈUnited States dshetty

    It looks like this was fixed as part of issue - https://www.drupal.org/project/drupal/issues/3439981 πŸ› Uploading a file to media library flushes theme registry Active

  • πŸ‡ΊπŸ‡ΈUnited States dinaish20 San Francisco

    Thanks @catch & @dshetty for pointing out - issue was with old version of image module, which was always flushing cache tags no matter image path was provided or not.

    Looks like its fix with drupal 10.3.6 which we are planning to upgrade to soon.

    Thanks all again.

Production build 0.71.5 2024