Jump to content

MarkupSrcSet


tpr

Recommended Posts

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.

  • Like 1
Link to comment
Share on other sites

  • 6 months later...
  • 1 month later...

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?

Link to comment
Share on other sites

$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!

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

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. 

  • Like 5
Link to comment
Share on other sites

  • 2 weeks later...

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?

Link to comment
Share on other sites

  • 1 month later...

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 year later...

@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.

Link to comment
Share on other sites

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
 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

  • Like 1
Link to comment
Share on other sites

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 ?

Link to comment
Share on other sites

  • 2 months later...

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"
 >  

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...