Ergebnis 1 bis 13 von 13

Thema: Twig: Bildern immer eine Klasse geben

  1. #1
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.300

    Standard Twig: Bildern immer eine Klasse geben

    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

  2. #2
    Contao-Fan
    Registriert seit
    24.02.2021.
    Beiträge
    984
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Kahmoon Beitrag anzeigen
    ..anscheinend kann man in C5 nicht mehr klassisch arbeiten!?
    Kannst du, wenn du eine contao/config.php erstellst und folgendes einträgst:
    PHP-Code:
    <?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
    Code:
    {# 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
    Code:
    {# 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
    Geändert von zoglo (21.03.2024 um 20:00 Uhr)

  3. #3
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.300

    Standard

    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.

    Code:
    {% 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')
    %}

  4. #4
    Alter Contao-Hase Avatar von bizon
    Registriert seit
    16.06.2010.
    Beiträge
    1.125

    Standard

    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
    PHP-Code:
    {% 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
    Geändert von bizon (21.03.2024 um 21:22 Uhr)

  5. #5
    Alter Contao-Hase Avatar von bizon
    Registriert seit
    16.06.2010.
    Beiträge
    1.125

    Standard

    Ergänzung:
    Man kann auch dem Inhaltselement: content-text selbst über das Template eine Klasse zuweisen.
    PHP-Code:
    {# wird zu <content-text class="img-fluid"> #}
    {% block attributes %} 
        {% 
    set attributes attrs(attributes|default).addClass('img-fluid') %}
        {{ 
    parent() }}
    {% 
    endblock %} 

  6. #6
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.300

    Standard

    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.

  7. #7
    Alter Contao-Hase Avatar von bizon
    Registriert seit
    16.06.2010.
    Beiträge
    1.125

    Standard

    Zitat Zitat von kahmoon
    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.

  8. #8
    Alter Contao-Hase Avatar von bizon
    Registriert seit
    16.06.2010.
    Beiträge
    1.125

    Standard

    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.:
    Code:
    contao:
        image:
            sizes:
                _defaults:
                    css_class: img-fluid
                    formats:
                        jpg: [jpg, webp]
    			...
    			...
    Und wieder: Lies die Docs.

  9. #9
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.300

    Standard

    Zitat Zitat von bizon Beitrag anzeigen
    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.

  10. #10
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.300

    Standard

    In der Doc ist übrigens ein Fehler. Da fehlt ein Hochkomma im Snipped
    Angehängte Grafiken Angehängte Grafiken

  11. #11
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    Rechts oben hast du einen edit button.
    » sponsor me via GitHub or PayPal or Revolut

  12. #12
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.300

    Standard

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

    Edit: 2 Changes eingereicht
    Geändert von Kahmoon (22.03.2024 um 12:39 Uhr)

  13. #13
    Contao-Nutzer Avatar von delirius
    Registriert seit
    17.01.2011.
    Ort
    Aarau
    Beiträge
    186
    Partner-ID
    6722

    Standard

    Die Attribute von img-Tag können über img_attributes definiert werden.

    Code:
    {% extends "@Contao/content_element/text.html.twig" %}
    
    {% set img_attributes = attrs(img_attributes|default).addClass('img-fluid') %}

    Wenn du eine separate Bildgrösse definiert hast, kannst du auch bei den Bildgrössen -> Experteneinstellungen eine CSS-Klasse mitgeben.

    bildgroesse_css_klasse.png
    Daniel Herren www.delirius.ch

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •