Skip to content

[5.x]: Image Transforms srcset are broken in 5.6.0.2 #16486

@MattWilcox

Description

@MattWilcox

What happened?

Description

Image Transforms are broken in Craft 5.6.0.2 on DDEV, they all output the same path.

Our project on Craft 5.5.10 outputs this code for the Image tag's srcset values:

https://craft5-vca.ddev.site/content/images/native-transforms/_420x280_crop_center-center_80_none/38/test-page-6.webp 420w,
https://craft5-vca.ddev.site/content/images/native-transforms/_720x480_crop_center-center_80_none/38/test-page-6.webp 720w,
https://craft5-vca.ddev.site/content/images/native-transforms/_1440x960_crop_center-center_80_none/38/test-page-6.webp 1440w,
https://craft5-vca.ddev.site/content/images/native-transforms/_2160x1440_crop_center-center_80_none/38/test-page-6.webp 2160w

Running ddev composer update, ddev craft up, clearing the caches, and then refreshing the same page results in the following srcset values being output:

https://craft5-vca.ddev.site/content/images/native-transforms/_landscape32/38/test-page-6.webp 420w, 
https://craft5-vca.ddev.site/content/images/native-transforms/_landscape32/38/test-page-6.webp 720w,
https://craft5-vca.ddev.site/content/images/native-transforms/_landscape32/38/test-page-6.webp 1440w,
https://craft5-vca.ddev.site/content/images/native-transforms/_landscape32/38/test-page-6.webp 2160w

Here's the TWIG code generating the images:

	{# What image crop was chosen (this will map the the image transform) #}
	{% set chosenImageCrop = imageEntry.imageCrop.value %}

	{# Load the image into a variable #}
	{% set theImage = imageEntry.singlePhoto
		.eagerly()
		.withTransforms([ chosenImageCrop ])
		.one()
	%}

	{# Use the dropdown crop value to select the matching defined Image Transform to apply on the source image #}
	{% do theImage.setTransform( chosenImageCrop ) %}

	{# Ok, that's the base "small" transform, so lets generate larger transforms AS NEEDED #}
	{% switch chosenImageCrop %}
		{% case
			'uncropped' or
			'landscape32' or
			'landscape169' or
			'landscape2391'
		%}
			{% set srcSet = ['420w', '720w', '1440w', '2160w'] %}
		{% case
			'portrait23' or
			'square'
		%}
			{% set srcSet = ['420w', '720w'] %}
		{% default %}
			{% set srcSet = ['420w'] %}
	{% endswitch %}

	{# Now output the tag #}
	<img
		src="{{ theImage.url }}"
		srcset="{{ theImage.getSrcset( srcSet ) }}"
		width="{{ theImage.width }}"
		height="{{ theImage.height }}"
		alt="{{ imageEntry.alternativeText ??? theImage.alternativeText ??? theImage.title }}"
		loading="lazy"
		decoding="async"
	/>
</div>

Here's the dump of ddev version.

ddev version
 ITEM             VALUE                                    
 DDEV version     v1.24.2                                  
 architecture     amd64                                    
 cgo_enabled      0                                        
 db               ddev/ddev-dbserver-mariadb-10.11:v1.24.2 
 ddev-ssh-agent   ddev/ddev-ssh-agent:v1.24.2              
 docker           27.4.1                                   
 docker-api       1.47                                     
 docker-compose   v2.32.4                                  
 docker-platform  orbstack                                 
 global-ddev-dir  /Users/mattwilcox/.ddev                  
 mutagen          0.18.0                                   
 os               darwin                                   
 router           ddev/ddev-traefik-router:v1.24.2         
 web              ddev/ddev-webserver:v1.24.2 

Craft CMS version

5.6.0.2

PHP version

8.3

Operating system and version

DDEV

Database type and version

No response

Image driver and version

No response

Installed plugins and versions

Application Info

PHP version 8.2.27
OS version Linux 6.12.9-orbstack-00297-gaa9b46293ea3
Database driver & version MySQL 8.0.40
Image driver & version Imagick 3.7.0 (ImageMagick 6.9.11-60)
Craft edition & version Craft Pro 5.6.0.2
Yii version 2.0.51
Twig version v3.15.0
Guzzle version 7.9.2

Plugins

Blitz 5.9.9
CKEditor 4.4.0
Navigation 3.0.5
SEO 5.1.10
Sprig 3.5.2
Vite 5.0.1

Activity

added a commit that references this issue on Jan 22, 2025
timkelty

timkelty commented on Jan 22, 2025

@timkelty
Contributor

@MattWilcox thanks for reporting!

Should be fixed by #16495.
We'll get a patched release out asap, but if you want to try ahead of time:

composer require "craftcms/cms:dev-bugfix/srcset-urls as 5.6.0.2"
brandonkelly

brandonkelly commented on Jan 23, 2025

@brandonkelly
Member

Craft 5.6.1 is out with that fix now. Thanks again!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @timkelty@brandonkelly@MattWilcox

      Issue actions

        [5.x]: Image Transforms srcset are broken in 5.6.0.2 · Issue #16486 · craftcms/cms