Figure captions show above photo and push photo off screen on click
AmritPatel opened this issue · comments
Everything appears to be working just fine except the strange behavior when adding the caption="some text"
field in either a standalone figure or gallery block.
As long as I specify an empty string for the caption field, everything works as expected. For example, consider the following snippet:
{{< load-photoswipe >}}
{{< figure src="posts/2022-03-11-hugo-easy-gallery-trial/minnie.jpg"
caption-position="bottom"
caption-effect="slide"
caption="">}}
{{< gallery >}}
{{< figure src="/images/2018-08-05-havana/20180805-havana-01.jpg" >}}
{{< figure src="/images/2018-08-05-havana/20180805-havana-02.jpg" >}}
{{< figure src="/images/2018-08-05-havana/20180805-havana-03.jpg" caption="">}}
{{< /gallery >}}
When I click on the rendered image in-browser, I see:
However, I would like to see the caption when I click the image. So if I replace the empty string with a non-empty string (i.e., if I provide a caption), then I get strange offsetting behavior in the image below when I click it in-browser.
{{< load-photoswipe >}}
{{< figure src="posts/2022-03-11-hugo-easy-gallery-trial/minnie.jpg"
caption-position="bottom"
caption-effect="slide"
caption="This is my favorite portrait of Minnie.">}}
{{< gallery >}}
{{< figure src="/images/2018-08-05-havana/20180805-havana-01.jpg" >}}
{{< figure src="/images/2018-08-05-havana/20180805-havana-02.jpg" >}}
{{< figure src="/images/2018-08-05-havana/20180805-havana-03.jpg" caption="">}}
{{< /gallery >}}
I created a sample website post (markdown) that reproduces this issue.