Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature request: dynamic image transform based on the width and height attributes of the img tag #47

Open
uandco opened this issue Dec 8, 2022 · 2 comments

Comments

@uandco
Copy link

uandco commented Dec 8, 2022

Hi,

Currently you can only apply transforms with a preset width and height.
It would be great to be able to use the width and height attributes of the image to create a new transform, with optional math functions.

For example you might have used a 1000x1000 asset resized to 250x250 (via width/height, not actually transformed) but you want to transform it to 250 @2x pixel ratio (so 500x500 transform).

Proposed syntax:

{{ entry.body | retconTransform( { width : this.width * 2, height : this.height * 2, mode : 'fit' } ) }}

Alternative syntax:

{{ entry.body | retconTransform( { actualSize : true, pixelRatio: 2, mode : 'fit' } ) }}

I'm also conscious retconSrcset can be used as an alternative with a bunch of transforms using an auto height (even tho the sizes attribute would still not be set automaitcally based on the width and height attributes), but dynamic transforms based on the actual rendered size could be beneficial.

@uandco
Copy link
Author

uandco commented Dec 8, 2022

My current solution, involving a custom preg_replace Twig filter, is convoluted :-D

		| retconSrcset([
			'rendition320',
			'rendition640',
			'rendition1024',
			'rendition1280',
			'rendition1600'
		], 'img')
		| retconAttr('img', {'sizes': false })
		| preg_replace('/width="([0-9]+)"/', 'width="$1" sizes="$1px"')

@mmikkel
Copy link
Owner

mmikkel commented Dec 8, 2022

Agree it would be useful, and similar use cases have been suggested in the past. The concept of a this variable isn't feasible, but it could probably be implemented if Retcon's filters had support for Twig closures/arrow functions.

This is not something I plan to implement personally, but I'll leave this FR open for a while, in case someone feels the urge to look into opening a PR :)

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

No branches or pull requests

2 participants