Comment trouver une URL de style d'image à partir d'un modèle de brindille?


10

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'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()à 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 la 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é, il meurt complètement si je lui passe un argument et que la version de haut niveau est encore beaucoup trop grande pour pouvoir 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 que vous ne pouvez pas le faire , mais je ne comprends pas pourquoi je ne peux pas obtenir l'URL existante dans (2)?

Réponses:


11

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

1
la question dit de retirer le mode d'affichage de la configuration d'affichage du champ. En faisant $ image_url = ImageStyle :: load ('myimagestyle') -> buildUrl ($ cover_image); comment tirez-vous le style d'image de la configuration du champ? Vous avez simplement ajouté myimagestyle, mais que se passe-t-il si le même champ se trouve sur plusieurs entités (par exemple des nœuds) où il nécessite différents styles d'image?
usernameabc

14

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 contentn'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 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.

Éditer:

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

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

Merci. Ainsi, tous les crochets de prétraitement sont appelés lorsque les appels de brindilles sont rendus, par exemple au point où vous allez {{ content.field_image }}et pas avant? En outre, je pense que l'URL que je vais obtenir de votre suggestion est l'URL d'origine - la partie 2 de mon Q demandait l'URL du style d'image, comme le configure le mode d'affichage. Est-ce possible?
artfulrobot

Cela ne fonctionne que pour les images téléchargées régulières et non pour les images référencées par une entité. Comment cela peut-il fonctionner avec des images référencées par entité?
paulcap1

@ paulcap1, je ne sais pas exactement ce que vous voulez dire, car un champ d'image est un champ de référence (vers une entité de fichier). Si vous voulez dire que vous avez l'image à l'intérieur d'une entité référencée, vous avez besoin de .entitydeux fois, d'abord pour accéder à l'entité et ensuite pour l'image.
4k4

1
@ paulcap1, par exemple{{ node.field_ref.entity.field_image.entity.uri.value }}
4k4

@ 4k4. J'utilise le type de contenu de page par défaut. J'ai un champ référencé d'entité appelé field_global_image. Cela utilise le lot d'images. Le champ d'image Bundles s'appelle "" image ". J'ai essayé à votre façon en utilisant {{node.field_global_image.entity.image.entity.uri.value}}. J'ai également essayé de changer les champs comme celui-ci {{node.image.entity.field_global_image .entity.uri.value}} Aucun des deux n'a fonctionné. Dans ma réponse dans un message séparé, c'est ce qui a fonctionné pour moi.
paulcap1

6

Installez le module Twig Tweak 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'))}} " >

Notez que dans l'exemple sur l'utilisation des entités référencées imageaprès field_target_entityfait référence au champ d'image sur l'entité référencée. Vous devrez peut-être l'ajuster.
daniels

1
Merci! L'exemple de référence d'entité peut également être réalisé sans le module twig_field_value par:file_url(node.field_image.entity.field_referenced_image.entity.uri.value | image_style('thumbnail'))
John
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.