liwenyip / hugo-easy-gallery

Automagical css image gallery in Hugo using shortcodes, with optional lightbox/carousel gadget using PhotoSwipe and jQuery.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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:

Screen Shot 2022-03-11 at 3 54 47 PM

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 >}}

Screen Shot 2022-03-11 at 3 56 50 PM

I created a sample website post (markdown) that reproduces this issue.