Obtenir l'URL de l'image à partir d'une image de champ sur un nœud

J'ai donc ce nœud:

object(Drupal\node\Entity\Node)[1862]
  protected 'values' => 
    array (size=17)
      'vid' => 
        array (size=1)
          'x-default' => string '7' (length=1)
      'langcode' => 
        array (size=1)
          'x-default' => 
            array (size=1)
              0 => 
                array (size=1)
                  'value' => string 'en' (length=2)
      ... (more fields)
      'field_image' => 
        array (size=1)
          'x-default' => 
            array (size=1)
              0 => 
                array (size=5)
                  'target_id' => string '1' (length=1)
                  'alt' => string '' (length=0)
                  'title' => string '' (length=0)
                  'width' => string '150' (length=3)
                  'height' => string '120' (length=3)

Désormais, field_image a un tableau avec x-default et quelques données d'image de base. Comment puis-je afficher l'image ou créer un lien vers l'image à l'intérieur du modèle Twig?

Voici une version mise à jour de cette réponse après la version 8.0.x. Cette base sur @joelpittet commente.

{{ file_url(node.field_image.entity.fileuri) }}

Je ne sais pas à propos de Twig, mais vous obtenez le fichier URI avec $node->field_image->entity->getFileUri()PHP, et vous devez faire appel file_create_url()à cela:

file_create_url($node->field_image->entity->getFileUri())

Je ne sais pas si c'est possible dans twig. Si ce n'est pas possible, vous pouvez toujours le calculer en prétraitement et l'ajouter en tant que nouvelle variable.

Si quelqu'un avait besoin d'une image stylée:

$styled_image_url = ImageStyle::load('large')->buildUrl($node->field_image->entity->getFileUri());

Aucune des solutions de brindille ci-dessus ne fonctionnait pour moi (celles-ci fonctionnaient peut-être pour les anciennes versions 8.x mais pas pour la version 8.5

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

NOTE: devrait fonctionner pour Drupal 8.5+

J'ai donc trouvé la réponse avec l'aide de Clive .

Obtenir l'URI de l'image dans Twig se fait en utilisant node.field_image.0.entity.uri.value

Obtenir l’URL complète de l’image peut être fait en utilisant file_create_url(node.field_image.0.entity.uri.value)

Faire cela dans Twig n'est pas encore possible mais ils y travaillent -> voir ici

Ce qui a fini par travailler pour moi en D8, c'est:

$imageUrl = $node->get('field_image')->entity->uri->value;

Utiliser kint($node->get('field_image')->entity)et regarder à travers le tableau était très utile

Ensuite, dans mon fichier de brindille, j'ai utilisé:

<img class="top-article-image" src="{{ file_url(imageUrl) }}" />

vous pouvez obtenir l'URL directement en utilisant field_image.entity.url

J'utilise toujours une fonction d'assistance

  /**
   * Get the Image URI.
   *
   * @param \Drupal\Core\Entity\Entity $entity
   * @param $fieldName
   * @param bool $imageStyle
   * @return mixed
   */
  public function getImageUri(\Drupal\Core\Entity\Entity $entity, $fieldName, $imageStyle = FALSE) {
    $imageField = $entity->get($fieldName)->getValue();
    if (!empty($imageField[0]['target_id'])) {
      $file = File::load($imageField[0]['target_id']);
      if ($imageStyle) {
        return ImageStyle::load($imageStyle)->buildUrl($file->getFileUri());
      }

      // Original URI.
      return file_create_url($file->getFileUri());
    }
  }

Si vous souhaitez obtenir l'URL d'image avec le style d'image associé pour tout champ d'image d'un modèle de brindille, procédez comme suit:

Commencez par installer le module Twig Tweak

Définissez ensuite l'URI de l'image en tant que variable. Avec l'URI, vous pouvez utiliser un motif de modifications de brindilles pour obtenir le chemin d'accès, quel que soit le style d'image souhaité. Voir ci-dessous:

{% set image_uri = content.field_feature_row_image['#items'].entity.uri.value %}

<img src="{{ image_uri|image_style('image1200x1103') }}"/>

Twig Tweak v2.4 + offre un file_urlfiltre pour extraire l'URL du fichier d'une entité.

<img src="{{ node.field_image|file_url|image_style('image1200x1103') }}"/>

J'avais le même problème, alors j'ai créé une get_image_path()fonction Twig et je l'ai ajoutée avec un tas d'autres choses utiles dans mon module de base standard:

https://github.com/brynj-digital/starter

La fonction accepte le champ d'image et le nom d'ordinateur d'un style d'image, puis renvoie ce chemin d'accès.

Il travaille dans beaucoup de contextes - vous pouvez passer node.field_name, content.field_nameou row._entity.field_name(dans le cas d'un modèle Voir les champs).

Mon dieu, il a fallu à mon âge de comprendre pourquoi mes URL résultantes ne fonctionnaient pas. Le tout 404'ed. Vous devez d'abord créer un dérivé s'il n'existe pas déjà .

Ainsi, par exemple, lorsque vous ajoutez un style d'image ultérieurement, une fois l'image d'origine téléchargée, aucun fichier d'image de style n'est encore créé (le dérivé de l'image). Il faut d'abord le créer.

Remplacez field_MYIMAGEet MYSTYLEselon vos besoins.

$original_image = $node->field_MYIMAGE->entity->getFileUri();
$style = \Drupal::entityTypeManager()->getStorage('image_style')->load('MYSTYLE');

$destination = $style->buildUri($original_image);
if (!file_exists($destination)) {
  $style->createDerivative($original_image, $destination);
}

$url = $style->buildUrl($original_image);

Je souhaite que cela se produise automatiquement.

quelque chose de relatif, voici ce que j’ai utilisé (grâce à toutes les réponses précédentes pour me rendre là-bas) pour obtenir une URL de fichier image à partir du champ d’image d’une entité multimédia en twig:

{% set media_img_url = file_url(content.field_media_image.0['#item'].entity.uri.value) %}

maintenant je peux utiliser cette variable dans mon modèle de brindille

{{ media_img_url }}

Pour obtenir un attribut d'image tel que URI, alt, titre, etc., utilisez la syntaxe suivante:

Dans le modèle de noeud de brindille

{{node.field_name.entity.fileuri}}

Modèle de brindille de champ

{{content.field_name.entity.fileuri}}

Dans un autre gabarit de champ

{{element['#object'].field_name.entity.fileuri}}

Remarque: Vérifiez également twig_tweaks module antisèche pour les détails liés à la brindille question connexe.

Vous pouvez utiliser la url()méthode de la classe File comme raccourci pour:

{{ file_url(node.field_image.entity.fileuri) }}

peut être raccourci à:

{{ node.field_image.entity.url }}

Cela fonctionne dans les fonctions de prétraitement, mais déclenche un Twig_Sandbox_SecurityErrorlorsqu’il est appelé dans un modèle de brindille.

Si vous recevez, Twig_Sandbox_SecurityErrorvous pouvez indiquer à twig d'autoriser urlvotre fichier settings.php comme indiqué dans cet article de Stackoverflow

Voir la documentation sur File :: Url () https://api.drupal.org/api/drupal/core%21modules%21file%21src%21Entity%21File.php/function/File%3A%3Aurl/8.6.x

Vous pouvez le faire de deux manières!

1) file_create_url (---------) // à l'intérieur écrit le chemin du noeud

2) file_url (-------) // à l'intérieur écrit le chemin du noeud