extra <p> after div

[baptiste]

I'm trying to adapt a lightGallery example in quarto, but it's failing because the following code

---
title: "test-div"
---

::: {#animated-thumbnails-gallery .gallery-container}
![](https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png)
![](https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png)
![](https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png)
![](https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png)
![](https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png)
:::

wraps the images in an extra <p> tag, which throws off the selectors.

<div id="animated-thumbnails-gallery" class="gallery-container">
<p>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="img-fluid"> 
[... irrelevant code omitted]
</p>
</div>

Is there a way to avoid this extra <p>? I think I saw this mentioned before, but I haven't been able to find it again.

[baptiste]

Any thoughts on how to prevent this extra <p>?

As a workaround I'm generating the html directly, but it makes the source file quite messy to read.

[cderv]

This <p><img> is how Pandoc generate HTML for Image.

I believe one way of removing it would be to post process the HTML in a script, or using JS maybe to target all img in your div and removing the <p> around <img>.

[cderv]

Indeed Pandoc 3.0 will have Figure element in AST to better represent Image with Caption.

However, for image without caption like in this example above, the Pandoc representation will still be Para [ Image ] I believe. So it won't improve this situation.

FWIW removing <p> around <img> is something we do (or Pandoc) for revealjs format for example, so that the .r-stretch feature apply correctly, as this is a revealJS feature that expect no <p> around <img>.

[baptiste]

Thanks for the explanation. I've just tested pandoc 3 and you're right, the <p> is still there :/
I've asked on the google group, in case there's a pandoc workaround.

[baptiste]

The solution offered by John is to write a Lua filter, so I guess that means the <p> is here to stay. I think it could be a useful extension filter, matching a specific div class, say .noparagraph, and turning the following Para to Plain.
Now to my new year resolution to learn some Lua...

@cderv do you have an idea where the revealjs format might be doing this? I assume it's in quarto, since pandoc authors like to have the <p> tag (I imagine they'd have made it optional, rather than post-process it in special cases). I'm not familiar with the quarto codebase so not sure where to look...

[cderv]

do you have an idea where the revealjs format might be doing this?

No they do that directly in the HTML Writer in Pandoc for revealjs format : https://github.com/jgm/pandoc/blob/1a4ba584e610e0d43b166ede1d791ac942057545/src/Text/Pandoc/Writers/HTML.hs#L732-L736

It is Haskell but the comment is quite explicit about what happens. Basically in RevealJs format, when an Image with class r-stretch in Para then they remove the Para.

The solution offered by John is to write a Lua filter, so I guess that means the

is here to stay. I think it could be a useful extension filter, matching a specific div class, say .noparagraph, and turning the following Para to Plain.

Yes that seems like a good solution for your extension you are building. This should work I guess

• unwrap-img.lua

Div = function(div)
    if (div.classes:includes("gallery-container")) then
        return div:walk {
            Para = function(p) 
                if p.content and p.content[1].t == "Image" then
                    return pandoc.Plain(p.content)
                end
            end
        }
    end
end

---
title: "test-div"
filters: [ unwrap-img.lua ]
---

::: {#animated-thumbnails-gallery .gallery-container}
![](https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png)
![](https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png)
![](https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png)
![](https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png)
![](https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png)
:::

[baptiste]

No they do that directly in the HTML Writer in Pandoc for revealjs format : https://github.com/jgm/pandoc/blob/1a4ba584e610e0d43b166ede1d791ac942057545/src/Text/Pandoc/Writers/HTML.hs#L732-L736

It is Haskell but the comment is quite explicit about what happens. Basically in RevealJs format, when an Image with class r-stretch in Para then they remove the Para.

Nice! I would never have found this!

Yes that seems like a good solution for your extension you are building. This should work I guess

* unwrap-img.lua

That's awesome, thank you very much!