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

Not working for me #57

Closed vladosam closed 1 year ago

vladosam commented 1 year ago

Hi, I'm trying to use gallery in my site but it won't show up. Theme is hugo-coder. Site is multilingual. This is md file, pictures.sr.md

+++
title = "Galerija"
slug = "pictures"
+++
{{< gallery match="images/*" sortOrder="desc" rowHeight="150" margins="5" thumbnailResizeOptions="600x600 q90 Lanczos" showExif=true previewType="blur" embedPreview=true loadJQuery=true >}}

Directory layout

content
    pictures.sr.md
    images
        image1.jpg
        image2.jpg

I can see in developer tools that jquery is loaded


    if (!jQuery) {
        alert("jquery is not loaded");
    }

    $( document ).ready(() => {
        const gallery = $("#gallery-3d0aaff2ab37b060b25f87de322693fd-0");

        let swipeboxInstance = null;

        gallery.on('jg.complete', () => {

                $(() => {
                    $('.lazy').Lazy({
                        visibleOnly: true,
                        afterLoad: element => element.css({filter: "none", transition: "filter 1.0s ease-in-out"})
                    });
                });

            swipeboxInstance = $('.galleryImg').swipebox(
                jQuery.extend({},
                    {  }
                )
            );
        });

        gallery.justifiedGallery({
            rowHeight : "150",
            margins : "5",
            border : 0,
            randomize :  false ,
            waitThumbnailsLoad : false,
            lastRow : "justify",
            captions : false,

        });

    });

Is there anything i can try to make it work. Thanks

mfg92 commented 1 year ago

Does the generated HTML contain references to your images?

vladosam commented 1 year ago

No. There is not any reference in html to images. I tried to create new site with minimal configuration. Just theme and shortcode-gallery. Created new page in content/about.md created new folder in content/images/. I put some images in folder and add this shortcode to about.md

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

And nothing changed. Empty page.

mfg92 commented 1 year ago

You must organize your markdown file and the image files as page bundles. E.g.:

content/
    about/
        index.md
        images/
            image1.jpg
            image2.jpg
vladosam commented 1 year ago

Wooohooo, yes it works :thumbsup:. Thanks for help.