10

I'm trying to set up a slideshow that's unique to each page. The code for this needs to be in page.html.twig. I've got the slideshow mostly working, but I can only call the full image URL, not a custom image style of a specific size. How can I modify this code to call a specific image size?

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

The bit where I'm calling the URL is:

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

I've tried doing {{ dump(node.field_slides[key]) }} to see if there was any data I could use, but every time I do that, I just get 500 error.

Any help would be greatly appreciated; I'm very new to Drupal, coming from WordPress. I think this is the last major hurdle before I can finish up this theme for my client.

33

Replace the image tag

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

with a render array for the image style:

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

Edit:

There is a new filter in the module Twig Tweak. Now you can generate the image style url in twig directly from an uri or url:

{{ node.field_slides[key].entity.uri.value | image_style('thumbnail') }} 
| improve this answer | |
  • This solution worked for me after installing the Twig Tweak module - thanks. – millionleaves Dec 6 '18 at 5:48
  • 1
    This worked for me right away! Thanks @4k4! You saved my life today! – Beto Aveiga Feb 25 '19 at 20:24
  • Works great. You should add '#width' and '#height' as well. Other modules could need to use them for rendering. – Stef Van Looveren Nov 8 '19 at 14:17
3

Just an update for the 4k4 answer.

To print entity fields (eg. paragraph), we can use this:

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

| improve this answer | |
3

To print a responsive image style:

{% 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 }}
| improve this answer | |
1

I recently needed this myself with the twist that I wanted to provide a default (svg) image when no image was uploaded. Twig Tweak makes this possible while still allowing me to control the output via Drupal's user interface.

In my case, I'm styling a comment, so I want to render the user picture, and I'd like to use the "thumbnail" image style. This is difficult because typically an entity field that's not the primary entity of your template can't just be rendered.

  1. Install Twig Tweak module.
  2. Create a new view mode for the user (I named my "compact").
  3. Set the user_picture field with whatever image style output you want to use in "Manage Display". For me that was "thumbnail", but it won't be visible in the code sample.
  4. Override the comment.html.twig and add the following line where ever makes sense for your use case.

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

Twig tweak provides this "view" method which will now render my user_picture field with the "compact" view mode settings I've already defined in Drupal. If I want to change image styles later, I can do so through the user interface without needing to make any additional modifications to my twig templates. Also, this will support Drupal's "default image" settings as well without having to codify that into the twig or preprocess hooks in some other way.

| improve this answer | |

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