MarkupSrcSet

[tpr]

Currently it's not possible. I could redesign the image sets like this:

{
    "featured": [
        [435,210], 2, 4
    ],
    "hero": [
        "720w 990w 1220w" => [
            [720,320], 2, 3
        ]
     ]
}

It's getting a bit complicated but if I'll have some time I could create an UI for this so it will be easier to set.

[neonwired]

Can anyone get bgset to work, it just always uses the fall back background image for me.

 

Nevermind. Sorted it.

Edited December 8, 2016 by neonwired

[tpr]

Could you show your code and module settings?

[horst]

I moved some posts not related to MarkupSrcSet to the ImageAnimatedGif thread.

[Anna]

It works perfectly well:

<div <?php echo $page->images->first()->bgset('hero'); ?>>Lorem ipsum</div>

Call to a member function srcset() on a non-object

<img <?php echo $page->featured_image->srcset('featured-image'); ?>>

What should I do?

[horst]

$page->featured_image

doesn't return a valid object! (It returns a "non-object")
You need to check that it returns a valid image object. Check if you set the image field to return a single image or an array of images.
Also you always need a fallback for cases where no image is uploaded to a field!

[Anna]

Thank you! It works like this:
 

<img <?php echo $page->images->first()->srcset('featured-image'); ?>>

 

[tpr]

Just updated the module to version 0.1. Almost everything in it has changed so reading the docs is a must

The module does less "magic" as before, eg. doesn't add the "lazyload" class and data-sizes automatically. These should be added manually or you can write a wrapper function if you would like to simplify things (please notify me if you think you wrote one that should be part of the module).

Also all the module settings are gone except the "Load scripts" checkbox because all other settings became useless after the rewrite.

The new syntax looks like this (here with a helper to add a noscript tag for no-js fallback):

<?php $img = $page->featured_image; ?>

<img data-srcset="<?php echo $img->srcset('200x300,*2,*3'); ?>" class="lazyload" data-sizes="auto" alt="" />

<noscript>
    <img src="<?php echo $img->srcsetUrls[0]; ?>" />
</noscript>

The main change is that you can easily tell what image sizes (sets) you need ("200x300,*2,*3" in the above example). Of course you can use WxH values for each set or use divisors too. What's more you don't have to start with the lowest image size, eg. "1200x900, /2, /4" is perfectly fine. 

[Ivo]

Thanks for the update, Something to possible consider -  maybe a field in the module settings where the user can type in the url segment to identify that the page is an AMP page and from there replace the <img> tage with the <amp img ></amp> tag?

[tpr]

The module doesn't output the img tag, only the value for the srcset attribute so I don't see how this feature could be implemented.

[Ivo]

My Apologies, I got the module mixed up with TextformatterSrcset.

[horst]

Maybe that my question is a bit OT. As the new modules version works perfect!

My question is related to data-bgset. I want to show an image covering the whole vieport. Therefor I use a div with background image. The css for the div is:

        position: relative !important;
        display: block;
        height: 100vh;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: cover;

My list is defined like: 600x0, 1200x0, 1800x0

Related to the background-size: cover, I believe, I get always the image displayed what is one step to small from the list, because they get stretched by css, to cover the viewport.

Can someone tell me how to solve this with MarkupSrcSet?

[horst]

Ok, I may add a workaround to my own question:

I have found out, that, for what ever reason, the largest variation never was fetched from the server !! ??

With my example form above, the largest variation fetched was the 1200x0. Then, with adding a 1801x0 to the list, the 1800x0 was fetched as largest. So, not sure why this behave is.

Has anyone else seen this for bg-sets?
Besides the workaround, it isn't useful to get the HDs filled up with (regularly) unnessecary large variations.

[tpr]

I haven't noticed such issue, maybe it's something with bgset. Here (at the bottom) they suggest to use the parent-fit extension when using cover or contain:

https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/bgset

[asbjorn]

I have previously been using uppercase URL in $page->image->URL for browser cache busting query string purpose. Is this compatible with MarkupSrcSet? My current image url is $page->image->srcset('860x0,/2,/3'). 

[tpr]

I think it doesn't support it yet. I'll check how to add this, thanks for pointing this out.

[tpr]

@franctic-aerobic It was easy to add a new $image->SRCSET method which generates such srcset:

/site/assets/files/1/pic.400x300.png?nc=1545348144 400w,/site/assets/files/1/pic.600x400.png?nc=1545348181 600w

But there's a problem: these resized images won't get re-created if you modify the original image, which I suppose your original plan was. I don't know how to deal with this without overcomplicating things.

[Peter Knight]

I've been using LazySizes manually for a while and wanted to try your Module.

Can I check that the following is setup correctly? I'm applyng this is a background image which is new to me.

First of all, I have been setting a variable of photo_header which uses a named, cropped image of 1250x550

