Drupal 8 Bootstrap: Wie füge ich die ing-responsive Klasse zu Bildern hinzu?

Ich erstelle ein Bootstrap-Sub-Theme für Drupal 8. Zuvor habe ich Drupal 7 benutzt (mit einigen Schwierigkeiten), aber ich möchte mit Drupal 8 für eine neue Site fortfahren und bin ein bisschen über meine Schultern. Ich habe Probleme, Zweig und die Dokumentation zu verstehen, die ich gefunden habe. Zum Beispiel möchte ich, dass Bilder standardmäßig reagieren. Ich habe die Responsive Images in den Einstellungen, die Bootstrap bietet, aktiviert. Der Kommentar sagt:Drupal 8 Bootstrap: Wie füge ich die ing-responsive Klasse zu Bildern hinzu?

Bilder in Bootstrap 3 kann der .img-responsive Klasse reaktionsfreundlich über die Zugabe gemacht werden. Dies gilt für maximale Breite: 100%; und Höhe: Auto; auf das Bild, so dass es schön auf das Elternelement Element skaliert.

Aber wie füge ich die Klasse zu Bildern hinzu? Bearbeite ich die Twig-Dateien oder kann das einfacher gemacht werden? Das „templates/system/image.html.twig“ enthält bereits den Code:

{% set classes = [ 
    theme.settings.image_shape ? theme.settings.image_shape, 
    theme.settings.image_responsive ? 'img-responsive', 
] %} 
<img{{ attributes.addClass(classes) }} />

Für mich sieht aus wie es bereits die Klasse anwenden soll ich, wenn die ansprechende Bild Option will markiert ist?

Jede Führung wäre sehr willkommen!

Quelle

2016-06-17 Simon Lindén

Ok, es scheint, als ob der obige Code die img-responsive-Klasse zu Bildern hinzufügt, die als Bildfeld eingefügt werden, aber nicht als Inline-Bilder. Das ist gut genug für mich, da ich nicht glaube, dass Inline-Bilder reaktionsfähig sind. –

Habe das gleiche Problem mit Subtheme basierend auf Bootstrap Basisthema in Drupal 8. Gestapelt darauf seit einigen Stunden. In meinem Fall werden die Bilder von der Core image.html.twig Datei ('themes/bootstrap/templates/system/image.html.twig') gerendert. Ich brauche die Bilder auf einer bestimmten Seite einer Klasse .img-circle . Ich habe versucht, Präprozessor-Funktion:

function artom_preprocess_field(&$variables, $hook) { 
 

 
    $element = $variables['element']; 
 

 
    if ($element['#field_name'] == 'field_team_member_headshot') { 
 
    $variables['items'][0]['content']['#options']['attributes']['class'][] = 'img-circle'; 
 
    }

Aber es würde die Bilder zu ändern, um .img-Kreis auf allen Seiten.

Ein weiterer Rundgang fand ich - durch erneutes Schreiben der Ergebnisse des Feldes in der Ansicht (Unter Format -> Felder anzeigen -> Einstellungen) und mit dem Token aus Ersatzmuster. Aber ID hat auch nicht funktioniert.

Quelle

2016-08-15 12:47:56 Art

Drupal 8 Bootstrap: Wie füge ich die ing-responsive Klasse zu Bildern hinzu?

Antwort

Verwandte Themen