web-dev-qa-db-fra.com

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)

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

media8theming
44
Rias

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

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

Je ne sais pas pour Twig, mais vous obtenez l'URI du fichier avec $node->field_image->entity->getFileUri() en PHP, et vous devez appeler file_create_url() à ce sujet:

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

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

39
Berdir

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

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

Aucune des solutions ci-dessus twig solutions a fonctionné pour moi (peut-être celles qui fonctionnaient pour les anciennes versions 8.x mais pas pour la version 8.5)

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

REMARQUE: devrait fonctionner pour Drupal 8.5 +

11
GiorgosK

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

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

L'obtention de l'URL complète de l'image peut être effectuée à l'aide de file_create_url(node.field_image.0.entity.uri.value)

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

7
Rias

Ce qui a fini par fonctionner pour moi en D8 est:

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

Utiliser kint($node->get('field_image')->entity) et parcourir le tableau a été très utile

enter image description here

Puis dans mon fichier twig j'ai utilisé:

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

C'est la façon si vous souhaitez obtenir l'URL de l'image avec le style d'image associé pour n'importe quel champ d'image dans un modèle twig:

Installez d'abord le module Twig Tweak

Définissez ensuite l'URI de l'image en tant que variable. Avec l'URI, vous pouvez utiliser un modèle twig tweaks pour obtenir le chemin avec le style d'image que vous souhaitez. 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 + propose file_url filtre pour extraire l'URL du fichier d'une entité.

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

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

2
Adrian Kremer

J'utilise toujours une fonction d'aide

  /**
   * 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());
    }
  }
2
hugronaphor

Vous pouvez utiliser la méthode url() qui se trouve sur la classe File comme raccourci:

{{ 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_SecurityError lorsqu'il est appelé dans un modèle twig.

Si vous recevez Twig_Sandbox_SecurityError vous pouvez dire twig pour autoriser url dans votre fichier settings.php comme mentionné dans ce Stackoverflow post

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

0
Kiee

Pour obtenir un attribut d'image comme URI, alt, title, etc., utilisez la syntaxe comme ci-dessous pour le modèle.

Dans le nœud twig template

{{node.field_name.entity.fileuri}}

Dans le champ twig template

{{content.field_name.entity.fileuri}}

Dans un autre domaine twig template

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

Remarque: Vérifiez également twig_tweaks module aide-mémoire pour plus de détails sur twig.

0
Prem Patel

J'ai eu le même problème, j'ai donc créé une fonction get_image_path() Twig et l'ai ajoutée avec un tas d'autres choses utiles à mon module de démarrage passe-partout:

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

La fonction accepte le champ d'image et le nom de machine d'un style d'image, puis renvoie ce chemin d'image.

Cela fonctionne dans de nombreux contextes - vous pouvez passer node.field_name, content.field_name ou row._entity.field_name (dans le cas d'un modèle de champs View).

0
user34185

quelque peu lié, voici ce que j'ai utilisé (grâce à toutes les réponses précédentes pour y arriver) pour obtenir une URL de fichier image à partir du champ d'image d'une entité multimédia dans 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 twig

{{ media_img_url }}
0
bdanin

Mon Dieu, il m'a fallu des âges pour savoir 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 plus tard, après le téléchargement de l'image d'origine, il n'y a pas encore de fichier d'image de style (le dérivé de l'image). Il doit d'abord être créé.

Remplacer field_MYIMAGE et MYSTYLE selon 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.

0
leymannx