Twig: Bildern immer eine Klasse geben

[Kahmoon]

Hallo zusammen,

ich hab das erste Mal Kontakt zu Twig Templates....anscheinend kann man in C5 nicht mehr klassisch arbeiten!?

Ich will allen Image Elementen ne Bootstrap Klasse mitgeben. Bisher habe ich das einfach im picture_default.html5 gemacht und alles war gut. Wo muss ich da jetzt ran? und wie schreibe ich das in Twig?

Component _picture.html.twig?

Vg Frank

[zoglo]

..anscheinend kann man in C5 nicht mehr klassisch arbeiten!?

Kannst du, wenn du eine contao/config.php erstellst und folgendes einträgst:

<?php

    $GLOBALS['TL_CTE']['texts']['code']      = \Contao\ContentCode::class;
    $GLOBALS['TL_CTE']['texts']['headline']  = \Contao\ContentHeadline::class;
    $GLOBALS['TL_CTE']['texts']['list']      = \Contao\ContentList::class;
    $GLOBALS['TL_CTE']['texts']['text']      = \Contao\ContentText::class;
    $GLOBALS['TL_CTE']['texts']['table']     = \Contao\ContentTable::class;
    $GLOBALS['TL_CTE']['links']['hyperlink'] = \Contao\ContentHyperlink::class;
    $GLOBALS['TL_CTE']['links']['toplink']   = \Contao\ContentToplink::class;
    $GLOBALS['TL_CTE']['media']['image']     = \Contao\ContentImage::class;
    $GLOBALS['TL_CTE']['media']['gallery']   = \Contao\ContentGallery::class;
    $GLOBALS['TL_CTE']['media']['player']    = \Contao\ContentPlayer::class;
    $GLOBALS['TL_CTE']['media']['youtube']   = \Contao\ContentYouTube::class;
    $GLOBALS['TL_CTE']['media']['vimeo']     = \Contao\ContentVimeo::class;
    $GLOBALS['TL_CTE']['files']['downloads'] = \Contao\ContentDownloads::class;
    $GLOBALS['TL_CTE']['files']['download']  = \Contao\ContentDownload::class;
    $GLOBALS['TL_CTE']['includes']['teaser'] = \Contao\ContentTeaser::class;

(HTML habe ich in dem Beispiel mal außer Acht gelassen...)

Die Extension macht es auch: https://extensions.contao.org/?q=con...gacy-templates

Aber... Weg mit dem alten Sch*** und ab zum neuen TWIG MIT UPDATEKOMPATIBILITÄT YESSS

Gallery

{# Liegt unter /templates/content_element/gallery.html.twig #}

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

{% set figure_attributes = attrs(figure_attributes|default)
    .addClass('boostrap-class')
%}

Image

{# Liegt unter /templates/content_element/image.html.twig #}

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

{% set figure_attributes = attrs(figure_attributes|default)
    .addClass('boostrap-class')
%}

Oder in deiner eigenen _base.html.twig alles machen, ist die ehemalige block_searchable/unsearchable

Ob es so die Best practice ist, das weiß nur m-vo

[Kahmoon]

Danke. Das mag noch nicht so ganz. Es handelt sich um ein Textelement bei dem ein Bild aktiviert ist.

figure:Attributes steht mir da nicht zur Verfügung wenn ich das im Template richtig lese. Hab es mit style und attributes versucht. Leider ohne Erfolg.

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


{#
  ** Add changes to the base template here. **


  Hint: Try adjusting blocks and attributes instead of
  overwriting the whole template. This way your version
  can remain compatible with future changes to the base
  template as well as adjustments made by extensions.


  Currently available blocks:
    "picture_component", "image", "sources", "source",
    "schema_org", "figure_component", "media",
    "media_link", "caption", "caption_inner",
    "content", "headline_component",
    "headline_attributes", "headline_inner",
    "wrapper", "wrapper_tag", "attributes", "inner",
    "metadata", "style", "script"


  Example:
    {% block picture_component %}
       {{ parent() }}
       My additional content for 'picture_component'…
    {% endblock %}
#}
{% set style = attrs(style|default)
    .addClass('img-fluid')
%}

[bizon]

Du kannst <figure> und/oder <picture> eine Klasse zuweisen.
Da du das Template für Text-Elemente einsetzen möchtest, würde ich es hier speichern: templates/content_element/text/yourFilename.html.twig

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

{# wird zu <figure class="img-fluid"> #}
{% block figure_component %} 
    {% set figure_attributes = attrs(figure_attributes|default).addClass('img-fluid') %}
    {{ parent() }}
{% endblock %}

{# wird zu <picture class="img-fluid"> #}
{% block picture_component %} 
    {% set picture_attributes = attrs(picture_attributes|default).addClass('img-fluid') %}
    {{ parent() }}
{% endblock %} 

*Edit: Code-tags geändert

[bizon]

Ergänzung:
Man kann auch dem Inhaltselement: content-text selbst über das Template eine Klasse zuweisen.

{# wird zu <content-text class="img-fluid"> #}
{% block attributes %} 
    {% set attributes = attrs(attributes|default).addClass('img-fluid') %}
    {{ parent() }}
{% endblock %} 

[Kahmoon]

Danke. Und wie bekomme ich das aufs img Tag selbst? Ich brauche es direkt dort.
https://getbootstrap.com/docs/5.0/co...ponsive-images

Sorry...muss mich hier erst reinwurschteln.

[bizon]

Und wie bekomme ich das aufs img Tag selbst? Ich brauche es direkt dort.

Dafür genügt ein Blick in die Docs. Schau dir das Example an.

[bizon]

Eine weitere Möglichkeit ist, Bildgrößen in der config/config.yaml anzulegen. Dort kann man default Einstellungen vornehmen, die dann für alle folgenden Bildgrößen gültig sind. So kann man auch für jedes <img> Tag eine eigene Klasse einbauen. z.B.:

contao:
    image:
        sizes:
            _defaults:
                css_class: img-fluid
                formats:
                    jpg: [jpg, webp]
			...
			...

Und wieder: Lies die Docs.

[Kahmoon]

Dafür genügt ein Blick in die Docs. Schau dir das Example an.

In der Doc war ich schon. Allerdings hier https://docs.contao.org/manual/en/la...emplates/twig/ Diesen Abschnitt hab ich aber nicht gesehen.

[Kahmoon]

In der Doc ist übrigens ein Fehler. Da fehlt ein Hochkomma im Snipped

[Spooky]

Rechts oben hast du einen edit button.

[Kahmoon]

Ja, den habe ich gesehen. Hatte aber Bedenken weil ich mir das erst forken muss?

Edit: 2 Changes eingereicht