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

42

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?

Rias
la source
Vous n'avez pas le temps de vérifier, mais peut-être aussi simple que url(node.field_image.0.entity.uri)( problème pertinent )
Clive
@Clive j'ai essayé ceci et m'a donné cette erreur: Recoverable fatal error: Object of class Drupal\Core\Field\FieldItemList could not be converted to string alors je l'ai essayé avec ceci: url(node.field_image.0.entity.uri.value)mais alors il me dit simplement ceci:Twig_Error_Runtime: An exception has been thrown during the rendering of a template ("Route "public://image.png" does not exist.")
Rias
Euh ... je suppose que cela doit être fait dans un hook de prétraitement, à moins qu'il y ait une fonction d'assistance Twig pour convertir FieldItemLists en une représentation de chaîne (que je ne trouve pas)
Clive
Oh je vois, url()veut un itinéraire. Que diriez- url_from_path(node.field_image.0.entity.uri.value)vous
Clive
Hmm url_from_path()semble générer ceci: http://mywebsite.local/public%3A//image.pngil semble donc qu'il s'agisse d'un codage d'URL et de l'ajout de la valeur exacte à l'URL
Rias

Réponses:

49

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) }}
son arrylnorris
la source
2
Veuillez noter que vous obtiendrez l'URL de l'image d'origine "sans style" et non l'URL spécifique au style de l'image (par exemple, une vignette). En dehors de la réponse de VladimirM, il n’ya aucun moyen d’obtenir l’URL de l’image stylée correcte dans twig. Au moins actuellement ...
Philipp Michael
2
... les styles d'image sont maintenant disponibles dans Twig Tweak - drupal.org/project/twig_tweak
4k4
1
La classe File a une url()méthode, vous pouvez donc simplement appeler entity.url()plutôt que de passer entity.fileuriàfile_url()
Kiee
36

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.

Berdir
la source
2
Nous essayons de placer file_create_url () dans le noyau, mais le manque d’intérêt a rendu le problème obsolète. drupal.org/node/2168231 Mais si cela devait être écrit, il devrait être {{file_url (node.field_image.entity.fileuri)}}
joelpittet
27

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

$styled_image_url = ImageStyle::load('large')->buildUrl($node->field_image->entity->getFileUri());
VladimirM
la source
4
C'est une excellente réponse. Notez que dans votre fichier .theme ou .module , vous voudrez ajouter ceci au début:use Drupal\image\Entity\ImageStyle;
mikeDOTexe
2
Je suis tombé sur un problème avec https, où Safari n’affiche pas l’image car elle utilise plutôt l’IP. Vous voudrez peut-être ajouter $relative = file_url_transform_relative($styled_image_url);pour vous assurer que c'est relatif. API ici
mikeDOTexe
9

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+

GiorgosK
la source
Je pense que c'est dommage que ce genre de choses soit obsolète au bout d'un moment. La mise à niveau de Drupal devrait permettre à ceux qui travaillent! Cela fonctionne pour moi dans Drupal 8.6, merci.
Stef Van Looveren
7

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

Rias
la source
6

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

entrez la description de l'image ici

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

<img class="top-article-image" src="{{ file_url(imageUrl) }}" />
crobicha
la source
Que se passe-t-il s'il n'y a pas d'image insérée et que nous avons défini la valeur par défaut?
Amol
2

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

Adrian Kremer
la source
2

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());
    }
  }
hugronaphor
la source
1

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') }}"/>
Robb Davis
la source
0

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).


la source
0

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.

leymannx
la source
0

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 }}
Bdanin
la source
0

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.

Prem Patel
la source
0

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

Kiee
la source
-4

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

Drock
la source