Hello, great module and thanks for the work to use the lazysizes library, it is really amazing :)

I am trying to get the parent-fit plugin working to have auto-sizes work taking into account the width/height of the parent container.

I have used this setup on another project (Shopify) when I could easily edit the output of the image tags myself, following the instructions here (https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/parent-fit) to add the data-aspectratio and data-parent-fit attributes.

I was hoping by enabling the parent-fit plugin, the output of the image tag would be adjusted to include these attributes, but I am not seeing it.

Could you please provide any instructions on how I would go about getting this working? Would I need to hook into the build array to add these attributes?

Thank you in advance.

Comments

lindsay.wils created an issue. See original summary.

osman’s picture

osman
Location Copenhagen
commented
Status: Active » Fixed

HI Lindsay, thank you for your kind words :)

I intentionally didn't want to define any logic for the plugins, as I imagine each project would need a different way of consuming them.
So, while Lazy-load is still responsible for enabling/disabling the lazysizes plugins, you would have all the freedom to consume them the way you need.

You can still easily modify the IMG tag attributes by implementing a template_preprocess_image(), or template_preprocess_responsive_image() hook in your theme, or custom module. Additionally you may need to update their respective twig templates too:

/**
 * Prepares variables for the image.html.twig template.
 */
function YOURTHEME_preprocess_image(&$variables) {
  $variables['attributes']['abc'] = 'xyz';
}
lindsay.wils’s picture

lindsay.wils commented

Thank you for the response, that was a great help and it was actually a very easy fix.

For anyone else coming across this...

function YOURTHEME_preprocess_responsive_image(&$variables) {
$variables['img_element']['#attributes']['data-parent-fit'] = 'cover';
$variables['img_element']['#attributes']['data-aspectratio'] = strval($variables['width']/$variables['height']);
}

Status: Fixed » Closed (fixed)

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

lindsay.wils’s picture

lindsay.wils commented

Hey again. Opening this back up as Im seeing some issues. Im certain I had this working previously, but now am seeing issues. It seems maybe something has changed with an update of the module possibly?

I am wondering if you have ever setup this up successfully?

Example site
https://live-fanpiermarina.pantheonsite.io/

I have my responsive image style set with my list of image styles selected at the various widths, and in the UI I am setting the sizes field as 'auto'

In my .theme file I have a preprocess function

function THEME_preprocess_responsive_image(&$variables) {
  $variables['img_element']['#attributes']['data-parent-fit'] = 'cover';
  $variables['img_element']['#attributes']['data-aspectratio'] = strval($variables['width']/$variables['height']);
}

The resulting DOM markup is

<img data-parent-fit="cover" data-aspectratio="1.5" loading="lazy" class="lazyload" data-src="/sites/default/files/styles/scale_1440/public/2020-04/pic2.jpg?itok=HL_PzTIs" data-srcset="/sites/default/files/styles/scale_320/public/2020-04/pic2.jpg?itok=YiNvAqJm 320w, /sites/default/files/styles/scale_480/public/2020-04/pic2.jpg?itok=2drlScL6 480w, /sites/default/files/styles/scale_640/public/2020-04/pic2.jpg?itok=SR_ey4NT 640w, /sites/default/files/styles/scale_800/public/2020-04/pic2.jpg?itok=dZ5rebuO 800w, /sites/default/files/styles/scale_1024/public/2020-04/pic2.jpg?itok=6OQ9oHqN 1024w, /sites/default/files/styles/scale_1280/public/2020-04/pic2.jpg?itok=bW-MMXL1 1280w, /sites/default/files/styles/scale_1440/public/2020-04/pic2.jpg?itok=HL_PzTIs 1440w, /sites/default/files/styles/scale_1920/public/2020-04/pic2.jpg?itok=c-5f9FkR 1920w" data-sizes="auto" />

Which ends up as
<img data-parent-fit="cover" data-aspectratio="1.5" loading="lazy" class="lazyloaded" src="/sites/default/files/styles/scale_1440/public/2020-04/pic2.jpg?itok=HL_PzTIs" srcset="/sites/default/files/styles/scale_320/public/2020-04/pic2.jpg?itok=YiNvAqJm 320w, /sites/default/files/styles/scale_480/public/2020-04/pic2.jpg?itok=2drlScL6 480w, /sites/default/files/styles/scale_640/public/2020-04/pic2.jpg?itok=SR_ey4NT 640w, /sites/default/files/styles/scale_800/public/2020-04/pic2.jpg?itok=dZ5rebuO 800w, /sites/default/files/styles/scale_1024/public/2020-04/pic2.jpg?itok=6OQ9oHqN 1024w, /sites/default/files/styles/scale_1280/public/2020-04/pic2.jpg?itok=bW-MMXL1 1280w, /sites/default/files/styles/scale_1440/public/2020-04/pic2.jpg?itok=HL_PzTIs 1440w, /sites/default/files/styles/scale_1920/public/2020-04/pic2.jpg?itok=c-5f9FkR 1920w" sizes="auto">

What I am seeing is the image size being chosen just on the browser size, not the parent elements size.

The main hero image (first on the page) at a 360px viewport is serving me a 480px wide image, seemingly not taking into account the height of the parent container.

Then on a large desktop size, images further down the page that have a container only 480px is being server the 1920px image size.

It was my understanding that these attributes are all that is required
data-parent-fit="cover" data-aspectratio="1.5"

and then the sizes attribute value would be updated on the fly. Which doesnt seem to be happening.

The documentation here https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/parent-fit#data-parent-fitcontaincoverwidth-usage

To do so either a data-aspectratio attribute has to be provided on the source/img element(s) or through width and height content attributes or at least one of the image candidates inside the srcset attribute also need to include a h (height) descriptor.

I have this working on another implementation outside of Drupal just using these attributes on the img element.

I am hoping you or someone has a working example of how they achieved this either through data attributes or preprocessing the data-srcset values to include image h.

Any help or direction would be greatly appreciated, thanks so much :)

lindsay.wils’s picture

lindsay.wils commented

For anyone else experience the above described issues, simply turning off "Prefer native lazy-loading" setting has solved the issue

lindsay.wils’s picture

lindsay.wils commented

Hello, Im opening this back up as I am coming across these issues again.

Previous version of the module, turning off "Prefer native lazy-loading" fixed my issues.

However, it seems in version 3.4, even with this unchecked, the output is still including loading="lazy"

Im unsure if this is causing the issues, however, unchecking the box should not output the attribute.