search

quarto-dev / quarto-cli

Open-source scientific and technical publishing system built on Pandoc.
https://quarto.org
Other
3.87k stars 317 forks source link

Replace default `height` for "banner image" in grid listing by `max-height` #2999

Open dragonstyle opened 1 year ago

dragonstyle commented 1 year ago

Discussed in https://github.com/quarto-dev/quarto-cli/discussions/2990

Originally posted by **mcanouil** October 23, 2022 Hi, currently, the grid listing has a default height of 150px for top image in the card which causes the image to be "cropped" in nearly all situations. Instead, I would suggest to not set `height` property but`max-height` to allow responsive scaling of the image without cropping the image. For example, on the left, manually defined max-height, while on the right it's the default from the grid listing. Screenshot of a grid listing made with quarto using a three columns layout and showing two cards. On the left a card with an image properly scaled without cropping and on the right a image vertically cropped due to css height property set to 150 pixels A video to show the resizing issue of setting `height`. https://user-images.githubusercontent.com/8896044/197395474-62bf6851-1f4e-47bc-8f8c-0b067c1e79f4.mov
dragonstyle commented 1 year ago

I think that this item is likely more specifically creating a new type of listing layout that permits flexible grid sized (per the attached conversation). Moving to 1.4

giabaio commented 10 months ago

Can I please ask if there's a follow up to this? I seem to have a problem that I think is related to this on this site; images are rescaled but the aspect ratio is not respected. As you make the screen smaller, then 2 things happen:

  1. The width of the columns becomes smaller and smaller and for some screen resolution, it's just not great (too narrow);
  2. The image is rescaled but the aspect ratio does not hold --- is there a way to force it? Thanks!
dragonstyle commented 10 months ago

I seem to have a problem that I think is related to this on this site; images are rescaled but the aspect ratio is not respected.

I think switching to max-height as suggested here really won't fix the width issue with this page - it merely allows the image height to change in order to preserve the aspect ratio. For example:

Screenshot 2023-11-30 at 4 17 34 PM

But, this has the effect of reducing the alignment of items within the grid, as titles and other data are in different spots, which I don't think we want in our default grid layout. Instead, perhaps you could consider changing the number of columns using grid-columns under listing (it defaults to 3) or perhaps changing the layout width of the page that this grid is on using page-layout: full which will make the content area wider.

mcanouil commented 10 months ago

As discussed initially in the discussion. The best option would likely be around what Masonry.js does. https://masonry.desandro.com/ (This would also bring "image gallerie" to Quarto)

giabaio commented 10 months ago

Thanks both. I can look into this more closely, but I guess using masonry would basically amount to hacking the complied html files to add the relevant bits (including potentially a java script)?