lightbox padding

[n8craig]

With a multi-col figure, there is normally some padding between images, like this. However, when using lightbox with a gallery, there is no padding, like this. I tried a small blank figure, and also a commented out figure, both of which result in some padding but a weighting to one side or another (see example below).

How would I achieve some padding between images while using the layout-ncol=x syntax?

[mcanouil]

Could you share a small reproducible example (not a screenshot alone)?

[n8craig]

Here is a self contained repro. 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. Any thoughts?

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."}
:::

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."}
:::

[mcanouil]

A quick and dirty kind of solution:

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

```{=html}
<style>
  .quarto-figure {
    position: relative;
    margin-right: 10px;
    margin-left: 10px;
  }
</style>
```

::: {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."}
:::

[mcanouil]

@dragonstyle I think the issue here comes from the Lua filter of https://github.com/quarto-ext/lightbox.

To note: this discussion is also a duplicate/multipost of quarto-ext/lightbox#8 by @n8craig

• The lightbox layout figures:

  <div class="quarto-layout-panel">
    <div class="quarto-layout-row quarto-layout-valign-top">
      <div class="quarto-figure quarto-figure-center" style="flex-basis: 33.3%;justify-content: center;">
        ...
      </div>
      ...
    </div>
  </div>

• The default layout figures:

  <div class="quarto-layout-panel">
    <div class="quarto-layout-row quarto-layout-valign-top">
      <div class="quarto-layout-cell" style="flex-basis: 33.3%;justify-content: center;">
        <div class="quarto-figure quarto-figure-center">
          ...
        </div>
      </div>
      ...
    </div>
  </div>

[dragonstyle]

I'm looking into why they panel HTML differs.

Another quick and dirty solution:

::: {layout=[20,-1,20,-1,20]}
![Aquinnah](images/mv-1.jpg){group="elsewhere"
description="The waves break off the coast of Aquinnah on a beautiful summer day."}

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

![Vineyard lighthouse](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."}
:::

The negative values in the column list will be interpreted as spacing, so Quarto will inject appropriate space (and should work correctly across output formats at least for pdf / docx).

[n8craig]

@mcanouil mcanouilModifying the .quarto-figure I think will work well in my use case as I will accumulate a large number of image. Thank you for this idea, I would not have come up with it on my own but understand what you've done.

@dragonstyle Thank you for looking at the HTML. I agree that keeping support for marginless layout is a really good idea.