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

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

StatusFileSize
new2.54 KB

Added missing use.

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.