<?php $photo_header = $page->image_staff_header->getCrop('crop-staff-photo'); ?>

My actual html which outputs this image looks like this (pre MarkupSrcSet)

<div class="uk-width-uk-width-1-1 staff-pic" style="background-image:url(<?= $photo_header->url?>);">

When I apply my MarkupSrc set, I think this is the proper way

<div 
data-bgset="<?php echo $photo_header->srcset('1200x550,/1.5,/2,/3'); ?>" 
data-sizes="auto"
class="lazyload uk-width-uk-width-1-1 staff-pic" 
style="background-image:url(<?php echo $photo_header->srcsetUrls[0]; ?>);"
>

and it does produce the following...

<div 
data-bgset="/site/assets/files/1089/adams_-_cubes-1.-crop-staff-photo.1200x550.jpg 1200w,
            /site/assets/files/1089/adams_-_cubes-1.-crop-staff-photo.800x366.jpg 800w,
            /site/assets/files/1089/adams_-_cubes-1.-crop-staff-photo.600x275.jpg 600w,
            /site/assets/files/1089/adams_-_cubes-1.-crop-staff-photo.400x183.jpg 400w" 
class="uk-width-uk-width-1-1 staff-pic uk-first-column" 
style="background-image:url(/site/assets/files/1089/adams_-_cubes-1.-crop-staff-photo.1200x550.jpg);"
>

However, I notice that when I inspect the Div above in Chrome, I always seem to have the same image regardless of device width

element.style {
    background-image: url(/site/assets/files/1089/adams_-_cubes-1.-crop-staff-photo.1200x550.jpg);
}

Is this right? Surely I should be seeing different image sizes above?

Cheers @tpr
 

[tpr]

If you view the page source, is the largest img variation set for the background image? The 0-index should be the smallest.

Btw if you start devtools in desktop size, then the smaller img variations will not be loaded. Start in small width and check if it loads the larger ones when you resize the viewport.

Edit: there is no lazyload or lazyloaded class in your final src, perhaps some hook is messing with the ing classes?

[Peter Knight]

Yep - I think it's all good.

<div data-sizes="auto" 
     data-bgset="/site/assets/files/1089/adams-cubes.-crop-staff-photo.1200x550.jpg 1200w,
                 /site/assets/files/1089/adams-cubes.-crop-staff-photo.800x366.jpg 800w,
                 /site/assets/files/1089/adams-cubes.-crop-staff-photo.600x275.jpg 600w,
                 /site/assets/files/1089/adams-cubes.-crop-staff-photo.400x183.jpg 400w" 
     class="uk-width-uk-width-1-1 staff-pic uk-first-column lazyloaded" 
     style="background-image:url('/site/assets/files/1089/adams-cubes.-crop-staff-photo.1200x550.jpg') ;">

Have cleared the cache, refreshed from small size and expanded that way.

[tpr]

Perhaps the 0-index fails to get the smallest img (I do not remember wether if it should or not). Could you try with $photo_header->srcsetUrls['smallest'], or with no initial style attribute at all?

[Peter Knight]

12 minutes ago, tpr said:

Perhaps the 0-index fails to get the smallest img (I do not remember wether if it should or not). Could you try with $photo_header->srcsetUrls['smallest'], or with no initial style attribute at all?

That's it. Removing the [0] at the end worked. Many thanks ?

[tpr]

You mean replacing with "smallest"? Otherwise it should throw an error.

[Peter Knight]

Correct. I am using

echo $photo_header->srcsetUrls['smallest']; 

If I use

echo $photo_header->srcsetUrls; 

there is an error but it only shows up in the network tab. The images seem to still work but they could be cached versions.

[Peter Knight]

Hi again @tpr

I notice on the code below I am getting both a data-srcset and a srcset too. Is this correct?

My input

<?php $myimage = $page->Images->first(); ?>
<img 
     class="lazyload"
     data-src="<?php echo $myimage->url ?>"
     data-srcset="<?php echo $myimage->srcset('800x0, /2, /3') ?>"
     alt="" 
 />

My output in browser

 <img class=" lazyloaded" 
 data-src="/site/assets/files/1/photo-steps-video.jpg" 
 data-srcset="
              /site/assets/files/1/photo-steps-video.800x0.jpg 800w,
              /site/assets/files/1/photo-steps-video.400x0.jpg 400w,
              /site/assets/files/1/photo-steps-video.266x0.jpg 266w" 
alt="" 
srcset="/site/assets/files/1/photo-steps-video.800x0.jpg 800w,
         /site/assets/files/1/photo-steps-video.400x0.jpg 400w,
         /site/assets/files/1/photo-steps-video.266x0.jpg 266w" 
src="/site/assets/files/1/photo-steps-video.jpg"
 >