Quark Child: Masonry-like Gallery

Support Themes & Styling
1

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

gallery.html.twig
https://pastebin.com/U6DmAkhY

css
https://pastebin.com/c8ynYGx7

Thanks in advance
:heart:

2

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

3

Javascript doesn’t do its job

4

Hello,

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

<script>
var colcade = new Colcade( '.dz-grid', {
    columns: '.dz-grid-col',
    items: '.dz-grid-item'
});
</script>

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

5

screen
screen1920×392 59.4 KB

no errors

6

Sorry,
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.

7

Oh, found something.

ReferenceError: Colcade is not defined

8

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

<script>
var colcade = new Colcade( '.dz-grid', {
    columns: '.dz-grid-col',
    items: '.dz-grid-item'
});
</script>

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
9

Well, problem solved.

Thanks a lot :kissing_heart: