Serve Images in Next-Gen Formats
14 posts by 4 authors in: Forums > CMS Builder
Last Post: August 28, 2019 (RSS)
By Jesus - August 27, 2019
Hi Greg, thanks for your answer.
That's exactly what I'm trying to do, but for some reason I'm not able to have my slider working at this point. This its the code:
<picture>
<?php foreach ($record['imagen_webp'] as $index => $upload): ?>
<source type="image/webp" srcset="<?php echo htmlencode($upload['urlPath']) ?>">
<?php endforeach ?>
<?php foreach ($record['imagen'] as $index => $upload): ?>
<source type="image/jpeg" srcset="<?php echo htmlencode($upload['urlPath']) ?>">
<img src="<?php echo htmlencode($upload['urlPath']) ?>">
<?php endforeach ?>
</picture>
and here the result:
<picture>
<source type="image/webp" srcset="/cms/uploads/s-playas-en-mexico.webp">
<source type="image/jpeg" srcset="/cms/uploads/s-playas-en-mexico.jpg">
<img src="/cms/uploads/s-playas-en-mexico.jpg">
</picture>So I'm seeing the proper result, but not the image. I'll continue to check it and keep you updated.. probably I'm missing something here in my code or so.
By gregThomas - August 28, 2019 - edited: August 28, 2019
Hey Jesus,
Your code looks good to me, that's very close to how I'd set it up. The only change I'd make is to load both images in a single foreach loop:
<picture>
<?php foreach ($record['imagen_webp'] as $index => $upload): ?>
<?php $imagenImage = $record['imagen'][$index]?? []; ?>
<source type="image/webp" srcset="<?php echo htmlencode($upload['urlPath']) ?>">
<?php if($imagenImage): ?>
<source type="image/jpeg" srcset="<?php echo htmlencode($upload['urlPath']) ?>">
<?php endif; ?>
<img src="<?php echo htmlencode($upload['urlPath']) ?>" />
<?php endforeach ?>
</picture>I'm not sure what you mean by 'seeing the proper result but not the image', do you mean the jpeg image is loading, not the webp one?
PHP Programmer - interactivetools.com
By Jesus - August 28, 2019
Exactly, but I think that's an issue with my slider (revolution slider). I'm checking with the developer as the image its in there, if I see the source code I'm seeing both images (the jpg and the webp)
Probably what I'll need to do its to load one or another, depending on the browser... but I don't think I can make that work (probably), but need to check it.
Thanks for the adjustment with the code.
Hey Jesus,
That does sound like an issue with the slider system, my guess is the CSS isn't expecting a picture tag to be used. Hopefully, the developer will be able to suggest a fix.
PHP Programmer - interactivetools.com