parent fit extension with background images and width + height #490

joacim-boive · 2018-04-11T14:24:56Z

I have a background image that I need to fill the entire screen and I need to send the size of the image to an image service.

I got the width part working, but I need to send to height as well and I thought I could to that using the "parent fit"-extension. But I don't quite understand how I should use it...

This is what I have working for the width now:

import bgset from 'lazysizes/plugins/bgset/ls.bgset.min'; // Used for backgrounds.
import parentFit from 'lazysizes/plugins/parent-fit/ls.parent-fit.min';
import rias from 'lazysizes/plugins/rias/ls.rias.min'; // required to calculate the width and send to CDN
import lazySizes from 'lazysizes';

<body data-bgset="//...w_**{width}**,g_auto,dpr_auto/v1/login.jpg" data-absurl="false" data-sizes="auto" class="lazyload" data-widths="[2560, 1440, 1280, 1200, 1366, 1024, 960, 900, 800, 768, 740, 736, 731, 667, 640, 568, 480, 414, 411, 375, 360, 320]">

It works great and sends along the proper width as expected.
But how can I send along the current height of the background as well? I would need something like:
//...w_{width},h_{height}

And lazysizes would replace {height} with the current height, just as it does today with the {width}

Any input much appreciated! :)

The text was updated successfully, but these errors were encountered:

aFarkas · 2018-04-13T14:33:43Z

There are two examples in the documentation (note custom can be seen as height you have to do the calculation yourself. In case you use the bgset plugin to get object-fit working in IE I strongly advice you to use the object-fit plugin instead (better performance) in supporting browsers.):

<script>
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.rias = {
    custom: 'test',
    dynCustom: function(elem, opts){
        return 'computed-something';
    }
};
</script>
<img
    data-src="http://placehold.it/{width}/{custom}/{dynCustom}"
    data-sizes="auto"
    class="lazyload"
    alt="" />

<script>
document.addEventListener('lazyriasmodifyoptions', function(e){
    // change available widths and widthmap for .special-widths elements
    if($(e.target).is('.special-widths')){
        // (Note: With version 1.1.0 the ``details`` property will be renamed to ``detail``.)
        e.detail.widths = [320, 480, 600];
        e.detail.widthmap = {
              320: 'small',
              480: 'medium',
              600: 'large'
         };
    }

    //add new custom property with value 'foo'
    e.detail.custom = 'foo';

    e.detail.quality = (window.devicePixelRatio || 1) > 1.9 ? 50 : 80;
});
</script>
<img
    data-src="image-w{width}-w{custom}-q{quality}.jpg"
    data-sizes="auto"
    class="lazyload special-widths"
    alt="" />

Note: Also note you really don't need to add so much images the following should be fine:

data-widths="[2560, 1440, 1024, 768, 480, 360]">

joacim-boive closed this as completed Apr 26, 2018

roberthenniger mentioned this issue Oct 19, 2020

lazysizes - Aspect ratio not working for sources when {width} and {height} placeholders used #831

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

parent fit extension with background images and width + height #490

parent fit extension with background images and width + height #490

joacim-boive commented Apr 11, 2018 •

edited

Loading

aFarkas commented Apr 13, 2018 •

edited

Loading

parent fit extension with background images and width + height #490

parent fit extension with background images and width + height #490

Comments

joacim-boive commented Apr 11, 2018 • edited Loading

aFarkas commented Apr 13, 2018 • edited Loading

joacim-boive commented Apr 11, 2018 •

edited

Loading

aFarkas commented Apr 13, 2018 •

edited

Loading