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?

Greg Thomas







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.