Gallery shortcode not working

[thedivtagguy]

I'm trying to incorporate the shortcode in my website. I've followed the instructions as they stand.

I've edited my config.yaml to this:

theme: 
    - hugo-theme-novela
    - hugo-shortcode-gallery
baseURL: "https://example.com"
languageCode: "en-us"

I've also cloned it into the themes folder. According to the installation instructions, this should be enough to get me started. However when I add a new folder called images next to the _index.md inside content and us this shortcode, nothing shows up:

---
hero:
  heading: A Whole Sort of General Mishmash
  maxWidthPX: 400
seo:
  image: /images/hero-2.jpg
---
{{< gallery match="images/*" sortOrder="desc" rowHeight="150" margins="5" resizeOptions="600x300 q90 Lanczos" showExif="true" previewType="blur" embedPreview="true" >}}

I've uploaded all the files to this repo here if that helps: Website Repo. Can someone help me with this? I've been trying for a while now. I'm new to Hugo so I might be missing something that is very simple.

[mfg92]

Hi,
I tried to investigate your problem, but I run into this problem right from the beginning when I run your site:
./hugo.exe server Start building sites … WARN 2020/12/21 14:53:51 Markup type mmark is deprecated and will be removed in a future release. See https://gohugo.io//content-management/formats/#list-of-content-formats Built in 136 ms Error: Error building site: failed to render pages: render of "page" failed: execute of template failed: template: _default/blog.html:3:3: executing "main" at <partial "articles/articles.html" .>: error calling partial: execute of template failed: template: partials/articles/articles.html:3:5: executing "partials/articles/articles.html" at <partial "articles/list.html" .>: error calling partial: "S:\OwnCloud\website\tmp\website\themes\hugo-theme-novela\layouts\partials\articles\list.html:7:47": execute of template failed: template: partials/articles/list.html:7:47: executing "partials/articles/list.html" at <$paginator.Pages>: error calling Pages: runtime error: invalid memory address or nil pointer dereference

I use hugo hugo 0.79.1 on windows. if you can fix that, i will try to help you.

In the mean time you can have a look at the example site: https://github.com/mfg92/hugo-shortcode-gallery/tree/example_site/example_site

[thedivtagguy]

Hey I'm so sorry, I think there was some problem with the partials in one of the pages. I've rebuilt it and uploaded to this repo: https://github.com/thedivtagguy/gallery, does this work now?

I have tried looking at the example site but I think there's something I'm missing that I can't quite place. I shall try again though and share what I'm doing.

[mfg92]

I made it work, see my commits and commit messages:
https://github.com/mfg92/gallery/commits/master

[thedivtagguy]

Oh wow, this works wonderfully! I shall submit an issue with the theme's authors to update the JQuery. I have a couple of more follow-up questions if that is fine:

1. After I've merged this fork and updated my local copy, will I have to keep removing the references to the old Jquery for every post? Or have you managed to remove it for good?

2. The image thumbnails look a little blurry right now. I tried removing previewType="blur" but this makes the gallery itself disappear. How can I fix this?

3. I wish to keep the gallery in my homepage, but apparently page resources for _index.md need to live in the same directory as the _index.md, i.e. not in a subdir. Here: https://gohugo.io/content-management/page-bundles/ So I can't have a separate folder for galleries, but how would I call it in the shortcode?

I've tried this and it didn't work:

{{< gallery match="/*" sortOrder="desc" rowHeight="150" margins="5" resizeOptions="600x300 q90 Lanczos" showExif="false" previewType="blur" embedPreview="true" >}}

Thank you again for your help. This is a wonderful project!

[mfg92]

1. You will need to remove them for every post where you want to use hugo-shortcode-gallery
2. You need to play arround with resizeOptions, use a value like "600x600 q90 Lanczos". resizeOptions defines the resolution of the image in the gallery (when you click on an image, the full resolution will be used). previewType come only to play when embedPreview is set to true, then it will either include a single pixel or a very small preview image directly in the in the HTML file. The brower can show these embedded pixels or images directly without speeking to the server a scond time. In the background the browser will load the resized images and show them as soon as one is available.
3. Do I understand you correctly, wou want to have a gallery in _content/index.md? I tried it, but even if you put plain text into this file it is not displayed .

[thedivtagguy]

I figured out why the plain text wasn't being rendered! The index.html didn't have {{ .Content }} so the text or any content never got rendered. I've fixed it in the main repo and reuploaded with the changes: https://github.com/thedivtagguy/gallery/

If you can just show me how to make this work here with the file path not being a subdir, I would be really glad (and out of your hair!). Sorry for the prolonged queries.

I'll also create a suggestion with the theme's authors to update the JQuery, that can't be good in any case.

[mfg92]

Sorry for the big delay...

I pushed some commits to https://github.com/mfg92/gallery/commits/master. These demonstrate how to use images stored directly next to the mardown file.

FYI.: If the shortcode does not have "match" as an parameter, all images (in subdirectories or not) will be displayed.