2

I am working on template views-view-fields--myview.html.twig. But I do not think it matters what template you are working with for this to work.

I found this Twig that can add Drupal responsive images to an image that is not in a field. In this case this image is in the files directory. My question is that I want to place this image in my themes directory in: /themes/custom/mytheme/img/mygraphic.png. What URI can I use to make that work in this example?

Second question is: The image alt tag is empty even though I provided one. How can I display an alt tag?

{% 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' },
} %}

In the views-view-fields--myview.html.twig template I now can use the following variable.

{{ responsiveimagestyle }}

The image is wrapped in the picture tag and is using the Drupal Responsive Images style.

1

I'm pretty sure (though not a 100%) that rendering a responsive image where the original image comes from a theme asset won't work that way. To have a responsive image rendered you need multiple different image derivatives in different sizes. These normally get created automatically during image upload via an image field. I can't imagine that this happens on the fly from an unmanaged image.

Your best bet I guess is to provide a managed image from a theme settings or system settings form. This gets uploaded to the files directory as usual. Maybe all images sizes then get created automatically. Maybe you still need to programmatically ensure the image derivatives get created.

Alternatively you could simply require to upload all necessary image sizes, to then build your own srcset from them, see No Sssweat's answer.

The alt tag in your question needs to be added from the #attributes array.

  • 2
    This is the same when using the image filters from the Twig Tweak module: You can't render responsive images from a random URI, it has to be an URI that is stored in the file_managed DB table. But with Twig tweak you can render normal image styles from random URIs, and manually create a responsive image tag by rendering multiple normal image styles. – Hudri Aug 29 at 10:12
  • This is image is a default or fallback image for a Paragraph. If an author does not upload an image. It should have a default. And it needs to be a Responsive Image. In my template I first check if the image field has a value, if not then I print the variable {{ responsiveimagestyle }}. This method works and it adds the wrapper picture and source with all the sizes from the custom Responsive preset. They do not want to use the field default image method. I couldn't find a preprocess that could swap out the image. – paulcap1 Aug 29 at 10:37
  • The only problem is that I need to place the image in the files directory for this to work. We have multiple load balance servers and instances for dev, preprod and prod. I will need to upload this image to 6 servers. What if the customer wants to change the default image one day? For the alt image I think I can add it using jquery and attach the js directly to this template. – paulcap1 Aug 29 at 10:37
  • @Leymannx. Thanks for the tip. You said the alt needs to be added in the attribute array. So I added it there and this works. '#attributes': { class: 'img-responsive', alt: 'my alt text' } – paulcap1 Aug 29 at 10:43
  • 1
    This can be resolved some day. drupal.org/project/drupal/issues/1308152 – ya.teck Sep 10 at 9:34
1

This is the same when using the image filters from the Twig Tweak module: You can't render responsive images from a random URI, it has to be an URI that is stored in the file_managed DB table. But with Twig tweak you can render normal image styles from random URIs, and manually create a responsive image tag by rendering multiple normal image styles. – Hudri

Great, so there is a workaround one can do, manually create one:

{% 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"/>
  • > imagePath('medium') Where does this filter come from? – ya.teck 19 hours ago
  • @ya.teck – Probably a typo where it must say imagePath|image_style('medium') instead. – leymannx 13 hours ago
  • @leymannx correct, fixed, thanks. – No Sssweat 6 mins ago

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.