liwenyip / hugo-easy-gallery

Automagical css image gallery in Hugo using shortcodes, with optional lightbox/carousel gadget using PhotoSwipe and jQuery.
MIT License
573 stars 111 forks source link

Installation Help #65

Open nmmorette opened 3 years ago

nmmorette commented 3 years ago

Hi guys, I think I'm missing something in the installation. After the installation steps, my gallery looks like this:

{{< gallery dir="images/teste/" />}} {{< load-photoswipe >}}

2021-09-03 16_02_02-

2021-09-03 16_02_27-

tete2soja commented 2 years ago

Hello,

What is the issue ? I used it recently and don't have any issue for the gallery. I used the load tag before the galery one.

kishorbhat commented 2 years ago

@nmmorette numerous people already use hugo-easy-gallery fairly successfully. Can you provide a link to your code? A single line and some screenshots are hard to troubleshoot with.

Darthagnon commented 2 years ago

@kishorbhat I'm having this same issue, as is #37. To reproduce:

  1. hugo new site
  2. Add Dream theme to /themes/dream folder, and enable theme in config.toml
  3. Add Hugo Easy Gallery code into /themes/dream, it won't overwrite anything.
  4. hugo new content/posts/article.md, then call {{< gallery dir="images/teste/" />}} {{< load-photoswipe >}} within the article.
  5. What happens: calling gallery skips any further page rendering, most noticeably hugo-easy-gallery.css and load-photoswipe.js are not loaded, so gallery render breaks (repeated images, etc.). Also, the rest of the article (after the gallery call) is not rendered by Hugo. Workaround: You can try and force the CSS and JS to load (e.g. config.toml >>[params.advanced], or by calling load-photoswipe first). Result of workaround: the CSS will fix the gallery display (it will look right), but the JS will not work, and the gallery will act as though Photoswipe was not called.

Further workaround:

EDIT: I tried the workaround from the Readme.md, as suggested here, adding code to the footer partial. It causes the script to complain of being loaded twice.

EDIT2: Here's an example site demonstrating the bug: https://github.com/Darthagnon/testt - git clone and then hugo serve -D will make it available on localhost:1313

EDIT3: seems to be a CSS thing. Adding some CSS (will share once I've narrowed it down) seems to (partially) fix it.