5.7.xTwig Galerie Masonry

derRenner — Fri, 25 Sep 2026 06:26:12 GMT

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

PHP-Code:


{% 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

grid

wird damit eine Klasse grid-item hinzugefügt.

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

Code:

.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

Code:

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

5.7.xform.radio_twig Parameter übergeben

Thomas Hinze — Wed, 02 Sep 2026 09:22:38 GMT

Hi,

ich habe eine Formular mit Bedingungen.

Unter anderem verwende ich vier Radio Options.
Je nach Auswahl öffnet sich danach ein spezifisches Set an Feldern.

Das Formular verwende ich auf verschiedenen Unterseiten.

Ich würde gern mit meinedomain.tld?Anlass=VALUE eine Vorauswahl treffen.
Ist weder Anlass vorhanden, noch stimmt Value überein möchte ich die Radio Buttons neutral stehen lassen.

Im Formular würde ich das Twig-Template für die Radio Gruppe ändern in etwas wie folgt

HTML-Code:

{% extends '@Contao/form_radio.html.twig' %}

{% block field %}
    {% set anlassValue = app.request.query.get('Anlass') %}

    {% for option in options %}
        {% if option.type == 'option' %}
            
                "radio"
                    name="{{ option.name }}"
                    id="opt_{{ option.id }}"
                    class="radio"
                    value="{{ option.value }}"
                    {{ option.checked ? 'checked' }}
                    {{ option.attributes }}
                    {{ option.value == anlassValue ? 'checked' }}
                >
                "lbl_{{ option.id }}" for="opt_{{ option.id }}">{{ option.label }}
            
        {% endif %}
    {% endfor %}
{% endblock %}

Leider klappt das nicht so.
Meine Conditional Field klappt mit diesem Template immer alles auf.
Egal was in der URL steht

Contao-Community - Modifizierte Templates

5.7.xTwig Galerie Masonry

5.7.xform.radio_twig Parameter übergeben