I want to use a twig filter to resize/crop images in Drupal 8 templates for responsive images, I know I can generate responsive images with Image Style and Responsive Image styles, but that requires too much clicking in 3 different configuration pages.

I would prefer something like:

srcset="{{ image_url|crop(1000, 1000) }} 1000w, {{ image_url|crop(500, 500) }} 
src="{{ image_url|crop(1000, 1000) }}"/>

Or something like LiipImagineBundle https://symfony.com/doc/master/bundles/LiipImagineBundle/basic-usage.html

Does somebody know if it's possible to use it with Drupal 8

closed as off-topic by Jaypan, Kevin, leymannx, mradcliffe, kiamlaluno May 31 at 5:22

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions on programming, PHP, SQL, etc. that do not relate directly to Drupal are off-topic here, but can be asked on Stack Overflow." – kiamlaluno
If this question can be reworded to fit the rules in the help center, please edit the question.

  • 1
    Drupal answers is a place for answers that are not primarily opinion based. As you are asking how something should be done in a non-Drupal way (which you have indicated you are not interested in), you're essentially asking for people to give opinions, which does not match the format of Drupal answers. You would be better to post this on Drupal.org which is more suited to discussion. – Jaypan May 20 at 12:05
  • 1
    Use image styles. Changes won’t require code updates. – Kevin May 20 at 12:06

After some research I found this is possible using Image Styles and Twig Tweak

I created 2 image styles scale and crop:

  • scale_crop_1000_1000
  • scale_crop_500_500

It is something like this:

<img srcset="{{ node.field_image.entity.uri.value | image_style('scale_crop_1000_1000') } 1000w, {{ node.field_image.entity.uri.value | image_style('scale_crop_500_500') } 500w",
src="{{ node.field_image.entity.uri.value | image_style('scale_crop_1000_1000') }" /> 

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