Bild-URL in Twig abrufen

Ich möchte ein Bild als Hintergrundbild über einen Inline-Stil in Zweig rendern. Ich habe ein Feld mit dem Namen bg_image erstellt und es an die normale Seite angehängt.

Nachdem ich stundenlang herumgespielt hatte, konnte ich die Bild-URL in node.html.twig abrufen

{{ file_url(node.field_bg_image.0.entity.uri.value) }}

Aber ich konnte es nicht zum Laufen bringen - field-bg_image.html.twig

Kann ich den Knoten trotzdem von dort bekommen, um dann das Bild zu bekommen?

Wie kann ich die Bild-URL als Inline-Stil verwenden? Ich dachte, ich kann vielleicht eine Variable von field-bg_image.html.twig an image.html.twig übergeben und dann einfach rendern

{{ uri }}

anstatt

<img{{ attributes.addClass(classes) }} />

aber ich konnte es nicht bekommen, um die Variable dort zu übergeben, es sei denn, ich benutze Includes

{% include 'image.html.twig' with {'image': image, 'isFromField': isFromField} %}

(isFromField ist wahr, wenn es vom Feld kommt - field-bg_image.html.twig) Aber das hat auch nicht funktioniert. Das Bild wurde nie so gerendert.

Würde mich sehr freuen, wenn ihr helfen könnt - meine PHP Kenntnisse sind sehr grundlegend. Vielen Dank

Die Variable nodeist nur in der Knotenvorlage (und der Seitenvorlage, wenn die URL den Knoten enthält) vorinstalliert. Wenn Sie nun in einer Feldvorlage auf Knotenfelder zugreifen möchten, müssen Sie an einer anderen Stelle suchen:

field.html.twig:

{{ file_url(element['#object'].field_image.0.entity.uri.value) }}

element['#object'] ist die übergeordnete Entität in einer Feldvorlage, und Sie können von dieser Entität aus auf jedes Feld zugreifen (in Ihrem Fall auf den Knoten).

Wenn Sie auf Rohwerte aus dem tatsächlichen Feld zugreifen möchten, ist es besser, der Logik des Feldzweigs zu folgen und direkt über das Feldelementobjekt auf den Wert in der Elementschleife zuzugreifen #item:

{% for item in items %}
  {{ file_url(item.content['#item'].entity.uri.value) }}
{% endfor %}

Bearbeiten: Ruft die URL eines Bildstils ab

Wenn Sie das Modul Twig Tweak installieren , können Sie mit der URL die URL eines Bildstils abrufen :

{% for item in items %}
  {{ item.content['#item'].entity.uri.value | image_style('thumbnail') }}
{% endfor %}

Nur um zu erwähnen, dass dies funktioniert, wenn Sie dasselbe in einem der neuen benutzerdefinierten Blöcke tun möchten:

{{ file_url(content.field_image['#items'].entity.uri.value) }}

Ich benutze diesen Code in meiner .theme-Datei:

function THEMENAME_preprocess_node(&$variables) {

  if ($variables['node']->field_image->entity) {
      $variables['image_url'] = $url = entity_load('image_style', 'medium')->buildUrl($variables['node']->field_image->entity->getFileUri());
  }
}

Es könnte verbessert werden. Ich überprüfe das Bildfeld und lade dessen URL mit einem Bildstil.

Dann habe ich in meiner Datei node - page.html.twig folgendes:

{% if image_url is not empty %}
    <div class="featured-thumb">
        <img src="{{ image_url }}"/>
    </div>
{% endif %}

<div>{{ content.body|without('field_image') }}</div>

Auch dies könnte verbessert werden. Vielen Dank

Ich würde es anders machen. In Ihrer Knotenvorverarbeitungsfunktion:

use Drupal\image\Entity\ImageStyle; // Don't forget this use.

function THEMENAME_preprocess_node__NODETYPE(&$variables){
    $node = $variables['node'];

    if(isset($node->get('field_image')->entity)){
        $image_style = 'large'; // Or whatever your image style's machine name is.
        $style = ImageStyle::load($style);
        $variables['image'] = $style->buildUrl($node->get('field_image')->entity->getFileUri()); // Generates file url.
    }
}

Dann rendern Sie das Bild in Ihrer Vorlage (node ​​- NODETYPE.html.twig) einfach so:

{% if image %}
    <img src="{{ image }}" />
{% endif %}

Wenn Sie jedoch jemals eine große Menge von Bildern rendern müssen, empfehle ich Ihnen, die Stile in ein Array zu laden, bevor Sie die einzelnen Bilder in einer Schleife wiedergeben. Ich sage das, weil ich auf ernsthafte Ladezeitprobleme gestoßen bin, weil ich über 300 Bilder laden musste und für jedes Bild den Stil einzeln geladen habe, anstatt sie alle vorher zu laden. Hier ist ein Beispiel, dieselbe Basis wie oben:

use Drupal\image\Entity\ImageStyle; // Don't forget this use.

function THEMENAME_preprocess_node__NODETYPE(&$variables){
    $node = $variables['node'];

    if(isset(node->get('field_images')[0]->entity)){ // Notice how, this time, I check if the FIRST image is set (if it's true, then u'll allow the loop for at least 1 element)
        $images_styles = [
            'large' => ImageStyle::load('large'),
            'thumbnail' => ImageStyle::load('thumbnail')
        ];
        $count = 0;

        foreach($node->get('field_images') as $image){
            $variables['images'][$count]['large'] = $images_styles['large']->buildUrl($image->getFileUri());
            $variables['images'][$count]['thumbnail'] = $images_styles['thumbnail']->buildUrl($image->getFileUri());
            $count++;
        }
    }
}

Dann rendern Sie die Bilder in Ihrer Vorlage (node ​​- NODETYPE.html.twig) einfach so:

{% if images %}
    <ul>
        {% for image in images %}
            <li>
                <img src="{{ image.large }}" /> // Large image url.
                <img src="{{ image.thumbnail }}" /> // Thumbnail image url.
            </li>   
        {% endfor %}
    </ul>
{% endif %}

Ich habe es nicht wirklich getestet und das alles geht mir durch den Kopf, so dass es möglicherweise Fehler enthält. Sie können mich jederzeit warnen, damit ich das korrigiere :-).

Ich hatte einige Erfolge mit dem Hintergrundbildmodul, wenn der Anwendungsfall dies zulässt. Ich verwende eine dieser Codeoptionen, wenn ich eine angepasste DOM-Struktur benötige.