Rendering duplicate images when the original images have the same name but different extension

Created on 20 May 2022, over 2 years ago
Updated 23 February 2023, almost 2 years ago

Problem/Motivation

We found this problem on a news portal where the redactors work with a huge amount of images. It comes up in the case when the content manager wants to upload two images with the same name but with different file extensions through an image upload field allowing to upload multiple images. E.g. image.jpg and image.jpeg (or .png etc.).
In this case the final result is that after saving a node the same image appears twice, but in reality there should be two different images.

The problem is that after uploading the first image the WebP module creates the image derivative with .webp extension. Then when the second image is uploaded with the same name, the module doesn’t create a second derivative image with a different name in the background. This causes Drupal to render the same image (the first uploaded image) for both images.
Instead it would be necessary to differentiate the images somehow in the background and render the right images in the front-end.

Steps to reproduce

Take one image with the following name and extension: image.jpg
Take second different image with the following name and extension: image.jpeg
Upload the image.jpg to the system through an image field. After that upload the second image image.jpeg and save the node. Check the rendered images. The first uploaded image will be shown duplicately.

Proposed resolution

The module should handle this situation in the background by keeping the original extension and adding .webp to the end like this:
image.jpg.webp
image.jpeg.webp

πŸ› Bug report
Status

Needs review

Version

1.0

Component

Code

Created by

πŸ‡ΈπŸ‡°Slovakia ovenko

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

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • First commit to issue fork.
  • @duaelfr opened merge request.
  • πŸ‡«πŸ‡·France duaelfr Montpellier, France

    I merged #5 and some cleaned up code from πŸ“Œ Review webp filename logic Closed: duplicate into a MR.
    I don't know if this could be shipped in this major release or if it would be considered as a BC breaker. Maintainers will choose.

    I'm closing πŸ“Œ Review webp filename logic Closed: duplicate as duplicate, please credit @berliner for their work.
  • πŸ‡ͺπŸ‡ΈSpain frouco

    The merge request works perfectly for me.

    NOTE: Applying the #5 .patch fall into a performance issue. The .webp file is generated on each request due the stored file only has the .webp extension and not both .original.webp

  • Status changed to RTBC about 1 year ago
  • πŸ‡¬πŸ‡§United Kingdom scott_euser

    Thanks, the merge request changes in https://git.drupalcode.org/project/webp/-/merge_requests/30 solved it for us as well for multiple images with the same name, but different extensions, naming the images like image1.png.webp and image1.jpg.webp keeping them unique.

  • πŸ‡«πŸ‡·France xavier.masson Haute-Normandie

    xavier.masson β†’ made their first commit to this issue’s fork.

  • πŸ‡«πŸ‡·France xavier.masson Haute-Normandie

    xavier.masson β†’ changed the visibility of the branch 3281606-rendering-duplicate-images-and-dont-create-derivative to hidden.

  • πŸ‡«πŸ‡·France xavier.masson Haute-Normandie

    xavier.masson β†’ changed the visibility of the branch 3281606-rendering-duplicate-images-and-dont-create-derivative to active.

  • πŸ‡ΊπŸ‡ΈUnited States jrglasgow Idaho

    this fixed it for me

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

    Using the MR33 I got a warning when the image is first uploaded:
    Undefined variable $webp_wanted in Drupal\webp\Controller\ImageStyleDownloadController->deliver() (line 192 of modules/contrib/webp/src/Controller/ImageStyleDownloadController.php

    I think it would be better to break out the "if" statement just a little. Since I'm faster with patch files at the moment, I've provided one with an interdiff.

  • Status changed to Needs review 8 months ago
  • πŸ‡¨πŸ‡¦Canada mandclu

    Moving this back to NR for the latest patch. Does anyone have feedback on the performance concern raised in #10?

  • πŸ‡©πŸ‡ͺGermany berliner

    The performance concern raised in #10 was about the patch in #5, which only changed the urls inside the srcset without also adapting the logic in ImageStyleDownloadController, so I don't see how that would still be an issue with the current patch.

  • First commit to issue fork.
  • Status changed to RTBC 5 months ago
  • πŸ‡¦πŸ‡·Argentina dagmar Argentina

    We replicated the problem in one of our sites. A QA analyst verified the patch of Merge request 33 fixes the problem. I reviewed the code and looks good, concerns in #17 are addressed by #19 and #20.

  • Status changed to Needs work 5 months ago
  • πŸ‡§πŸ‡ͺBelgium beerendlauwers

    The patch also needs to include a change to the webp_flush_webp_derivatives function in webp.module, which was introduced by https://www.drupal.org/project/webp/issues/3153137 πŸ› Using Image Widget Crop in responsive images does not refresh webp image Fixed .

    Currently, the derivative webp uri is generated like this: $derivative_webp_uri = preg_replace('/\.(png|jpg|jpeg)$/i', '.webp', $derivative_uri);

    This corresponds to the code $destination = $this->getWebpDestination($uri, '@directory@filename.webp');

    Because this patch changes the above to $destination = $this->getWebpDestination($uri, '@directory@filename.@extension.webp');, it also needs to change there.

    Changing it to this makes it consistent again:

    $derivative_webp_uri = \Drupal::service('webp.webp')->getWebpDestination($derivative_uri, '@directory@filename.@extension.webp');

  • Status changed to Needs review 2 months ago
  • πŸ‡ΊπŸ‡ΈUnited States pookmish

    I've updated the image style derivative flush.

Production build 0.71.5 2024