Hugo (LoveIt Theme): Lightgallery doesn't initialize; images open directly instead of using a gallery

support
1

Issue:
I’m using Hugo with the LoveIt theme. I’ve created a simple image gallery using the built-in gallery shortcode. Clicking on an image does not open it in a lightbox with navigation (previous/next, thumbnails, zoom), but directly in the same browser tab without any gallery features.

My current markdown file (content/fotografie/index.md):

---
title: "Fotografie"
description: "Einblicke in meine fotografische Arbeit"
lightgallery: true
---

### 📸 Galerie

{{< gallery >}}
{{< image
    src="/fotografie/vortrag_s.jpg"
    link="/fotografie/vortrag_l.jpg"
    caption="«Vortrag»" >}}
{{< image
    src="/fotografie/seminar_s.jpg"
    link="/fotografie/seminar_l.jpg"
    caption="«Seminar»" >}}
{{< /gallery >}}

What I’ve already tried:

  1. Local assets from LoveIt theme:
    Attempted copying necessary JS and CSS assets from the LoveIt theme to my local static folder. However, recent LoveIt theme versions don’t include these assets directly anymore (no lib/lightgallery folder present).

  2. Using Hugo Modules:
    Attempted installing/updating LoveIt via Hugo Modules:

hugo mod get github.com/dillonzq/LoveIt

This approach failed with errors (unknown revision v0.3.1) and issues with a missing or incompatible go.mod.

  1. Using CDN (jsDelivr):
    I created a partial (layouts/partials/lightbox-init.html) referencing Lightgallery directly via CDN:
<!-- CDN CSS & JS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/css/lightgallery-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/lightgallery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/plugins/thumbnail/lg-thumbnail.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.1/plugins/zoom/lg-zoom.min.js"></script>

<!-- Initialization -->
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const gallery = document.querySelector(".gallery-container");
    if (gallery) {
      lightGallery(gallery, {
        selector: ".lightgallery",
        thumbnail: true,
        zoom: true,
        download: false
      });
    }
  });
</script>

Included this partial right before the closing </body> tag in my base layout (layouts/_default/baseof.html).

Current Situation:
Despite loading CDN resources successfully (status 200, no console errors), clicking an image still opens it directly without the expected gallery functionality.

Questions to the community:

  • What might prevent Lightgallery from correctly initializing despite correct CDN integration?
  • Is the built-in LoveIt gallery shortcode compatible with external CDN initialization?
  • What is a reliable way to correctly integrate Lightgallery with the LoveIt theme without complex Hugo Module setups or manual asset copying?

Thank you for your support!

2

Have you reached out to the theme author for assistance?

3

created empty Hugo site and added the theme as git clone from https://github.com/dillonzq/LoveIt - NO further additions includes, js …

I cannot find your built-in gallery shortcode. in their sources

Ths is available at the themes assets/lib/lightgallery folder

and this _index.md in the root of my project shows a gallery using some theme assets:

---
title: LightGallery
lightgallery: true
---

{{< image src="images/Alipay.jpg" >}}

{{< image src="images/Wechat.jpg" >}}

all that said - looks like you have a somehow broken setup

p.s. used hugo v0.145.0

4

indeed, I had to reinstall hugo. Now it works, thanks a lot!

5

maybe cleaning the hugo cache would have been enough. check where it it is using hugo config

6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.