Allow different image resolutions for displaying retina images

Created on 19 May 2022, over 2 years ago
Updated 11 July 2023, over 1 year ago

Problem/Motivation

I'd like to display different image resolutions for displaying retina/high-res images.

Steps to reproduce

When I have a column of 554px wide, I tried the following:

{#
/**
 * @file
 * Default theme implementation to display an image.
 */
#}
{{ attach_library('easy_responsive_images/resizer') }}

{% set file = media.field_media_image.entity %}
{% set src = file.uri.value|image_url('responsive_1_1_400w') %}
{% set srcset = [
  file.uri.value|image_url('responsive_1_1_600w')|render ~ ' 600w',
  file.uri.value|image_url('responsive_1_1_1200w')|render ~ ' 600w 2x',
] %}

<img src="{{ src }}" data-srcset="{{ srcset|join(',') }}" alt="{{ media.field_media_image.alt }}" loading="lazy" decoding="async" fetchpriority="low"/>

Is this even possible out of the box with Easy Responsive Images or is this a feature request?

✨ Feature request
Status

Fixed

Version

1.3

Component

Code

Created by

πŸ‡©πŸ‡ͺGermany iuscare

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024