Serve Images in Next-Gen Formats

14 posts by 4 authors in: Forums > CMS Builder
Last Post: August 28, 2019   (RSS)

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.

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.

Greg Thomas







PHP Programmer - interactivetools.com