Gallery doesn't collapse into a grid?

[ivoras]

Hello,

I'm a new user of this gallery plugin, and I can't get it to display a grid / thumbnail preview of images. It's just showing image after image like there wasn't a gallery plugin there at all:

http://www.ivoras.net/divlje-20te/savrsen-ljetni-sat-seiko-srpg47k1

The code I'm using in the Grav editor is:

[gallery]
![20210731_182054](20210731_182054.jpg "20210731_182054")
![20210807_182628](20210807_182628.jpg "20210807_182628")
![20210811_091805](20210811_091805.jpg "20210811_091805")
![20210811_101408](20210811_101408.jpg "20210811_101408")
![20210811_151443](20210811_151443.jpg "20210811_151443")
![20210815_183903](20210815_183903.jpg "20210815_183903")
![20210823_174259](20210823_174259.jpg "20210823_174259")
![20210823_174940](20210823_174940.jpg "20210823_174940")
[/gallery]

The generated HTML does mention the gallery plugin but it's like something is missing, maybe CSS or JS to make it work?

I've installed the plugin from the Admin panel. This is plugin version 1.1.1 on Grav 1.7.18. The Shortcode Core plugin version is 5.0.6 (and it's installed and enabled).

Can you help me get the plugin working?

[sal0max]

Seems like some other plugin or your theme is interfering, probably overwriting the image tags.

I've seen in your sites source code, that you don't run so many plugins. But a plugin called Media Embed shows up. I tried to reconstruct your constellation, but after installing Media Embed, my site just throws an error. This seems to be a well known issue, as the plugin is not maintained any more: https://github.com/Sommerregen/grav-plugin-mediaembed/issues/32

That raises two questions for me:

• What version of Grav are you using?
• What happens to the gallery, if you disable the Media Embed plugin?

[ivoras]

Hello,

Thanks for responding quickly! This is Grav Grav 1.7.18.

Good idea - I've disabled the Media Embed plugin, but unfortunetly there's no change, the issue is still there.

[sal0max]

Alright, here's the problem:

This plugin adds some inline javascript at the bottom of your sites code. This happens inside twig, here.

This would result in your page looking something like that:

...

</div>

<script src="/user/plugins/simplesearch/js/simplesearch.js"></script>
<script src="/user/themes/quark/js/jquery.treemenu.js"></script>
<script src="/user/themes/quark/js/site.js"></script>
<script>
$("#818875377").justifiedGallery({
    rowHeight: 200,
    margins: 3,
    lastRow: "nojustify",
    captions: false,
    border: 0,
});

GLightbox({
    selector: ".glightbox-818875377",
    openEffect: "zoom",
    closeEffect: "zoom",
    slideEffect: "slide",
    closeButton: true,
    touchNavigation: true,
    touchFollowAxis: true,
    keyboardNavigation: true,
    closeOnOutsideClick: true,
    loop: false,
    draggable: true,
    descPosition: "bottom",
});
</script>

...

On your site, not only is this inline javscript missing, but also the quark javascript files. Instead, you've only got some Google ad stuff there:

<script data-ad-client="ca-pub-5720255218574527" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-77106748-3"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-77106748-3');
</script>

So, my guess is, whatever adds that Google inline javascript, doesn't do it properly, and breaks twig rendering. Did you change your theme to add this Google AdSense code? Maybe you try it with a fresh installation of that theme.

I guess that is all I can do to help you. I'm 99% sure the cause for this behavior is outside this plugin.

Let me know when you found the error.

[ivoras]

I've found the issue! I've modified item.html.twig for the Quark theme to implement the "bottom" block, and it contained the Google Ads code.

However, only one thing can implement a block, so it my implementation of the bottom block was overriding the theme's implementation which among other things adds resources such as JS and CSS.

I've reimplemented this without using the bottom block and now it works, thanks for pointing me to the right direction!