Nothing appear

[sp4d1n0]

Hi! I'm trying to use your awesome shortcode, yet nothing appear on my side. The page resources appear in the build root, yet nothing shows where it should get the gallery. It's a multi language site, with hugo 0.89.4. I followed the instructions, so I have all my images under images/* and copied the shortcode command. No error at build or serve, yet no gallery... any clue?

[mfg92]

I need more input to help you with this issue. Can you create a zip file that contains all files needed to reproduce your issue.

[stiliajohny]

same here ,

here is my folder structure

here is my config.toml

...
baseURL = "https://stiliajohny.github.io/"
# [en, zh-cn, fr, pl, ...] determines default content language
defaultContentLanguage = "en"
# theme
theme = ["LoveIt", "hugo-shortcode-gallery"]
# themes directory
# themesDir = "./themes"
...

here is the post that contains the gallery ( its the index.en.md )

---
title: ""
date: 2021-12-24
author: "John Stilia"

# resources:
# - name: featured-image
#   src: java-vurn.png
# - name: featured-image-preview
#   src: log4j-1.png

draft: false
lightgallery: true
fontawesome: true
linkToMarkdown: true
rssFullText: false

toc:
  auto: true
---

{{< gallery match="./images/*" sortOrder="desc" rowHeight="150"  previewType="blur" embedPreview="true" >}}

[stiliajohny]

Hi! I'm trying to use your awesome shortcode, yet nothing appear on my side. The page resources appear in the build root, yet nothing shows where it should get the gallery. It's a multi language site, with hugo 0.89.4. I followed the instructions, so I have all my images under images/* and copied the shortcode command. No error at build or serve, yet no gallery... any clue?

after some research it seems to be the YAML metadata on the top of my post in particular.
that might be the case with you as well

Look here
https://github.com/mfg92/gallery/blob/master/content/photography/index.md?plain=1

and here is the raw
https://raw.githubusercontent.com/mfg92/gallery/master/content/photography/index.md

[stiliajohny]

and to finalise my answer

te element it was missing for the shortcode to work was

layout: photography

[gerrited]

I had that problem too. After 2 hours of troubleshooting I took a look in the developer console and spotted the error "Uncaught ReferenceError: jQuery is not defined". Turns out my theme was not using jquery.

[mfg92]

In case your main theme does not already provide jQuery the loadJQuery parameter can be used. If set to true, the jQuery of this theme component is imported wherever the shortcode is used.

{{< gallery ... loadJQuery=true >}}

[Daxidz]

It indeed was the missing loadJQuery=true which caused the error. I had the exact same issue and this resolved it!

[sim590]

I'm using this:

{{< gallery match="images/*" loadJQuery=true sortOrder="desc" rowHeight="150" margins="5" showExif=true previewType="blur" embedPreview="true" >}}

and nothing appears... It just stays blank. I do have images under images/. I have the following config:

theme = ["zzo", "hugo-shortcode-gallery"] # Name of Zzo theme folder `in` `themes/`.

There are no errors in the output of hugo... So it means that the shortcode is found, but nothing is produced.

I have no clue what to do...

[mfg92]

@sim590 Have you checked the generated HTML? Does it contain an empty gallery?

[lorenviol]

@sim590 Have you checked the generated HTML? Does it contain an empty gallery?

I have the same issue, and upon checking the HTML the gallery is not generated at all

[mfg92]

@lorenviol What does your folder layout look like?

[lorenviol]

It looks something like this:

[mfg92]

Your folder layout looks good to me. What's the content of index.md?

[gymnae]

In case your main theme does not already provide jQuery the loadJQuery parameter can be used. If set to true, the jQuery of this theme component is imported wherever the shortcode is used.

{{< gallery ... loadJQuery=true >}}

This fixed it for me, I was really not understanding why my drone.ci runner was complaining about the missing gallery shortcode. Adding this fixed my builds, thank you very much!

[WoodyTheWoo]

Hey there !

Same for me, unfortunately.

I'm using the theme PaperMod, and have added the loadJQuery="true on the shortcode line.

I can display an image with ![title](imgs/IMG_5396.jpg), but nothing appear when I add the gallery shortcode.

I'm quite new to hugo, and can't figure out any log files or debug lines, is there any that can provides some infos about this ?

There is no error on the developer console of Firefox (except for favicon missing).

Edit : here's the webpage when rendered on the navigator link

[mfg92]

I need more input in order to help you. Can you provide a small but complete example of your issue in a zip file?

[WoodyTheWoo]

Thank you for the reply.

But problem solved. I had to rename the file _index.md to index.md inside the content folder to have the gallery working.

[correaswebert]

Hi! I too am facing the same issue. Here is the website and here is the repository.

I am using the Massively theme. It seems that the gallery is rendered in the DOM. It's just not visible (the width is zero).

[mfg92]

The link to your repository is giving me a 404 error.

I had a look at your website. The issue is caused by the fact that there is a bundle.js loaded which also contains jQuery. When I force my browser not to load that bundle.js, the gallery is displayed correctly:

[larihuttunen]

I'm having the same issue and it is documented as an issue in the Congo repository: jpanther/congo#652

I'm cross-posting it here to see whether it might be something you can help me with?

[mfg92]

@larihuttunen I have now found the time to look at your problem.
It seems that something didn't work as expected when building the website, as there are no image references in the html:

A correct build would look like this

So this is probably not (or not only) a problem with the Congo theme, but with the way you are trying to include your images.

Please, first have a read about the required folder structure for this shortcode here and about page bundles here.

After that you will notice that your "_index.md" is a branch bundle and therefore the shortcode cannot access the images in any subfolder:

To solve your problem, try to

• use a leaf bundle instead of a branch bundle (rename "_index.md" to "index.md"), or
• put the images directly into the folder containing the _index.md file.

When you have found a solution to this problem, I would be interested to hear from you about how you solved it.

[larihuttunen]

Unfortunately, I have to use the branch bundle, since my site is offering content in multiple languages. The good news is that moving the images up a level and adjusting the macro made it work. Thanks for the help!

[nnzv]

Switching from _index.md to index.md worked with the hugo-book theme. Thanks for the handy shortcode @mfg92.