aFarkas/lazysizes

Rias: Background image {width} and {quality} placeholders not replaced

Closed this issue · 3 comments

jolantis commented

The {width} and {quality} placeholders in ReSRC.it link are not being replaced.

This is my background image setup:

<div data-sizes="auto" data-bg="http://app.resrc.it/s=w{width}/o={quality}/http://mydomain.com/myimage.jpg" class="lazyload"/></div>

I'm using the RiAS plugin quality setting with simple support for background images (I've also tried the ls.unveilhooks.js plugin, but that didn't work either):

// LazySizes RiAS plugin config
document.addEventListener('lazyriasmodifyoptions', function(event) {
    event.detail.quality = (window.devicePixelRatio || 1) > 1.4 ? 65 : 80;
});

// LazySizes support for background images
document.addEventListener('lazybeforeunveil', function(e) {
    var bg = e.target.getAttribute('data-bg');
    if(bg) {
        e.target.style.backgroundImage = 'url(' + bg + ')';
        e.target.removeAttribute('data-bg');
    }
});

You can see a (not) working implementation here, right at the top: http://altair.studiodumbar.com

What am I doing wrong? Looks like {width} and {quality} aren't calculated/replaced for data-bg?

Thanks for your help and for this really great plugin!

Jonathan

aFarkas commented

Unfortunately the RIaS plugin only allows to work with img/picture.

Fortunately the bgset plugin does this transformation and I just changed some code in RIaS to work together with the bgset plugin.

So

  • update lazySizes (including its plugins)
  • add the bgset plugin
  • and use data-bgset instead of data-bg

Please close if this works for you.

jolantis commented

Great it's working with the updates, this is the output in Safari 8.0.6.:

