web-dev-qa-db-fra.com

Rendu d'un champ d'image dans page.html.twig avec un style d'image personnalisé

J'essaie de créer un diaporama unique pour chaque page. Le code pour cela doit être dans page.html.twig. J'ai le diaporama qui fonctionne principalement, mais je ne peux appeler que l'URL de l'image complète, pas un style d'image personnalisé d'une taille spécifique. Comment puis-je modifier ce code pour appeler une taille d'image spécifique?

{% for key, item in node.field_slides %}
{% if node.field_slides[key].entity %}
<figure class="swiper-slide">
    <img class="swiper-image" src="{{ file_url(node.field_slides[key].entity.uri.value) }}" alt="{{ node.field_slides[key].alt  }}" />

    {% if node.field_slides[key].title %}
    <figcaption class="swiper-caption">
        <div class="swiper-user-content user-content">
            {{ node.field_slides[key].title|striptags("<a>,<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,<ol>,<p>,<table>,<ul>")|raw }}
        </div><!--/.swiper-user-content.user-content-->
    </figcaption><!--/.swiper-caption-->
    {% endif %}
</figure><!--/.swiper-slide-->
{% endif %}
{% endfor %}

Le bit où j'appelle l'URL est:

{{ file_url(node.field_slides[key].entity.uri.value) }}

J'ai essayé de faire {{ dump(node.field_slides[key]) }} pour voir s'il y avait des données que je pouvais utiliser, mais chaque fois que je fais ça, je reçois juste 500 erreurs.

Toute aide serait grandement appréciée; Je suis très nouveau sur Drupal, venant de WordPress. Je pense que c'est le dernier obstacle majeur avant de pouvoir terminer ce thème pour mon client.

8themingmedia
8
JacobTheDev

Remplacer la balise d'image

<img class="swiper-image" src="{{ file_url(node.field_slides[key].entity.uri.value) }}" alt="{{ node.field_slides[key].alt  }}" />

avec un tableau de rendu pour le style d'image:

{% set imagestyle = {
  '#theme':      'image_style',
  '#style_name': 'medium',
  '#uri':        node.field_slides[key].entity.uri.value,
  '#alt':        node.field_slides[key].alt,
  '#attributes': { class: 'swiper-image' },
} %}

{{ imagestyle }}

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:

{{ node.field_slides[key].entity.uri.value | image_style('thumbnail') }}
31
4k4

Pour imprimer un style d'image réactif:

{% set responsiveimagestyle = {
    '#theme': 'responsive_image',
    '#responsive_image_style_id': 'responsive_image_style',
    '#uri': node.field_slides[key].entity.uri.value,
    '#attributes': { class: 'swiper-image', alt: 'text', title: 'text' },
} %}

{{ responsiveimagestyle }}
3
Flo Develop

Juste une mise à jour pour la réponse 4k4.

Pour imprimer des champs d'entité (par exemple, paragraphe), nous pouvons utiliser ceci:

<img src="{{ item.entity.field_image.entity.uri.value | image_style('image_style') }}" alt="{{item.entity.field_image.alt}}"/>

3
Hashmat

J'ai récemment eu besoin de cela moi-même avec la torsion que je voulais fournir une image par défaut (svg) lorsqu'aucune image n'a été téléchargée. Twig Tweak rend cela possible tout en me permettant de contrôler la sortie via l'interface utilisateur de Drupal.

Dans mon cas, je stylise un commentaire, je veux donc rendre l'image utilisateur et j'aimerais utiliser le style d'image "miniature". C'est difficile car généralement un champ d'entité qui n'est pas l'entité principale de votre modèle ne peut pas être simplement rendu.

  1. Installez Twig Tweak module.
  2. Créez un nouveau mode d'affichage pour l'utilisateur (j'ai nommé mon "compact").
  3. Définissez le champ user_picture avec la sortie de style d'image que vous souhaitez utiliser dans "Gérer l'affichage". Pour moi, c'était "miniature", mais il ne sera pas visible dans l'exemple de code.

  4. Remplacez le comment.html.twig et ajoutez la ligne suivante là où cela a du sens pour votre cas d'utilisation.

    {{ comment.uid.entity.user_picture|view('compact') }}

Twig Tweak fournit cette méthode "view" qui rendra maintenant mon champ user_picture avec les paramètres de mode d'affichage "compact" que j'ai déjà définis dans Drupal. Si je souhaite modifier les styles d'image plus tard, je peux le faire via l'interface utilisateur sans avoir à apporter de modifications supplémentaires à mes modèles twig. En outre, cela prendra en charge les paramètres "d'image par défaut" de Drupal comme bien sans avoir à codifier cela dans le twig ou pré-traiter les crochets d'une autre manière.

1
EclipseGc