Autofahrn Posted March 20, 2019 Share Posted March 20, 2019 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? 1 Link to comment Share on other sites More sharing options...
tpr Posted March 20, 2019 Author Share Posted March 20, 2019 I think @Autofahrn is right, the module should output anything only on $img->srcset(). Link to comment Share on other sites More sharing options...
dotnetic Posted March 20, 2019 Share Posted March 20, 2019 Yes, @Autofahrn is right. The data-attributes are converted into real attributes from lazysizes 1 Link to comment Share on other sites More sharing options...
Zeka Posted November 15, 2019 Share Posted November 15, 2019 @tpr Do you plan to implement support of webp? Link to comment Share on other sites More sharing options...
tpr Posted November 15, 2019 Author Share Posted November 15, 2019 Nothing in sight, how could that work? Only setting webp urls, or somehow combined with fallback to non-webp format? Link to comment Share on other sites More sharing options...
Stefanowitsch Posted January 10, 2020 Share Posted January 10, 2020 Definately looking forward for WEBP support :-) 1 Link to comment Share on other sites More sharing options...
Tyssen Posted April 17, 2020 Share Posted April 17, 2020 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 More sharing options...
Tyssen Posted April 29, 2020 Share Posted April 29, 2020 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? 1 Link to comment Share on other sites More sharing options...
Rob(AU) Posted February 1, 2021 Share Posted February 1, 2021 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 More sharing options...
teppo Posted February 1, 2021 Share Posted February 1, 2021 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 More sharing options...
Rob(AU) Posted February 1, 2021 Share Posted February 1, 2021 (edited) 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 Link to comment Share on other sites More sharing options...
neonwired Posted February 2, 2021 Share Posted February 2, 2021 Can this generate picture elements i'm trying to use different aspect ratio images on smaller screens? Link to comment Share on other sites More sharing options...
Stefanowitsch Posted June 17, 2021 Share Posted June 17, 2021 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. Link to comment Share on other sites More sharing options...
Stefanowitsch Posted June 21, 2021 Share Posted June 21, 2021 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 More sharing options...
jploch Posted July 27, 2022 Share Posted July 27, 2022 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now