search

mfg92 / hugo-shortcode-gallery

A theme component with a gallery shortcode for the static site generator hugo.
MIT License
341 stars 65 forks source link

How to use with Wowchemy theme? #51

Closed tommyalatalo closed 1 year ago

tommyalatalo commented 1 year ago

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 1 year ago

Are there any issues logged in your browsers console?

tommyalatalo commented 1 year ago

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.

tommyalatalo commented 1 year ago

@mfg92 did you have any input on the above?

flewid commented 1 year ago

I too am experiencing this same error any ideas?

mfg92 commented 1 year ago

Does your site already include jQuery?

flewid commented 1 year ago

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

jpfeuffer commented 1 year ago

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

jpfeuffer commented 1 year ago

The following post solved my problem, as I was using exactly the massively theme. https://github.com/mfg92/hugo-shortcode-gallery/issues/19

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