web-dev-qa-db-fra.com

Comment puis-je rendre un style d'image réactif à partir d'une image dans le répertoire du thème?

Je travaille sur le modèle views-view-fields--myview.html.twig. Mais je ne pense pas que le modèle avec lequel vous travaillez soit important pour que cela fonctionne.

J'ai trouvé ceci Twig qui peut ajouter Drupal images réactives à une image qui n'est pas dans un champ. Dans ce cas, cette image est dans le répertoire des fichiers. Mon question est que je veux placer cette image dans mon répertoire de thèmes dans: /themes/custom/mytheme/img/mygraphic.png. Quel URI puis-je utiliser pour que cela fonctionne dans cet exemple?

La deuxième question est la suivante: la balise alt de l'image est vide même si j'en ai fourni une. Comment afficher une balise alt?

{% set responsiveimagestyle = {
    '#theme': 'responsive_image',
    '#responsive_image_style_id': 'my_custom_responsive_style',
    '#uri': 'public://mygraphic.png',
    '#alt': 'my alt text',
    '#attributes': { class: 'img-responsive' },
} %}

Dans le modèle views-view-fields - myview.html.twig, je peux maintenant utiliser la variable suivante.

{{ responsiveimagestyle }}

L'image est enveloppée dans le tag d'image et utilise le style Drupal Images réactives.

8themingmedia
3
paulcap1

C'est la même chose lorsque vous utilisez les filtres d'image du module Twig Tweak: vous ne pouvez pas restituer des images réactives à partir d'un URI aléatoire, il doit s'agir d'un URI stocké dans la table DB file_managed . Mais avec Twig Tweak, vous pouvez rendre des styles d'image normaux à partir d'URI aléatoires , et créer manuellement une balise d'image réactive en rendre plusieurs styles d'image normaux. - Hudri

Très bien, il existe donc une solution de contournement, créez-en une manuellement:

{% set imagePath = '/themes/custom/mytheme/img/mygraphic.png' %}
<img srcset="{{ imagePath|image_style('thumbnail') }} 300w, {{ imagePath|image_style('medium') }} 800w" src="{{ file_url(imagePath) }}" alt="some graphic image" typeof="foaf:Image"/>
1
No Sssweat

Je suis presque sûr (mais pas à 100%) que le rendu d'une image réactive où l'image d'origine provient d'un élément de thème ne fonctionnera pas de cette façon. Pour obtenir une image réactive, vous avez besoin de plusieurs dérivés d'images différents dans différentes tailles. Ceux-ci sont normalement créés automatiquement lors du téléchargement d'images via un champ d'image. Je ne peux pas imaginer que cela se produit à la volée à partir d'une image non gérée.

Je pense que votre meilleur pari est de fournir une image gérée à partir d'un formulaire de paramètres de thème ou de paramètres système. Cela est téléchargé dans le répertoire des fichiers comme d'habitude. Peut-être que toutes les tailles d'images seront alors créées automatiquement. Peut-être que vous devez toujours vous assurer que les dérivés d'images sont créés par programme.

Alternativement, vous pouvez simplement demander de télécharger toutes les tailles d'image nécessaires, puis de créer votre propre srcset à partir de celles-ci, voir la réponse de No Sssweat.

La balise alt de votre question doit être ajoutée à partir du #attributes tableau.

1
leymannx