5.7.x Twig Galerie Masonry

[derRenner]

Contao Galerie als Masonry Galerie mit masonry.desandro.com

Lade die beiden Dateien masonry.pkgd.min.js und imageloades.pkgd.min.js herunter.

Masonry - Cascading grid layout library
imagesLoaded

Erstelle im Template Studio ein Varianten Template – oder ersetze dein Standard Template – für deine Galerie.

Das Twig Template /templates/content_element/gallery/galerie-masonry.html.twig

{% extends "@Contao/content_element/gallery.html.twig" %}
{% use '@Contao/component/_stylesheet.html.twig' %}

{% block content %}
    {% with {
        items: images,
        list_attributes: attrs().addClass('grid'),
        item_attributes: attrs().addClass('grid-item')        
    } %}
        {{ block('list_component') }}
    {% endwith %}
{% endblock %}

{% block script %}
    {% add 'masonry_scripts' to body %}

        <script src="/files/assets/js/masonry.pkgd.min.js"></script>
        <script src="/files/assets/js/imagesloaded.pkgd.min.js"></script>

        <script>
            document.addEventListener('DOMContentLoaded', () => {

                document.querySelectorAll('.grid').forEach(grid => {

                    imagesLoaded(grid, () => {
                        new Masonry(grid, {
                            itemSelector: '.grid-item',
                            columnWidth: '.grid-item',
                            percentPosition: true
                        });
                    });

                });

            });
        </script>

    {% endadd %}
{% endblock %}

{% block style %}
    {% add 'masonry_css' to stylesheets %}
        {% with {file: asset('files/assets/css/gallery.css')} %}
            {{ block('stylesheet_component') }}
        {% endwith %}
    {% endadd %}
{% endblock %} 

Der <ul> wird damit eine Klasse grid hinzugefügt.
Der <li> wird damit eine Klasse grid-item hinzugefügt.

Als Basis SCSS /files/assets/scss/gallery.scss

.content-gallery {

    .grid {
        margin: 0 -.5rem;
        padding: 0;
        list-style: none;
    }

    .grid-item {
        box-sizing: border-box;
        padding: .5rem;

        figure {
            margin: 0;
        }

        img {
            display: block;
            width: 100%;
            height: auto;
        }
    }

    &--cols-1 .grid-item { width: 100%; }
    &--cols-2 .grid-item { width: 50%; }
    &--cols-3 .grid-item { width: 33.3333%; }
    &--cols-4 .grid-item { width: 25%; }
    &--cols-5 .grid-item { width: 20%; }
    &--cols-6 .grid-item { width: 16.6667%; }

    @media (max-width: 991.98px) {
        &--cols-3,
        &--cols-4,
        &--cols-5,
        &--cols-6 {
            .grid-item {
                width: 50%;
            }
        }
    }

    @media (max-width: 575.98px) {
        .grid-item {
            width: 100%;
        }
    }
}

ergibt als CSS /files/assets/css/gallery.css

.content-gallery .grid {
  margin: 0 -0.5rem;
  padding: 0;
  list-style: none;
}
.content-gallery .grid-item {
  box-sizing: border-box;
  padding: 0.5rem;
}
.content-gallery .grid-item figure {
  margin: 0;
}
.content-gallery .grid-item img {
  display: block;
  width: 100%;
  height: auto;
}
.content-gallery--cols-1 .grid-item {
  width: 100%;
}
.content-gallery--cols-2 .grid-item {
  width: 50%;
}
.content-gallery--cols-3 .grid-item {
  width: 33.3333%;
}
.content-gallery--cols-4 .grid-item {
  width: 25%;
}
.content-gallery--cols-5 .grid-item {
  width: 20%;
}
.content-gallery--cols-6 .grid-item {
  width: 16.6667%;
}
@media (max-width: 991.98px) {
  .content-gallery--cols-3 .grid-item, .content-gallery--cols-4 .grid-item, .content-gallery--cols-5 .grid-item, .content-gallery--cols-6 .grid-item {
    width: 50%;
  }
}
@media (max-width: 575.98px) {
  .content-gallery .grid-item {
    width: 100%;
  }
}

Mit {% add 'masonry_scripts' to body %} und {% add 'masonry_css' to stylesheets %} werden die Dateien nur einmal pro Seite, und nur dort, wo das angepasste Template im Einsatz ist, geladen. Auch bei Mehrfachverwendung von Inhaltselementen Galerie mit diesem Template, werden die Dateien nur einmal geladen.

[Franko]

Contao Galerie als Masonry Galerie mit masonry.desandro.com ...

Lieben Dank für die praxisnahen Details!
Im Kontext könnte man die puren CSS Anstrengungen diesbezüglich auch nicht vernachlässigen:

s. a. Slack https://contao.slack.com/archives/C0...84542937916879
bzw. like https://youtu.be/A2EmrQ3nV88