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?


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

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.


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());

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+


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


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) }}" />

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

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());
    }
  }

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') }}"/>

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


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.


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 }}

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.


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


-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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.