Obtenir l'URL d'une image dans un template twig paragraph Drupal

Parfois, il peut être utile d'accéder à l'URI brut ou à l'URL du fichier d'une image envoyée avec un champ de référence media dans Drupal 8.

Pour répondre à un besoin spécifique du template, vous pouvez avoir besoin de l'URL du fichier image plutôt que de vouloir que Drupal rende l'image et la structure  HTML (markup) qui enveloppe l'image. 

Dans un template twig, utilisez simplement la syntaxe suivante, en remplaçant le nom de champ par le nom machine (machine name) de ce champ Media personnalisé :

{% if paragraph.field_custom_image is not empty %}
  {{ file_url(paragraph.field_custom_image.entity.field_media_image.entity.fileuri) }}
{% endif %}

Ce code fonctionne très bien pour les champs Media. Mais les champs Média fonctionnent différemment des champs natifs Image dans Drupal 8. Si votre champ utilise un type de champ Image, plutôt qu'un champ Média (référence d'entité), vous devrez alors utiliser la syntaxe suivante à la place :

{{ file_url(paragraph.field_custom_image.entity.uri.value) }}

Si vous avez besoin d'accéder à la valeur alt de l'image :

{{ content.field_custom_image['#items'].alt }}

La valeur du titre pour le champ :

{{ content.field_custom_image['#items'].title }}

Voilà par exemple un exemple concret ou l'on peut avoir besoin de l'url. Le contributeur envoie une image dans le BO pour son contenu. En front, l'image s'affiche en background avec du CSS in-line :

<div class="icn" style="background-image: url('{{ file_url(paragraph.field_icone.entity.uri.value) }}');"></div>

 

Ajouter un commentaire

HTML restreint

  • Balises HTML autorisées : <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Les lignes et les paragraphes vont à la ligne automatiquement.
  • Les adresses de pages web et les adresses courriel se transforment en liens automatiquement.

Contact_

Une idée de projet, une recherche de conseil, une mission intégration ou développement ? N’hésitez pas à me contacter.