Hi - I am wondering whether it is possible to add a filter for using a responsive image set in a similar way to how this great module currently works for an image style?

Eg:

  <dt>Responsive image style:</dt>
  <dd>{{ 'public://images/ocean.jpg' | responsive_image_style('narrow') }}</dd>

I have tried to come up with something but so far no joy!?

Thanks,
Leo

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

leovw created an issue. See original summary.

itmaybejj’s picture

For what it's worth, I found a way using the existing Tweaks -- perhaps this could be added to the documentation if a direct responsive image filter isn't easy to add?

  1. Assign the alternate responsive image style you want to use to a view mode for the media.
  2. Find the Media ID of your image (Kint/Dump/etc).
  3. Use the Entity Builder tweak instead of the Image tweak, and render out that beautiful responsive image:
    {{ drupal_entity('media', Media ID, 'Machine name of desired display mode') }}

And a real life example of what it looks like in code with a programmatically determined MID instead of a manually set one:
{{ drupal_entity('media', content.image['#object'].mid.value, 'postcard_tall') }}

Chi’s picture

{{ 'public://images/ocean.jpg' | responsive_image_style('narrow') }}
What URL do you expect to be printed here?

lzimmerman’s picture

This quick patch does the job for me, perhaps it will be helpful as a base.
Currently takes FID and style as parameters, e.g.
{{ node.field_image.0.target_id | image_style_responsive('my_responsive_style') }}

sgalindo2388’s picture

Patch #4 works but might have been created for an older version of the module and it's missing some of the changes from the latest version so I applied the patch to the latest version 1.7 so it applies cleanly.

davidraijmakers’s picture

I updated the patch to be working with the latest changes in the 8.x-2.x branch

davidraijmakers’s picture

Status: Active » Needs review
davidraijmakers’s picture

davidraijmakers’s picture

Version: 8.x-1.x-dev » 8.x-2.x-dev

Status: Needs review » Needs work

The last submitted patch, 8: twig_tweak_responsive_image_filter-2848104-8.patch, failed testing. View results

Chi’s picture

As a workaround you may build srcset attribute manually like follows.

{% set imagePath = 'images/ocean.jpg' %}
<img srcset="{{ imagePath|image_style('thumbnail') }} 300w, {{ imagePath|imagePath('medium') }} 800w" src="{{ file_url(imagePath) }}"/>
Chi’s picture

Assigned: Unassigned » Chi
Category: Feature request » Task

I think converting file ID into markup is not what Twig filter should be used for. This is more a Twig function job. I will try to implement a generic function to render images in Twig templates. That should support responsive image styles as well.

  • Chi committed 4507a6c on 8.x-2.x
    Issue #2848104 by davidraijmakers, sgalindo2388, lzimmerman: Add...
Chi’s picture

Title: Any chance of a filter for the responsive image module? » Support responsive images
Assigned: Chi » Unassigned
Status: Needs work » Fixed

I just pushed brand new drupal_image() function which supports responsive image styles. Feel free to test it and provide some feedback. The cheat sheet has been updated.
Thanks.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.