Currently, an image field like {{ path/to/my-image.svg 16x16 }} outputs an image sized 16x16 pixels.
However, what if we want to specify size in inches, or millimeters? There's ways to do that, but it requires wrapping the image in a div and setting size on that; i.e. something less intuitive.
If image fields were transformed to use a style attribute that sets width and height instead, any unit could be used. So essentially, just taking the width/height specification and putting it into the style attribute appropriately; e.g. {{ path/to/my-image.svg 1.6in x 1.6in }} (or something similar) would become <img src="path/to/my-image.svg" style="width: 1.6in; height: 1.6in;">
This has some shortcomings, though. For example, we would not be able to check for size validity anymore- no warnings for incorrect values etc. I think the width/height element attributes might also be better for the browser.
Additionally, the split on x (to find each size component) would be problematic for cases where unit is px. Can probably be solved with a regular expression. Maybe just ditch the x: {{ path/to/my-image.svg 1.6in }} and {{ path/to/my-image.svg 1.6in 1.6in }}
Currently, an image field like
{{ path/to/my-image.svg 16x16 }}outputs an image sized 16x16 pixels.However, what if we want to specify size in inches, or millimeters? There's ways to do that, but it requires wrapping the image in a
divand setting size on that; i.e. something less intuitive.If image fields were transformed to use a style attribute that sets width and height instead, any unit could be used. So essentially, just taking the width/height specification and putting it into the style attribute appropriately; e.g.
{{ path/to/my-image.svg 1.6in x 1.6in }}(or something similar) would become<img src="path/to/my-image.svg" style="width: 1.6in; height: 1.6in;">This has some shortcomings, though. For example, we would not be able to check for size validity anymore- no warnings for incorrect values etc. I think the width/height element attributes might also be better for the browser.
Additionally, the split on
x(to find each size component) would be problematic for cases where unit ispx. Can probably be solved with a regular expression. Maybe just ditch thex:{{ path/to/my-image.svg 1.6in }}and{{ path/to/my-image.svg 1.6in 1.6in }}