MarkupSrcSet

[Autofahrn]

1 hour ago, Peter Knight said:

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

Guess this is the result from the lazyload which simply copies the data-srcset into srcset. Did you check the page source (as received from server) or DOM tree in inspector?

[tpr]

I think @Autofahrn is right, the module should output anything only on $img->srcset().

[dotnetic]

Yes,  @Autofahrn is right. The data-attributes are converted into real attributes from lazysizes

[Zeka]

@tpr Do you plan to implement support of webp?

[tpr]

Nothing in sight, how could that work? Only setting webp urls, or somehow combined with fallback to non-webp format?

[Stefanowitsch]

Definately looking forward for WEBP support :-)

[Tyssen]

I've come back to this module again for a project I'm working on and I'm finding that when I'm working locally, any pages that are calling srcset take ages to render.

I thought it was just because it's taking a while for PW to process all the different image sizes but it happens every time I reload the page. If I remove the images, the page loads quickly.

This doesn't happen on the production server where pages load fine, it's just on my local setup. Any idea what might be causing that?

[Tyssen]

On 1/10/2020 at 7:25 PM, Stefanowitsch said:

Definately looking forward for WEBP support ?

Same. Any news on if this is likely to be included?

[Rob(AU)]

I've just discovered this module and am unable to get any images to show from it. My setup is on localhost using php 7.3, PW 3.0.165 with lazysizes.

The code in my template is:

if($page->main_image) echo "<img data-srcset='$page->main_image->srcset('1500x1000,/2,/3,*1.5')' class='mainimageH' data-sizes='auto' alt='$page->headline'>";

No image is shown and the output I get is:
<img data-srcset='pnz007n.jpg->srcset('1500x1000,/2,/3,*1.5')' class='mainimageH' data-sizes='auto' alt='sunset at Lake Tekapo on the South Island of New Zealand'>

My guess is it is something simple that I'm missing ?

I too would really like to see this support WebP.

[teppo]

13 minutes ago, Rob(AU) said:

The code in my template is:

if($page->main_image) echo "<img data-srcset='$page->main_image->srcset('1500x1000,/2,/3,*1.5')' class='mainimageH' data-sizes='auto' alt='$page->headline'>";

No image is shown and the output I get is:
<img data-srcset='pnz007n.jpg->srcset('1500x1000,/2,/3,*1.5')' class='mainimageH' data-sizes='auto' alt='sunset at Lake Tekapo on the South Island of New Zealand'>

That's to be expected, actually: if you use variables within strings and need to go more than one level deep, you must enclose the variable in curly brackets.

if($page->main_image) echo "<img data-srcset='{$page->main_image->srcset('1500x1000,/2,/3,*1.5')}' class='mainimageH' data-sizes='auto' alt='$page->headline'>";

It's never wrong to add the curly brackets, but if you've got more than one "->" in the same reference, you need to use them. "Text and $page->title" works, but "Text and $page->parent->title" won't — latter needs to be "Text and {$page->parent->title}" ?

This is a little opinionated, but I would actually recommend splitting the string. Most code editors won't be able to highlight code properly if it's within a string, and at least in my opinion it's also easier to read when it's not just one big blob:

if($page->main_image) echo "<img data-srcset='" . $page->main_image->srcset('1500x1000,/2,/3,*1.5') . "' class='mainimageH' data-sizes='auto' alt='" . $page->headline . "'>";

 

[Rob(AU)]

This is what I really appreciate about the PW community! I post a question, have dinner and come back to a helpful answer!

Thank you teppo. Your explanation helped me learn more about PW. 

I'm closer, but not quite there. I'm obviously missing something about how to use the module.
Using teppo's code:

if($page->main_image) echo "<img data-srcset='{$page->main_image->srcset('1500x1000,/2,/3,*1.5')}' class='mainimageH' data-sizes='auto' alt='$page->headline'>";

produces this output, but no image.

<img data-srcset='/landscapes/site/assets/files/1216/pnz007n.1500x1000.jpg 1500w,/landscapes/site/assets/files/1216/pnz007n.750x500.jpg 750w,/landscapes/site/assets/files/1216/pnz007n.500x333.jpg 500w,/landscapes/site/assets/files/1216/pnz007n.2250x1500.jpg 2250w' class='mainimageH' data-sizes='auto' alt='sunset at Lake Tekapo on the South Island of New Zealand'>

I came back to it this morning, and was able to work around this by using srcset instead of data-srcset. The code that works is:

if($page->main_image) echo "<img srcset='{$page->main_image->srcset('0x1000,/2,/3,*1.5')}' class='mainimageH' alt='$page->headline'>";

 

Edited February 1, 2021 by Rob(AU)
update with question resolved

[neonwired]

Can this generate picture elements i'm trying to use different aspect ratio images on smaller screens?

[Stefanowitsch]

Hello I have a question about the quality parameter as mentioned here: https://github.com/rolandtoth/MarkupSrcSet/wiki

My problem is that I am displaying a picture and I am using the MarkupSrcsSet Module. The picture has a fine color gradient in the background and the final image that is rendered looks very poor - quality wise. It show lots of artifacts in the gradient.

The original image that I uploaded in processwire is fine! It is the module itself that is downgrading the quality it seems.

When using the quality parameter in my code however it does not affect the rendered image in any way. It still looks bad, even with quality set to 100%.

Here's my code:

 <img data-srcset="<?php echo $image->srcset('original,/1.5,/2,/3',array('quality' => 100)) ?>"
      src="<?php echo 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='; ?>"
      data-sizes="auto"
      class="lazyload img-fluid big-img"
      alt="<?= $image->description; ?>"/>

I attached an image of a part of the gradient.

[Stefanowitsch]

Okay I solved this problem. It seems that it was not the modules fault but Processwires $image->size() function was creating terrible artifacts on some gradients. It had to do with the defaultGamma value. 

I put this into the config.php and now all resized images look great:

$config->imageSizerOptions = array('quality' => 100, 'sharpening' => 'medium', 'defaultGamma' => -1);

[jploch]

this module is still a great time saver. Today I tried to use the feature to automatically load the script. But it's not working, even if I have the markup with the data-srcset rendered on the page. It's working if I load it manually.