5.3.31 - Gallery Template anpassen

[Dublay]

Hallo,

ich würde gerne allen <li> in der Contao Core Gallery eine Klasse "gallery-item" zuweisen.

Dafür habe ich unter templates/content_element/gallery.html.twig erstellt mit folgendem Inhalt:

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

{% block gallery_item %}
  <li class="gallery-item">
    {{ parent() }}
  </li>
{% endblock %}

Anwendungs Cache über den Contao Manager geleert. Keine Änderung. Habe ich einen Denkfehler?

[Spooky]

Einen Block namens "gallery_item" gibt es nicht.

So kannst du es zB. machen:

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

{% block list_item_attributes -%}
  {%- set list = list|merge({'item_attributes': attrs().addClass('gallery-item').mergeWith(list.item_attributes|default)}) -%}
  {{ parent() }}
{%- endblock %} 

[Dublay]

Danke! Das war der Fehler...

[derRenner]

funktioniert auch 'kürzer'

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

{% block list_item_attributes %}
    {# add class to <li> #}
    {{ parent() }} class="gallery-item"
{% endblock %} 

Und wenn du der <ul> eine Klasse verpassen möchtest:

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

{% block list_attributes %}
    {# add class to <ul> #}
    {{ parent() }} class="gallery-item-wrapper"
{% endblock %} 

[Spooky]

funktioniert auch 'kürzer'

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

{% block list_item_attributes %}
    {# add class to <li> #}
    {{ parent() }} class="gallery-item"
{% endblock %} 

Das auf keinen Fall so machen - das kann zu ungültigem HTML führen.

Und wenn du der <ul> eine Klasse verpassen möchtest:

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

{% block list_attributes %}
    {# add class to <ul> #}
    {{ parent() }} class="gallery-item-wrapper"
{% endblock %} 

Same here, auch das kann zu ungültigem HTML führen.

[derRenner]

ah - OK - wieder was gelernt!
Kann auch festgestellt werden, unter welchen Umständen bzw. was ein Auslöser für falsches HTML sein könnte?

[Spooky]

Kann auch festgestellt werden, unter welchen Umständen bzw. was ein Auslöser für falsches HTML sein könnte?

Wenn bspw. eine andere Extension dort eine Klasse hinzufügt über die Attributes - oder wenn das Contao selbst mal in einer zukünftigen Version macht. Dann bekommst du zwei mal class="…" ausgegeben.

[derRenner]

Ich hänge mich hier nochmals an - nämlich im Bezug auf die <ul>:

Wäre für die <ul> dann diese Anpassung die korrekte Möglichkeit?

{% block list_attributes -%}
  {%- set list_attributes = attrs(list.list_attributes|default).addClass('my-gallery-list') -%}
  {{ list_attributes }}
{%- endblock %}