Similar machine names of image styles will cause responsive images to use the wrong styles

Created on 3 July 2025, 4 days ago

Problem/Motivation

I have found with responsive images that you could end up with the same image for all of your responsive images if you name them similarly. So you will only get 1 responsive image even though I have set 3 images.

Steps to reproduce

Setup the media with contextual cropping
Create 3 image styles with machine names of focal_point_crop, focal_point_crop_2x, focal_point_crop_3x
Create a responsive image style that uses these 3 images
Apply it to the image display to render as responsive with the responsive image style

It will use just the 1st responsive image only as the first image style is always found to be contained in the other image styles.

Proposed resolution

Update the logic in the check to include the slashes to make sure the name is just matching the exact part of the image style path

🐛 Bug report

Status

Active

Version

2.1

Component

Code

Created by

🇨🇦Canada erichomanchuk

Live updates comments and jobs are added and updated live.

Merge Requests

!15Similar machine names of image styles will cause responsive images to use the wrong styles
Open
🇨🇦Canada erichomanchuk
updated 4 days ago

Comments & Activities

Issue created by @erichomanchuk
Merge request !15Issue 3534058 image styles with similiar names in reponsive images → (Open) created by erichomanchuk
Comment 4 days ago →
🇨🇦Canada erichomanchuk
Here is the patch file as well
Pipeline finished with Success
4 days ago
Total: 138s
#538542

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024