Quark Child: Masonry-like Gallery

Hello World,
im pretty new to this stuff and i could need some help. Im trying to implement a masonry like gallery (colcade.js, same author) but its not working and i feel like its because of the template. I cant find a solution thats why im asking for help. It worked outside of grav in a simple html file.

Here is what ive done so far



Thanks in advance

@Starguest, Would you mind sharing what “not working” means?

Javascript doesn’t do its job


When you open your dev tool console, do you see any error?
I’m asking because I wonder if:

var colcade = new Colcade( '.dz-grid', {
    columns: '.dz-grid-col',
    items: '.dz-grid-item'

Shoudln’t be declared after you load colcade.js.

no errors

I was talking about the dev tool console of your browser.
F12 to open it on chrome or firefox, then click on the console tab.

Oh, found something.

ReferenceError: Colcade is not defined

Yep, so my guess was right.

You are adding colcade.js at line 13

{% block javascripts %}
    {{ parent() }}
    {% do assets.addJs('theme://js/colcade.js', {group:'bottom'}) %}
{% endblock %}

In your HTML, the group “bottom” is probably just before de body tag is closed.

But you are declaring a new Colcade in the head tag, line 19

var colcade = new Colcade( '.dz-grid', {
    columns: '.dz-grid-col',
    items: '.dz-grid-item'

Colcade is not loaded yet as your THML document is read from top to bottom.

You should either move where you declare your Colcade or where you load Colcade.js

1 Like

Well, problem solved.

Thanks a lot :kissing_heart: