So machen Sie das Hero-Image für jede Node-Seite in Drupal 8 dynamisch

Was ist ein Hero Image?
Im Webdesign ist ein Hero Image ein großes Bannerbild, das prominent auf einer Webseite platziert wird, in der Regel im Vordergrund oder in der Mitte. Das Hero Image ist oft das erste visuelle Element, dem ein Besucher auf der Seite begegnet. Ein Hero Image besteht oft aus Bild und Text und kann statisch oder dynamisch sein (z. B. eine rotierende Liste von Bildern und/oder Themen).

Der wichtigste Vorteil eines Hero Images ist, dass es sofort die Aufmerksamkeit des Besuchers fesselt.

Da Menschen positiv auf visuelle Inhalte reagieren, ist ein hochauflösendes Bild auf Ihrer Website eine gute Möglichkeit, Besucher dazu zu bewegen, Ihre Website weiter zu erkunden.

Grundsätzlich sollte jede Seite Ihrer Website ein eigenes, inhaltspezifisches Hero Image haben.

Lassen Sie uns nun lernen, wie man ein Hero Image für jede Node-Seite in Drupal 8 dynamisch gestaltet.
 

Fall 1: Wir haben mehrere Inhaltstypen mit zugehörigen Hero Images

Wir können die page.html.twig für jeden Inhaltstyp überschreiben und ein Bild für jede spezifische Seite über einen statischen Pfad hinzufügen.

Zum Beispiel, wenn wir 5 verschiedene Inhaltstypen in Drupal haben:

1. Basic
2. Artikel
3. Dienstleistungen
4. Kontakt
5. Blog

Wir können node.html.twig mit einem spezifischen Inhaltstyp wie folgt überschreiben:

Page--node--basic.html.twig
Page--node--article.html.twig
Page--node--services.html.twig
Page--node--contact-us.html.twig
Page--node--blog.html.twig

Fügen Sie nun ein Hero Image mit einem statischen Bildpfad in der jeweiligen Vorlage hinzu.

Fall 2: Wir haben mehrere Nodes desselben Inhaltstyps mit unterschiedlichen Hero Images.

Die oben gezeigten Schritte funktionieren nicht, da es nicht einfach ist, page.html.twig für jede einzelne Node zu überschreiben.

In diesem Fall fügen wir also ein Bildfeld im erforderlichen Inhaltstyp hinzu und rendern diesen Bildfeldpfad auf page.html.twig, wodurch das Bild beim Erstellen jeder Node-Seite dynamisch als Hero Image angezeigt wird.

Lassen Sie uns das Hero Image für den Inhaltstyp Blog dynamisch gestalten.

1. Erstellen Sie einen Inhaltstyp Blog.
2. Gehen Sie zu "Felder verwalten" und fügen Sie ein Bildfeld mit dem Namen Hero Image hinzu (maschinenlesbarer Name: hero_image).
3. Überschreiben Sie die page.html.twig-Vorlage mit

page--node--blog.html.twig

Geben Sie das Hero Image Node-Feld in page--node--blog.html.twig am Anfang der Seitenvorlage (Hero Image-Bereich) oder wo immer es benötigt wird aus.                            

<img src="{{ file_url(node.field_hero_image.entity.fileuri) }}"/>

Überschreiben Sie die node.html.twig-Vorlagendatei mit node--blog.html.twig 
 

Blenden Sie dieses Hero Image-Feld in node-blog.html.twig aus.

{{content|without('comment’, ‘links’, ‘hero_image’) }}

Geschafft!! Wir sind fertig.

Laden Sie ein Bild hoch, während Sie den Blog erstellen, und dies macht Ihr Titelbild dynamisch und spezifisch für Ihre Node.