CSS Class for Thumbnails/Images with fixed Height

[michaelweinold]

Context

When using multiple separate grids with images, it is currently not possible to ensure all {grid-item-card} items have the same height. Instead, the row of the {grid-item-card} items is determined by the image with the largest height:

However, there is already a CSS class "Avatar" (sd-avatar-), defined in style/_icons.scss. This allows for {grid-item-card} items with uniformly sized avatar images.

See also my discussion in the Executablebooks repo: sphinx-design multiple Grids with same Height

Proposal

I propose to add a CSS class "Thumbnail" that accepts a height parameter and, taking into account the height of the contained image, adds appropriate top/bottom padding to stretch the {grid-item-card} item to the target height.

Tasks and updates

No response

[welcome]

Thanks for opening your first issue here! Engagement like this is essential for open source projects! 🤗

If you haven't done so already, check out EBP's Code of Conduct. Also, please try to follow the issue template as it helps other community members to contribute more effectively.

If your issue is a feature request, others may react to it, to raise its prominence (see Feature Voting).

Welcome to the EBP community! 🎉

[drammock]

just so I understand: your use case is that in your screenshot, you want the cards under "data import" and the cards under "visualizations" to be the same size, right? And the pre-existing avatar class has a fixed (not configurable) size, so you can't use that here?

[michaelweinold]

you want the cards under "data import" and the cards under "visualizations" to be the same size, right?

Yes, exactly.

The sd-avatar- class has a number of limitations:

1. the border-radius: 50%;
2. even if there was no border-radius, the class would crop the image

I believe it would be best for the new class to add just the right amount of top and bottom padding to get to the specified height. That way, images would not be cropped.

[michaelweinold]

@drammock, I think this should be a rather straightforward feature to implement. I might add this to one of my UpWork contracts. From what I can see, all we would need for a PR draft is:

• a new style file style/_thumbnails.scss
• an update in the style/index.scss file
• an update in the docs/css_classes.md file
• maybe a test?

Anything else?

[drammock]

Anything else?

I'm not a maintainer here 😅 I'd have to dig into the source to see. But just thinking about it, your checklist looks reasonable and complete to me.

[michaelweinold]

@choldgraf, did we forget anything?