Ottieni un'immagine con URL di stile da un URI in un ramoscello

8

Quindi grazie a 4k4 sono finalmente riuscito a ottenere l'URI dell'immagine originale in un modello di campo tramite

item.content['#item'].entity.uri.value

e con

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

Vorrei ottenere l'URL del file originale.

Ho le informazioni sullo stile dell'immagine tramite

item.content['#item']['#image-style']

quel "mezzo" è richiesto

Una soluzione PHP è già disponibile qui , ma come posso farlo in TWIG?

Ci sono alcuni tentativi di creare un filtro per 8.1 qui , ma al momento non mi aiuta.

theming 8 uri media

— Jannis Hell
fonte

Dove vuoi usare l'immagine come sfondo, esattamente, un nodo o una pagina?

— kiamlaluno

3

È possibile inserire il codice php nella funzione di preelaborazione del modello di campo. Hai tutte le informazioni di cui hai bisogno nella tua domanda.

Ma poi faresti codifica, che è già in drupal. Se hai impostato # stile immagine nell'elemento di rendering immagine, il campo immagine deve essere configurato per le funzioni di preelaborazione che verranno successivamente nei modelli image-formattatore e stile immagine per mettere l'attributo src giusto nelle variabili per image-style.html.twig. Quindi puoi usare il codice che è già lì sovrascrivendo questo modello.

Vedi il codice in /core/module/image/image.module:

function template_preprocess_image_style(&$variables) {
  $style = ImageStyle::load($variables['style_name']);

  // Determine the dimensions of the styled image.
  $dimensions = array(
    'width' => $variables['width'],
    'height' => $variables['height'],
  );

  $style->transformDimensions($dimensions, $variables['uri']);

  $variables['image'] = array(
    '#theme' => 'image',
    '#width' => $dimensions['width'],
    '#height' => $dimensions['height'],
    '#attributes' => $variables['attributes'],
    '#uri' => $style->buildUrl($variables['uri']),
    '#style_name' => $variables['style_name'],
  );

— 4K4
fonte

1

Bene, il fatto è che non voglio che l'immagine venga renderizzata come uno <img>stile in linea come immagine di sfondo. Attualmente ottengo l'immagine corretta con lo stile come un <img>percorso del file originale o che è troppo grande da usare su una connessione non a banda larga, quindi voglio solo ottenere il percorso a quello sottoposto a down-sampling. E non voglio ignorare tutti i rendering delle immagini, ma l'unico campo. Certo, potrei hardwire hackerare il percorso dello stile, dal momento che conosco il nome file originale - ma sarebbe male.

— Jannis Hell,

Non è necessario ignorare tutte le immagini. Puoi scegliere come target quello desiderato con il suggerimento per il nome del tema o inserire una condizione nel ramoscello. Vorrei scegliere il secondo, perché il debug del ramoscello non fornisce alcun suggerimento per questo modello. Quindi sarebbe più facile senza la necessità di indagare sul suggerimento giusto di questo modello. L'hack hardwire non è consigliabile. Non sai se la dimensione dello stile dell'immagine corretta è nella cache.

— 4k4,

1

Avevo solo bisogno di fare anche questo. L'approccio giusto qui è quello di memorizzare l'URL dell'immagine in stile immagine in una variabile (tramite una funzione di preelaborazione), quindi quella variabile sarà disponibile nel tuo file ramoscello.

Ho scritto una funzione che otterrà qualsiasi file field_image e restituirà il nome del file originale o, se si specifica un nome di stile, restituirà l'URL dell'immagine in stile.

Nel mio .themefile:

function MYTHEME_preprocess_node(&$vars) {
  //get thumbnail images from field_image
  $vars['field_image_url'] = _var_image_url($vars, 'field_image', 'thumbnail');
}

//pull image field URL (original or styled)
function _var_image_url($vars, $field, $style_name = '') {
  if (!empty($vars['elements'][$field]['#object'])) {
    $fields = $vars['elements'][$field]['#object']->getFields();
    $image = $fields[$field]->getValue();

    if (!empty($image[0]['target_id'])) {
      $file = \Drupal\file\Entity\File::load($image[0]['target_id']);
      $uri = $file->getFileUri();

     if(!empty($style_name)) {
        $url = \Drupal\image\Entity\ImageStyle::load($style_name)->buildUrl($uri);
        return $url; //the styled URL
     } else {
        return file_create_url($uri); //original
     }
   }
 }
 return false;
}

Ora nel mio file ramoscello (node.html.twig, poiché ho usato la funzione preprocess_node):

<div class="banner" style="background-image:url({{ field_image_url }}"></div>

Questa funzione _var_image_url()deve essere chiamata dalla THEME_preprocess_node()funzione perché si aspetta un certo set up nel primo $varsargomento. Se provi a chiamarlo da preprocess_page, dovrai modificarlo.

— wheelercreek
fonte