Jump to content

MarkupSrcSet


tpr

Recommended Posts

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?

  • Like 1
Link to comment
Share on other sites

  • 7 months later...
  • 1 month later...
  • 3 months later...

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?

Link to comment
Share on other sites

  • 2 weeks later...
  • 9 months later...

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.

Link to comment
Share on other sites

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 . "'>";

 

Link to comment
Share on other sites

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 by Rob(AU)
update with question resolved
Link to comment
Share on other sites

  • 4 months later...

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.

Bildschirmfoto 2021-06-17 um 15.16.42.png

Link to comment
Share on other sites

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);
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...