it-swarm.com.de

So fügen Sie dem Image-Tag eine Klasse hinzu

Die Eingabe in die Datei field.html.twig sieht normalerweise folgendermaßen aus:

{% for item in items %}
<div{{ attributes }}>{{ item.content }}</div>
{% endfor %}

Und Sie erhalten die Ausgabe in HTML wie folgt:

<div><img src="path/to/image/image.png" alt="my wonderful image"></div>

Aber ich möchte dem img-tag eine Klasse hinzufügen. Wie erhalte ich folgende Ausgabe:

<div><img class="img-fluid" src="path/to/image/image.png" alt="my wonderful image"></div>

Ich suche nach einer Lösung wie diese (Lösung in einem anderen Beitrag) , aber es funktioniert nicht. Kann jemand helfen?

2
lesley n.

Ich würde es vorziehen, das Bearbeiten von Vorlagen für so einfache Dinge wie das Hinzufügen nur von Klassen zu vermeiden. Ich würde empfehlen, Vorlagen nur zu bearbeiten, wenn Sie wirklich Änderungen am Markup vornehmen müssen.

Um Ihrem Bild eine einfache Klasse hinzuzufügen, benötigen Sie lediglich das folgende Snippet in der *.theme - Datei Ihres benutzerdefinierten (Unter-) Themas. (Ersetzen Sie MYTHEME durch den tatsächlichen Computernamen Ihres Themas). Dieser identifiziert das Bild anhand seines Bildstils (stellen Sie also sicher, dass ein eindeutiger Bildstil auf Ihr Bild angewendet wird):

/**
 * Implements template_preprocess_image().
 */
function MYTHEME_preprocess_image(&$variables) {

  // Check the image style.
  if ($variables['style_name'] == 'img_fluid') {

    // Set class.
    $variables['attributes']['class'][] = 'img-fluid';
  }
}

Wenn Sie die Klasse nicht direkt zum Tag img, sondern zu dessen Wrapping-Container hinzufügen möchten, können Sie auch das folgende Snippet verwenden. Sie können die if-Anfrage erweitern, da Sie nur bestimmte Inhaltstypen auslösen möchten (da Sie möglicherweise auch in anderen Inhaltstypen dasselbe Feld verwenden). auf $variables['element']['#object']->bundle() prüfen. Ersetzen Sie field_MYIMAGE Durch Ihren tatsächlichen Feldnamen.

/**
 * Implements template_preprocess_field().
 */
function MYTHEME_preprocess_field(&$variables) {

  // Check for your image field.
  if ($variables['element']['#field_name'] == 'field_MYIMAGE') {

    // Set class.
    $variables['attributes']['class'][] = 'img-fluid';
  }
}
3
leymannx

Sie können Ihrem Element zuerst Attribute hinzufügen und ihm dann eine Klasse hinzufügen. So was:

{{ item.content, item.attributes.addClass('img-fluid') }}

0
BMcCarrie

2 ist richtig. Jedoch; es hat Nachteile. Es gibt nämlich nichts in dem Array, das über $ Variablen übergeben wird, um ein img-Feld von einem anderen zu unterscheiden. In meinem Fall wollte ich Klassen hinzufügen, um die Bootstrap - Funktionalität zu unterstützen. ABER; ich möchte das nur in bestimmten Fällen tun.

Eine Zeile von jQuery hat es geschafft.

  $(".people-photo > img").addClass("card-img-top").removeAttr("width height");

Und Bonus: Mit derselben Zeile konnte ich leicht Höhen-/Breitenattribute entfernen, die Bootstrap überschreiben.

0
sea26.2