web-dev-qa-db-fra.com

Comment trouver l'URL du style d'image à partir du modèle twig?

J'implémente un modèle de nœud qui utilise une image deux fois; une fois de manière `` normale '' (c'est-à-dire en utilisant le style d'image défini dans la configuration d'affichage du champ pour ce mode d'affichage), et l'autre est une propriété d'image d'arrière-plan CSS.

J'ai besoin de deux choses:

  1. (idéalement) un moyen d'obtenir l'URL pour un style d'image différent de la même image.

  2. un moyen d'obtenir l'URL du champ d'image.

J'ai du mal à utiliser dump() et kint() pour m'aider à trouver une réponse. Ils produisent tous les deux beaucoup trop (grâce aux liens intégrés vers "parent", etc.) et semblent ne pas avoir les informations dont j'ai besoin. par exemple. en regardant dump(content.field_image) sortie l'URL réelle de l'image n'est pas là (alors d'où vient-elle de telle sorte qu'elle puisse être rendue avec {{ content.field_image }}?!). kint() d'un autre côté, meurt complètement si je lui passe un argument et que la version de niveau supérieur est encore beaucoup trop grosse pour naviguer. Le débogage était tellement plus facile avec phptemplate + xdebug. (Oui, je sais que c'est bien que les utilisateurs ne puissent pas supprimer la base de données.)

Il y a une réponse à (1) qui implique vous ne pouvez pas le faire , mais je ne comprends pas pourquoi je ne peux pas obtenir l'URL existante dans (2)?

theming8media
9
artfulrobot

Vous pouvez obtenir l'URL du style d'image dans une fonction de prétraitement et la transmettre au modèle de nœud. (dans mon cas, j'avais besoin au niveau de la page, je suppose que cela fonctionnerait toujours pour le nœud)

Quelque chose comme ça, avec "myimagefield" comme nom de machine pour votre champ d'image et "myimagestyle" comme nom de machine pour votre style, assurez-vous également d'inclure Entity\ImageStyle.

use Drupal\image\Entity\ImageStyle;

/**
 * Implements hook_preprocess_page().
*/
function mytheme_preprocess_page(&$variables, $hook) {
  if ($variables['node']) {
    $node = $variables['node'];
    if($node->myimagefield[0]){
        $cover_image = $node->myimagefield[0]->entity->getFileUri();
        $image_url = ImageStyle::load('myimagestyle')->buildUrl($cover_image);
        $variables['my_image'] = $image_url;
    }
  }
}
10
Greg

La première partie est déjà répondue dans la question liée, où il y a le code pour le faire. Pour répondre à la deuxième partie de la question, vous pouvez accéder à l'image d'origine dans l'objet nœud:

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

Une remarque sur content:

Dans un modèle de nœud, le champ d'image dans content n'est pas prêt à être rendu. Le champ contient la configuration de son affichage et l'objet champ qui contient toutes les données brutes. Plus tard, cela sera mis en place sur le terrain, le formateur d'image et les modèles d'image. C'est la raison pour laquelle vous ne trouvez pas l'url que vous recherchez dans content à ce stade.

Dans le modèle de nœud, vous pouvez utiliser les champs au niveau supérieur du tableau de contenu, par exemple afficher le champ d'image

{{ content.field_image }}

tel que configuré dans le mode d'affichage.

Modifier:

Il y a un nouveau filtre dans le module Twig Tweak . Vous pouvez maintenant générer l'URL du style d'image dans twig directement à partir d'un uri ou d'une URL de l'image d'origine:

{{ node.field_image.entity.uri.value | image_style('thumbnail') }}
12
4k4

Installez le Twig Tweak Module https://www.drupal.org/project/twig_Tweak

Et ce module Twig Field https://www.drupal.org/project/twig_field_value

Si vous utilisez des images de champ de téléchargement d'images régulières, utilisez-les dans votre modèle de nœud:

<img src="{{ node.field_regular_image.entity.uri.value | image_style('thumbnail') }} " >

Si vous utilisez l'image de référence d'entité, utilisez ceci:

<img src="{{ file_url(content.field_global_image|field_target_entity.image.entity.uri.value | image_style('thumbnail'))}} " >
6
paulcap1