How to make the grid items circular correctly

[camilogarciabotero]

Description

So I am trying to create a list of people in a website using the grid type. And my people.qmd starts like this:

---
title: ""
toc: false
page-layout: article
listing:
  - id: current-members
    type: grid
    categories: false
    grid-item-align: center
    grid-columns: 4
    fields: [image, subtitle, title]
    grid-item-border: false
    image-placeholder: imgs/default.png
    contents: 
    - people/current-members/*.qmd
---

I could not find the discussion, bit I once asked how to make the items (cards) appeared circular. I was pointed to edit the .casrd-img element in my style.css:

.card-img {
  border-radius: 50%;
}

The result looks nice (apparently):

But then, when playing around with the page, I noticed that if I changed the window width, the circle cards just became (ugly) ovals:

How can I make the card-img play nice when changing the size of the windows, or even when displaying on a mobile?

[mcanouil]

You need to use your favourite browser inspect/developer mode to see what's the rule at play and update yours accordingly.
The inspect/developer mode allows to display according to different devices.

Note that this is an HTMl/CSS question which is only indirectly related to Quarto.

[camilogarciabotero]

Thanks,

Yeah, this is an HTML/CSS-related question. I will play around with what you suggest, but shouldn't this be a simple adjustment under the grid option? Something as simple as:

listing:
    type: grid
    image-shape: [rectangle, round, rounded]

This is already a default feature in the about pages, with a consistent circular card for the desired image when using the jolla template.

[mcanouil]

"As simple" is not as simple.
Feel free to open a feature request describing this specific idea.

Some related opened issues:

• Replace default height for "banner image" in grid listing by max-height #2999
• Add support for image-title in listings #7027
• Add support for alt (and maybe title) for placeholder-image in listings #7028
• Add image position option to grid style listings #6383

[camilogarciabotero]

Right, never said easy to implement, just that it seems like a common user decision. Thanks for pointing out all the open issues.

[mcanouil]

You also have the freedom to use a custom EJS template for your listing which will offer way more flexibility.
For instance the "speaker" listing and generally the following conference website template: https://github.com/satRdays/quarto-satrdays-template/blob/main/program/speakers/speakers.ejs

[camilogarciabotero]

Cool example, thanks!

[camilogarciabotero]

I might have found a simple tweak to the .card-img class, that helped in my case:

.card-img {
  border-radius: 50%;
  height: 10em; 
  width: 10em;
}