Webp use local directory when media set to cloudfront

[Khushpinder]

When media is from cloudfront, webp not use the cloudfront url, it is getting from local directory

[jissereitsma]

What did you do to make sure Cloudfront was used in the first place? Because out-of-the-box, Magento only supports a different media URL and that media URL simply would apply to WebP images as well. In other words, you are probably overlooking that your Magento shop has some customization done already.

[Khushpinder]

Yes, Media URL set to https://d31m0372zcgus6.cloudfront.net/ whereas my site URL is https://www.generalapparel.org/ when media load in picture tag, it shows as below

< picture class="product-image-photo">
< source type="image/webp" srcset="https://www.generalapparel.org/media/catalog/product/cache/db9e8987edbc18f3ea16cf30e24c4284/f/2/f200_front_angle_coalgreycoalgrey_082015.webp" >
< img class="product-image-photo" src="https://d31m0372zcgus6.cloudfront.net/catalog/product/cache/db9e8987edbc18f3ea16cf30e24c4284/f/2/f200_front_angle_coalgreycoalgrey_082015.jpg" loading="lazy" >
< /picture >

[Khushpinder]

It was working fine, issue came after I upgrade to new version.

New Version

Yireo NextGenImages
Module version  0.5.10
Yireo WebP2
Module version  0.14.3

Old Version

Yireo NextGenImages
Module version  0.2.13
Yireo WebP2
Module version  0.11.4

[Khushpinder]

I added following lines of code in function convertImage in vendor\yireo\magento2-webp2\Convertor\Convertor.php file at the end and return $webpImage

and create setURL function in vendor\yireo\magento2-next-gen-images\Image\Image.php to update private attribute url

   if (str_contains($image->getPath(), 'catalog/product')) { 
        $newWebpUrl = $this->imageFile->convertSuffix($image->getUrl(), 'webp');
        if ($this->imageFile->uriExists($newWebpUrl)) {
            $webpImage->setUrl($newWebpUrl);
        }
    }

and output:

< picture class="product-image-photo">
< source type="image/webp" srcset="https://d31m0372zcgus6.cloudfront.net/catalog/product/cache/db9e8987edbc18f3ea16cf30e24c4284/f/2/f200_front_angle_coalgreycoalgrey_082015.webp" >
< img class="product-image-photo" src="https://d31m0372zcgus6.cloudfront.net/catalog/product/cache/db9e8987edbc18f3ea16cf30e24c4284/f/2/f200_front_angle_coalgreycoalgrey_082015.jpg" loading="lazy" >
< /picture >

Note: this is private site only for development

[madleen]

Hello,
I also had this same error related to Cloudfront, I had to rollback.
Have you been able to fix this problem please?
Have a good day

thanks @Khushpinder Your issues helped me quickly identify my problem. 👍

[Khushpinder]

Hello, I also had this same error related to Cloudfront, I had to rollback. Have you been able to fix this problem please? Have a good day

thanks @Khushpinder Your issues helped me quickly identify my problem. 👍

Did you try my solution?

[madleen]

Hi @Khushpinder ,
No, I didn't have the opportunity to test. I just had Rollback the version of the module.