mfg92/hugo-shortcode-gallery

How to use with Wowchemy theme?

Closed this issue · 8 comments

I'm trying to use this gallery with the Wowchemy theme, but the problem is that the theme has a builtin shortcode with the same name, i.e. {{< gallery ... >}}. So I tried to set up the gallery from this repo by copying the layouts/shortcodes, assets/shortcode-gallery and static/shortcode-gallery into my project, and renaming the shortcode file to autogallery.html instead.

This does load when I start up the hugo server, but the gallery doesn't function properly, all the thumbnails are just shown as very blurred images, and the thumbnails just link directly to the image files, i.e. there is no lightbox opening or anything like that.

What steps am I missing in order to get this to work as a manually imported shortcode?

mfg92 commented

Are there any issues logged in your browsers console?

Yeah I can see one error in the console, I'm not sure why this is appearing, I can verify that the jusifiedgallery js file is referenced correctly by opening it via the relative address through the page source.

jQuery.Deferred exception: gallery.justifiedGallery is not a function @http://localhost:1313/project/polaris/:1441:11
e@http://localhost:1313/shortcode-gallery/jquery-3.6.1.min.js:2:30038
Deferred/then/l/</t<@http://localhost:1313/shortcode-gallery/jquery-3.6.1.min.js:2:30340
setTimeout handler*Deferred/then/l/<@http://localhost:1313/shortcode-gallery/jquery-3.6.1.min.js:2:30549
c@http://localhost:1313/shortcode-gallery/jquery-3.6.1.min.js:2:28327
fireWith@http://localhost:1313/shortcode-gallery/jquery-3.6.1.min.js:2:29072
fire@http://localhost:1313/shortcode-gallery/jquery-3.6.1.min.js:2:29108
c@http://localhost:1313/shortcode-gallery/jquery-3.6.1.min.js:2:28327
fireWith@http://localhost:1313/shortcode-gallery/jquery-3.6.1.min.js:2:29072
ready@http://localhost:1313/shortcode-gallery/jquery-3.6.1.min.js:2:32045
$@http://localhost:1313/shortcode-gallery/jquery-3.6.1.min.js:2:31824
EventListener.handleEvent*@http://localhost:1313/shortcode-gallery/jquery-3.6.1.min.js:2:32193
@http://localhost:1313/shortcode-gallery/jquery-3.6.1.min.js:2:220
@http://localhost:1313/shortcode-gallery/jquery-3.6.1.min.js:2:225
 undefined jquery-3.6.1.min.js:2:31593

The repo in question is here if you want to check for obvious mistakes. If you start hugo locally and then navigate to Gallery -> Polaris you can see the error (the gallery should appear below the text on that page.

@mfg92 did you have any input on the above?

I too am experiencing this same error any ideas?

mfg92 commented

Does your site already include jQuery?

it does yes, i tried with the LoadJQuery=true, and without. I get the same error as @altosys when including it manually.

Same issue here! Same error. With loadJQuery=true and without.

The following post solved my problem, as I was using exactly the massively theme. #19

Since your errors are the same, I expect that your theme is using jquery as well and loads it at an incompatible place.