Gravatar avatars can play poorly with the layout

[spacemonaut]

A question in the custom cards forum, Exporting custom set in text form?, is asked by someone with a Gravatar avatar. It is defined in the HTML as being 240 x 240, and overflows the bounds of the sidebar to get partly cut off.

Avatars like my own are usually 120px wide tops. The avatar uploader allows up to 240x240px images, but even mine was originally 200x200 and was downsized by the forums to be 120x120.

I did some rummaging because I was curious as to why and noticed some points of concern.

My avatar is downsized to 120px by a max-height: 120px being applied to the img.avatar selector. Gravatars however do not have the .avatar class applied. However, looking closer, that .avatar class is doing a lot of work: it is applied to both the image and its containing element, requiring the one class to do two fairly different jobs simultaneously, which is something I'd err toward avoiding. There are styles applied to just .avatar (both elements), applied to .avatar > img (just the image), and applied to img.avatar (just the image again, but not Gravatars). This last selector is where the max-height is applied.

What I'd recommend is to drop the img.avatar selector and apply the height/width rules to .avatar > img instead. If it's your HTML under your control, I would also just not apply the .avatar class to the image element itself, and I wouldn't apply width/height attribute in the first place, but maybe that's not under your control.

(Also I'm just going to plug BEM syntax here, which I find pretty valuable in larger style sheets where I can't apply scoped CSS.)

[Feyd_Ruin]

Fixed.

Had to go CSS route; the actual <img> tag is generated from a core file and not an editable template.
(I do my best not to change the core phpbb files unless I have to. Makes updating version infinitely easier heh)

[spacemonaut]

That makes total sense. Thank you for the fix!

[Emilktr]

Fixed.

Had to go CSS route; the actual <img> tag is generated from a core file and not an editable template.
(I do my best not to change the core phpbb files unless swiftle I have to. Makes updating version infinitely easier heh)

That's great, thanks for fixing it

[MichaelFinn]

As a frontend developer at an online company. I can easily identify the mistakes that you have mentioned in CSS files. You just have to change the image tag from CSS files and make your text editable.