<div data-bgset="http://app.resrc.it/s=w{width}/o={quality}/http://altair.studiodumbar.com/thumbs/cover-01-8cf8e463ff29bb83468bcd9b417471ab.jpg" class="BgImage CoverImage FluidEmbed--3by2 FluidEmbed--large16by9 FluidEmbed--huge2by1 lazyautosizes lazyloaded" sizes="1278px" style="background-image: url(http://app.resrc.it/s=w2560/o=65/http://altair.studiodumbar.com/thumbs/cover-01-8cf8e463ff29bb83468bcd9b417471ab.jpg);"><picture style="display: none;"><source data-srcset="http://app.resrc.it/s=w96/o=65/http://altair.studiodumbar.com/thumbs/cover-01-8cf8e463ff29bb83468bcd9b417471ab.jpg 96w, http://app.resrc.it/s=w160/o=65/http://altair.studiodumbar.com/thumbs/cover-01-8cf8e463ff29bb83468bcd9b417471ab.jpg 160w, http://app.resrc.it/s=w320/o=65/http://altair.studiodumbar.com/thumbs/cover-01-8cf8e463ff29bb83468bcd9b417471ab.jpg 320w, http://app.resrc.it/s=w480/o=65/http://altair.studiodumbar.com/thumbs/cover-01-8cf8e463ff29bb83468bcd9b417471ab.jpg 480w, http://app.resrc.it/s=w640/o=65/http://altair.studiodumbar.com/thumbs/cover-01-8cf8e463ff29bb83468bcd9b417471ab.jpg 640w, http://app.resrc.it/s=w800/o=65/http://altair.studiodumbar.com/thumbs/cover-01-8cf8e463ff29bb83468bcd9b417471ab.jpg 800w, http://app.resrc.it/s=w960/o=65/http://altair.studiodumbar.com/thumbs/cover-01-8cf8e463ff29bb83468bcd9b417471ab.jpg 960w, http://app.resrc.it/s=w1280/o=65/http://altair.studiodumbar.com/thumbs/cover-01-8cf8e463ff29bb83468bcd9b417471ab.jpg 1280w, http://app.resrc.it/s=w1600/o=65/http://altair.studiodumbar.com/thumbs/cover-01-8cf8e463ff29bb83468bcd9b417471ab.jpg 1600w, http://app.resrc.it/s=w1920/o=65/http://altair.studiodumbar.com/thumbs/cover-01-8cf8e463ff29bb83468bcd9b417471ab.jpg 1920w, http://app.resrc.it/s=w2240/o=65/http://altair.studiodumbar.com/thumbs/cover-01-8cf8e463ff29bb83468bcd9b417471ab.jpg 2240w, http://app.resrc.it/s=w2560/o=65/http://altair.studiodumbar.com/thumbs/cover-01-8cf8e463ff29bb83468bcd9b417471ab.jpg 2560w, http://app.resrc.it/s=w2880/o=65/http://altair.studiodumbar.com/thumbs/cover-01-8cf8e463ff29bb83468bcd9b417471ab.jpg 2880w" sizes="1278px" srcset="http://app.resrc.it/s=w96/o=65/http://altair.studiodumbar.com/thumbs/cover-01-8cf8e463ff29bb83468bcd9b417471ab.jpg 96w, http://app.resrc.it/s=w160/o=65/http://altair.studiodumbar.com/thumbs/cover-01-8cf8e463ff29bb83468bcd9b417471ab.jpg 160w, http://app.resrc.it/s=w320/o=65/http://altair.studiodumbar.com/thumbs/cover-01-8cf8e463ff29bb83468bcd9b417471ab.jpg 320w, http://app.resrc.it/s=w480/o=65/http://altair.studiodumbar.com/thumbs/cover-01-8cf8e463ff29bb83468bcd9b417471ab.jpg 480w, http://app.resrc.it/s=w640/o=65/http://altair.studiodumbar.com/thumbs/cover-01-8cf8e463ff29bb83468bcd9b417471ab.jpg 640w, http://app.resrc.it/s=w800/o=65/http://altair.studiodumbar.com/thumbs/cover-01-8cf8e463ff29bb83468bcd9b417471ab.jpg 800w, http://app.resrc.it/s=w960/o=65/http://altair.studiodumbar.com/thumbs/cover-01-8cf8e463ff29bb83468bcd9b417471ab.jpg 960w, http://app.resrc.it/s=w1280/o=65/http://altair.studiodumbar.com/thumbs/cover-01-8cf8e463ff29bb83468bcd9b417471ab.jpg 1280w, http://app.resrc.it/s=w1600/o=65/http://altair.studiodumbar.com/thumbs/cover-01-8cf8e463ff29bb83468bcd9b417471ab.jpg 1600w, http://app.resrc.it/s=w1920/o=65/http://altair.studiodumbar.com/thumbs/cover-01-8cf8e463ff29bb83468bcd9b417471ab.jpg 1920w, http://app.resrc.it/s=w2240/o=65/http://altair.studiodumbar.com/thumbs/cover-01-8cf8e463ff29bb83468bcd9b417471ab.jpg 2240w, http://app.resrc.it/s=w2560/o=65/http://altair.studiodumbar.com/thumbs/cover-01-8cf8e463ff29bb83468bcd9b417471ab.jpg 2560w, http://app.resrc.it/s=w2880/o=65/http://altair.studiodumbar.com/thumbs/cover-01-8cf8e463ff29bb83468bcd9b417471ab.jpg 2880w"><img class="  lazyautosizes lazyloaded" data-sizes="auto" data-src="http://app.resrc.it/s=w2560/o=65/http://altair.studiodumbar.com/thumbs/cover-01-8cf8e463ff29bb83468bcd9b417471ab.jpg" src="http://app.resrc.it/s=w2560/o=65/http://altair.studiodumbar.com/thumbs/cover-01-8cf8e463ff29bb83468bcd9b417471ab.jpg" sizes="1278px"></picture></div>

Link: http://altair.studiodumbar.com

Though the initial data-bgset with the placeholder {width} and {quality parameters is stil present in there. Is that on purpose? Necessary? Can it be removed after background image is lazyloaded? Except for this it's working perfectly (at least in latest Safari and Chrome on Mac).

Thanks!

aFarkas commented

Yes, it is on purpose. But it is not necessary. If you want you can remove it after a lazybeforeunveil event. But this is just cosmetics, you won't get anything from it.