it-swarm.com.de

Wie füge ich ein neues 'Klassen'-Attribut an ein benutzerdefiniertes Feld an? - twig drupal 8

Ich habe gerade angefangen, mit Drupal 8) herumzuarbeiten.

Ich möchte dem field_product_image die Klasse "center-block" hinzufügen.

<img class="img-responsive {new class}"/>

Wie mache ich das Jungs?
unten ist der Code twig)

   {% if content.field_product_image| render %}
    <div class="col-sm-3">
    {{ content.field_product_image }}
    </div>
    {% endif %}
    <div class="col-sm-9">
        {{ content.body }}
        {{ content.field_features }}
    </div>    
3
danuddara

Sie können das Modul Extra Image Field Classes überprüfen.

Dieses Modul hilft beim Hinzufügen benutzerdefinierter Klassen zum Bildfeld.

Mit dem Modul Zusätzliche Bildfeldklassen können Benutzer die CSS-Klasse auf das Bildfeld anwenden.

So fügen Sie dem Bildfeld benutzerdefinierte Klassen hinzu

  1. Gehen Sie zu "Anzeige verwalten" eines Entitätstyps
  2. Wählen Sie das Format "Zusätzliche Bildfeldklassen" aus der Spalte Format für das Bildfeld
  3. Klicken Sie auf das Einstellungsrad des Bildfelds
  4. Geben Sie CSS-Klassen in das Textfeld Bildklasse ein
  5. Klicken Sie auf die Schaltfläche "Aktualisieren"
  6. Denken Sie daran, auf die Schaltfläche "Speichern" zu klicken, nachdem Sie die erforderlichen Änderungen vorgenommen haben.

Gehen Sie auch zu hook_preprocess_field ()

Hinzufügen einer Klasse zu Standardbildern in Drupal 8

Klasse zum Feld hinzufügen in Drupal 8

Hinzufügen von CSS-Klassen zu einem bestimmten Bildfeld

2
DRUPWAY

Normalerweise würde ich sagen, dass Sie addClass() für die Variable image.attributes In Ihrem Bild Twig) aufrufen sollen, aber ich glaube, dass Bilder nicht viele Vorlagenvorschläge enthalten (alles geht durch image.html.twig) was bedeutet, dass Ihre Klasse zu allen Bildern hinzugefügt wird. Wahrscheinlich nicht das, wonach Sie suchen ...

Option eins: Überprüfen Sie die Variablen in image.html.twig Und prüfen Sie, ob sie Ihnen die Informationen liefern, die Sie benötigen, um zu bestimmen, wann die neue Klasse hinzugefügt werden soll. Wenn ja, tun Sie dies in der Vorlage Twig (attributes.addClass('new-class')).

Option 2: Implementieren Sie hook_preprocess_image in der Datei .theme Ihres Themas. Etwas wie das:

function MYTHEME_preprocess_image(&$variables) {
  if (some_way_to_figure_out_if_this_is_the_right_image) {
    $variables['attributes']['class'][] = 'new-class';
  }
}

Ich hoffe, das hilft. (Zur besseren Code-Formatierung bearbeitet).

5
mikeker