quarto-ext / lightbox

Create lightbox treatments for images in your HTML documents.
https://quarto-ext.github.io/lightbox/
MIT License
76 stars 4 forks source link

How to obtain padding in multi-col layout #8

Open n8craig opened 2 years ago

n8craig commented 2 years ago

I asked this question over at the Quarto discussion, but figured I would replicate it here now that I have a clearer repro. I would be most grateful for any insight on how to get padding between images in a multi-col layout similar to how this looks without lightbox.

In the first case the images are shown without lightbox and have padding. In the second case, lightbox is activated and padding is gone. I'd like to add padding as in the first instance, but do not see arguments within the filter. The only difference between the two is that lightbox is commented out in the first instance and active in the second. Any thoughts?

I suspect for most use cases, some space between images would be the preferred default behavior.

No lightbox, has padding between images. This is the desired outcome.

---
title: Example Lightbox Document
# filters:
#   - lightbox
# lightbox: auto
---

::: {layout-ncol=3}
![Aquinnah](https://quarto-ext.github.io/lightbox/images/mv-1.jpg){group="elsewhere"
description="The waves break off the coast of Aquinnah on a beautiful summer day."}

![Oak Bluffs](https://quarto-ext.github.io/lightbox/images/mv-3.jpg){group="elsewhere"
description="Oak Bluffs is famous for its Gingerbread cottages, busy town center, and party like atmosphere."}

![Vineyard lighthouse](https://quarto-ext.github.io/lightbox/images/mv-2.jpg){group="elsewhere"
description="The Edgartown Lighthouse is a short walk from downtown and has beautiful views over the entrance to Edgartown Harbor."}
:::

image

Lightbox activated, no padding between images. This is not the desired outcome. How to include padding?

---
title: Example Lightbox Document
filters:
  - lightbox
lightbox: auto
---

::: {layout-ncol=3}
![Aquinnah](https://quarto-ext.github.io/lightbox/images/mv-1.jpg){group="elsewhere"
description="The waves break off the coast of Aquinnah on a beautiful summer day."}

![Oak Bluffs](https://quarto-ext.github.io/lightbox/images/mv-3.jpg){group="elsewhere"
description="Oak Bluffs is famous for its Gingerbread cottages, busy town center, and party like atmosphere."}

![Vineyard lighthouse](https://quarto-ext.github.io/lightbox/images/mv-2.jpg){group="elsewhere"
description="The Edgartown Lighthouse is a short walk from downtown and has beautiful views over the entrance to Edgartown Harbor."}
:::

image

dragonstyle commented 2 years ago

See https://github.com/quarto-dev/quarto-cli/discussions/2133#discussioncomment-3503588 which outlines unexpectedly different HTML. Note that the div with quarto-layout-cell containing the element is missing and so margin-right that is placed upon the cells isn't present.

Would be good to continue supporting marginless layout.

^ Notes to self for when fixing