Twig-Template für Gallery ohne Liste

Moin,

ich bin ganz ehrlich, ich blicke nicht mehr durch. Twig ist eine ganz neue Welt für mich.

Mit den html5/php Templates bin ich super zurecht gekommen. Ich habe sie anpassen können, da etwas da war.

Nun wollte ich eine Gallery erstellen, wo die Bilder einfach in divs ausgegeben werden und keine Liste erzeugt wird. Sondern einfach ein Container außenrum mit den Bildern in Untercontainern da drin. Vom Aufbau so:

HTML-Code:

---

<div class="gallery">
<h1>Überschrift</h1>
<div class="gallery__image image1"><img src="image1.jpg"></div>
<div class="gallery__image image2"><img src="image2.jpg"></div>
<div class="gallery__image image3"><img src="image3.jpg"></div>
</div>

---

Mit den alten Templates war das für mich kein Problem, aber jetzt geht das ja gar nicht mehr oder ich bin zu blöd dafür.

Kann mir jemand helfen? Mit hilft auch schon, wenn ihr mir sagt, das geht nicht mehr. Dann probiere ich es nicht weiter.

LG,
Per

Ich bin jetzt soweit gekommen:

HTML-Code:

---

{% extends "@Contao/content_element/gallery.html.twig" %}

{% block content %}
  {% block list %}
    {{ dump() }}
    <div class="gallery">
    <h1>{{ headline.text }}</h1>
    {% block images %}
      {% for image in images %}
        <div class="gallery__image image">
          {% block image %}
            {{ dump(image) }}
           
          {% endblock %}
      </div>
    {% endfor %}
    {% endblock %}
    </div>
  {% endblock %}
{% endblock %}

---

Durch das dump(image) wird folgendes ausgegeben (Debug-Mode an):

HTML-Code:

---

Contao\CoreBundle\Image\Studio\Figure {#1147 ?
  -image: Contao\CoreBundle\Image\Studio\ImageResult {#1192 ?}
  -metadata: Closure(Figure $figure): Metadata {#1193 ?}
  -linkAttributes: Closure(Figure $figure): array {#1164 ?}
  -lightbox: Closure(Figure $figure): LightboxResult {#1151 ?}
  -options: []
}

---

Wie kriege ich es jetzt hin, dass mir das Bild ausgegeben wird?

Achso: Die Überschrift ist auch noch doppelt drin...

Bei folgendem Code:

HTML-Code:

---

{% extends "@Contao/content_element/gallery.html.twig" %}

{% block content %}
  {% block list %}
{#    {{ dump() }} #}
    <div class="gallery__images">
    {% block images %}
      {% for image in images %}
        <div class="gallery__images__image">
          {% block image %}
            {{- figure(image) -}}
          {% endblock %}
      </div>
    {% endfor %}
    {% endblock %}
    </div>
  {% endblock %}
{% endblock %}

---

kriege ich folgende Fehlermeldung:

HTML-Code:

---

Contao\CoreBundle\Twig\Runtime\FigureRuntime::buildFigure(): Argument #1 ($from) must be of type Contao\FilesModel|Contao\Image\ImageInterface|string|int, Contao\CoreBundle\Image\Studio\Figure given, called in /home/web3r6yde/html/2022.highdawn-design.de/var/cache/dev/twig/04/045418f7348c6a962f2291ce2bcfde7a.php on line 179

---

So,

habe es jetzt hingekriegt:

HTML-Code:

---

{% block content %}
{% set myVal = 0 %}
  {% block list %}
    <div class="gallery__images">
    {% block images %}
      {% for image in images %}
        {% set myVal = myVal + 1 %}
        <div class="gallery__images__image image_{{ myVal }}">
          {% block image %}
            {% with {figure: image} %}
              <img src="{{ figure.image.getImageSrc(true) }}">
            {% endwith %}
          {% endblock %}
        </div>
      {% endfor %}
    {% endblock %}
  </div>
  {% endblock %}
{% endblock %}

---

Ausgegeben wird dann folgendes:

HTML-Code:

---

<div class="content-gallery--cols-4 content-gallery">                                   
    <h1>Überschrift</h1>

           
                  <div class="gallery__images">
                          <div class="gallery__images__image image_1">
                                    <img src="assets/images/b/bild1-417f7cde.jpg">
                              </div>
                      <div class="gallery__images__image image_2">
                                    <img src="assets/images/b/bild2-89abf50e.jpg">
                              </div>
                      <div class="gallery__images__image image_3">
                                    <img src="assets/images/6/bild3-container-1ba753e1.jpg">
                              </div>
     
      </div>
          </div>

---

Die Variable zählt immer einen hoch, so dass der Container eine eindeutige Klasse erhält. Vielen Dank an Franko für seinen Tip hier: https://community.contao.org/de/show...l=1#post564736

Einzige Frage: Gibt es eine elegantere Art und Weise, das zu tun, was ich hier gemacht habe?