Ottieni l'URL dell'immagine in Twig

Voglio renderizzare un'immagine come immagine di sfondo tramite uno stile in linea in ramoscello. Ho creato un campo chiamato bg_image e l'ho allegato alla pagina normale standard.

Dopo aver armeggiato per ore sono stato in grado di ottenere l'URL dell'immagine in node.html.twig

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

ma non sono riuscito a farlo funzionare all'interno del campo - field-bg_image.html.twig

Posso ottenere il nodo da lì comunque, così posso quindi ottenere l'immagine?

Come posso ottenere l'URL dell'immagine da utilizzare come stile in linea? Ho pensato che forse potrei passare una variabile dal campo - field-bg_image.html.twig a image.html.twig e poi renderizzare

{{ uri }}

invece di

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

ma non sono riuscito a far passare lì la variabile a meno che non utilizzi include

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

(isFromField è vero, quando viene dal campo - field-bg_image.html.twig) Ma neanche quello ha funzionato. L'immagine non è mai stata resa in questo modo.

Sarei molto felice se mi potessi aiutare - la mia conoscenza del php è molto semplice. Grazie

La variabile nodeviene precaricata solo nel modello di nodo (e nel modello di pagina, se l'URL contiene il nodo). Ora se vuoi accedere ai campi del nodo in un modello di campo devi cercare in un posto diverso:

field.html.twig:

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

element['#object'] è l'entità padre in un modello di campo e puoi accedere a qualsiasi campo da questa entità (nel tuo caso il nodo).

Se si desidera accedere ai valori non elaborati dal campo effettivo, è meglio seguire la logica del ramoscello del campo e accedere al valore all'interno del ciclo degli articoli direttamente dall'oggetto oggetto del campo #item:

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

Modifica: ottieni l'URL di uno stile di immagine

Installa il modulo Twig Tweak e puoi usare l'uri per ottenere l'URL di uno stile di immagine:

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

Solo per dire che se vuoi fare lo stesso in uno dei nuovi blocchi personalizzati, questo funziona:

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

Uso questo codice nel mio file .theme:

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());
  }
}

Potrebbe essere migliorato. Sto verificando il campo dell'immagine e sto caricando l'URL con uno stile di immagine.

Quindi nel mio nodo - file page.html.twig ho questo:

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

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

Ancora una volta, ciò potrebbe usare qualche miglioramento. Grazie

Lo farei in un altro modo. Nella funzione di preelaborazione del nodo:

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.
    }
}

Quindi, nel tuo modello (nodo - NODETYPE.html.twig), esegui il rendering dell'immagine in questo modo:

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

Sebbene, se mai dovessi eseguire il rendering di una grande quantità di immagini, ti consiglierei di caricare gli stili in un array prima di eseguire il loop su ciascuna immagine. Sto dicendo che poiché ho riscontrato seri problemi di tempo di caricamento perché ho dovuto caricare oltre 300 immagini e per ogni immagine, stavo caricando lo stile singolarmente invece di caricarle tutte prima, ecco un esempio, stessa base di cui sopra:

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++;
        }
    }
}

Quindi, nel tuo modello (nodo - NODETYPE.html.twig), esegui il rendering delle immagini in questo modo:

{% 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 %}

Non l'ho davvero testato e me lo sto togliendo dalla testa in modo che possa contenere errori, sentitevi liberi di avvisarmi quindi correggerò questo :-).

Ho avuto un certo successo usando il Modulo immagine di sfondo quando il caso d'uso lo consente. Uso una di queste opzioni di codice quando ho bisogno di una struttura DOM personalizzata.