Mosaic gallery with strange random gaps

[GBrachetta]

I have a gallery with the settings below and often, especially when I first load the page, gaps appear between some images, as if the layout couldn't be resolved quickly enough. It looks okay after a refresh. My setup is:

<div id="nanogallery2" data-nanogallery2='{
        "thumbnailWidth": "400 XS200 SM300",
        "thumbnailHeight": "auto XSauto SMauto",
        "thumbnailBaseGridHeight" : 100,
        "thumbnailGutterWidth" : 2,
        "thumbnailGutterHeight" : 2,
        "thumbnailBorderHorizontal" : 0,
        "thumbnailBorderVertical" : 0,
        "thumbnailAlignments": "scaled",
        "gallerySorting": "random",
        "galleryDisplayTransition": "slideUp",
        "galleryResizeAnimation": true,
        "galleryDisplayTransitionDuration": 1000,
        "thumbnailDisplayOrder": "random",
        "thumbnailDisplayTransition": "scaleUp",
        "thumbnailDisplayTransitionDuration": 1500,
        "thumbnailDisplayInterval": 60,
        "thumbnailHoverEffect2": "imageGrayOn",
        "galleryTheme": {
            "thumbnail": {
                "background": "#fff"
            }
        },
        "viewerToolbar": {
            "display": true,
            "standard": "minimizeButton, shareButton, fullscreenButton",
            "minimized": "minimizeButton, fullscreenButton, downloadButton, infoButton" },
            "viewerTools": {
                "topLeft": "label",
                "topRight": "playPauseButton, zoomButton, fullscreenButton, closeButton"
            },
            "thumbnailLabel": {
                "display": false,
                "valign": "bottom",
                "position": "overImage",
                "hideIcons": false,
                "displayDescription": true
            }
        }'>

After this, I loop through my album with

{% for media in album %}
    <a href="{{ media.image.url }}" data-ngthumb="{{ media.image.url }}" data-ngdesc="{{ media.caption }}" alt="{{ media.name }}"></a>
{% endfor %}

Am I doing anything wrong here? Thank you!

[Kris-B]

These settings are for cascading layout, not mosaic layout. For this layout (and also for the justified layout), the script requires the size of each individual thumbnail image to calculate the position of the thumbnails. If these sizes are not provided, the script needs to download the images to get their size. This process may not be reliable depending among others on your server, your network, file sizes, number of thumbnails...

To avoid any issue, please provide, for each item, the width and height of the thumbnail image.

[GBrachetta]

You are right, sorry about confusing the masonry layout with the cascading! Nevertheless, I think I found the cause of my problem: I was passing from my view a shuffled list and on top of that I had the thumbnailDisplayOrder: random key/value pair in the gallery. That double 'shuffle' I believe was the reason for the gallery to misbehave. After passing only my queryset, the gallery is very smooth.

[Kris-B]

@GBrachetta thanks for the update !

From my previous comment: if you can provide the size of each thumbnail images, the gallery display should be faster. I need to add the explanation in the online documentation.

And also, for better performances, don't use the full size image for the gallery, but only for the lightbox display.

Something like this ;-)

{% for media in album %}
    <a href="{{ media.image.url }}" data-ngthumb="{{ media.thumbnail-image.url }}" data-ngdesc="{{ media.caption }}" alt="{{ media.name }}" data-ngthumbImgWidth="{{ media.thumbnail-image.width }}" data-ngthumbImgHeight="{{ media.thumbnail-image.height }}"></a>
{% endfor %}

[GBrachetta]

That's a great tip, thanks so much! I'll need to make some modifications to my model but I can try that!

[GBrachetta]

I really love nanogallery2. Seriously. This is my humble attempt at it:

Gallery

If you have some tips about how I can generate the thumbnail and have it saved to my static folder, you would absolutely make my day! [Edit]: I managed, thank you for your amazing plugin!

[Kris-B]

Thanks :smiley:

[Kris-B]

a really nice gallery and website: good job!