Setting width and height attributes on image elements

Developing with Concrete
1

Is there a way to automatically add width and height attributes to an image tag based on its source file’s dimensions? I’m trying to reduce the cumulative layout shift caused by using responsive CSS for images.

I could probably use a file’s dimensions when outputting a regular image in my php templates, but what about when an image block is used on the front end or if I use a responsive image tag using $img->getTag()?

When using the responsive Concrete method in my templates in v8, I am able to set a width and height this way:

$tag = $img->getTag();
$tag->width = <some number>;
$tag->height = <some number>;

But doing so only results in setting these attributes on the parent picture element and not the image tag within and therefore does not address the issue.

Any ideas on what I can do?

2

@drdragonman5000 I’ll get some eyes on this for you.

3

$img->getAttribute(‘width’);
$img->getAttribute(‘height’);

1 Like
4

Oh ok, so after some poking around, $tag->width sets the width of the <picture> element but $tag->setAttribute('width', 'some number') sets the width of the <img> element.

1 Like