web-dev-qa-db-fra.com

Comment obtenir une URL d'image à partir d'un champ dans un modèle twig

J'ai un nœud qui contient divers champs. Je peux obtenir les valeurs des champs de texte mais pas un champ d'image. Vous trouverez ci-dessous la sortie pertinente de la variable de noeud en cours de vidage dans le modèle twig:

 'field_main_image' => 
    object(Drupal\field\Entity\FieldConfig)[1312]
      protected 'deleted' => boolean false
      protected 'fieldStorage' => null
      protected 'id' => string 'node.homepage.field_main_image' (length=30)
      protected 'field_name' => string 'field_main_image' (length=16)
      protected 'field_type' => string 'image' (length=5)
      protected 'entity_type' => string 'node' (length=4)
      protected 'bundle' => string 'homepage' (length=8)
      protected 'label' => string 'Main image' (length=10)
      protected 'description' => string '' (length=0)
      protected 'settings' => 
        array (size=12)
          ...
      protected 'required' => boolean false
      protected 'translatable' => boolean false
      protected 'default_value' => 
        array (size=0)
          ...
      protected 'default_value_callback' => string '' (length=0)
      protected 'itemDefinition' => null
      protected 'constraints' => 
        array (size=0)
          ...
      protected 'originalId' => string 'node.homepage.field_main_image'     (length=30)
      protected 'status' => boolean true
      protected 'uuid' => string 'f40a7a65-18a5-4ced-85b0-ab1cdc41b2f5' (length=36)
      private 'isSyncing' (Drupal\Core\Config\Entity\ConfigEntityBase) => boolean false
      private 'isUninstalling' (Drupal\Core\Config\Entity\ConfigEntityBase) => boolean false
      protected 'langcode' => string 'en' (length=2)
      protected 'third_party_settings' => 
        array (size=0)
          ...
      protected '_core' => 
        array (size=0)
          ...
      protected 'trustedData' => boolean false
      protected 'entityTypeId' => string 'field_config' (length=12)
      protected 'enforceIsNew' => null
      protected 'typedData' => null
      protected 'cacheContexts' => 
        array (size=0)
          ...
      protected 'cacheTags' => 
        array (size=0)
          ...
      protected 'cacheMaxAge' => int -1
      protected '_serviceIds' => 
        array (size=0)
          ...
      protected 'dependencies' => 
        array (size=2)
          ...

J'ai vu des questions similaires sur SE, comme celle-ci Obtenir l'URL de l'image à partir d'une image de champ sur un nœud , mais aucune des réponses n'a fonctionné pour moi.

Merci d'avance pour toutes les réponses.

themingmedia
8
Adeleke Akinade

Un champ d'image stocke l'ID du fichier dans target_id. Vous pouvez accéder à l'ID de fichier avec:

{{ node.field_main_image.target_id }}

Il existe une deuxième propriété dans le champ image. Il s'agit de l'entité référencée, en l'occurrence l'objet fichier. Ceci n'est pas visible dans la sortie de débogage, car il est calculé:

{{ node.field_main_image.entity }}

Dans l'objet fichier, vous trouverez le champ uri

{{ node.field_main_image.entity.uri.value }}

que vous pouvez utiliser pour obtenir l'url de l'image d'origine

{{ file_url(node.field_main_image.entity.uri.value) }}

ou l'url d'un style d'image

{{ node.field_main_image.entity.uri.value | image_style('thumbnail') }}

Le filtre pour le style d'image fait partie de ce module que vous devez installer:

https://www.drupal.org/project/twig_Tweak

19
4k4

Vous ne pouvez pas obtenir l'URL de l'image directement dans le modèle twig car les champs d'image n'ont que l'ID du fichier image. Chaque image dans Drupal 8 est une entité de fichier).

Vous pouvez essayer dans template_preprocess_node():

$image_file_id = $variables['node']->field_image[0]->target_id;
$image_file = \Drupal\file\Entity\File::load($image_file_id);
$uri = $image_file->uri->value;
$variables['url']=file_create_url($uri);
6
Andrew Nim
<article{{ attributes.addClass(classes) }}>
<div>
    <img src="{{ file_url(node.field_image.entity.uri.value) }}">
</div>
<div{{ content_attributes.addClass('content') }}>
    {{ content|without('field_image') }}
</div>
  1. {{file_url (node.field_image.entity.uri.value)}}

Par cela, vous pouvez obtenir le champ d'image du nœud dans le modèle twig.

  1. {{content | without ('field_image')}}

Par cela, vous obtiendrez le contenu sans champ d'image de nœud.

1
Wasim Khan