Product images not loading, if using CDN

Resolved simon_a6
(@simon_a6)

10 months, 1 week ago

Hi

We have an odd problem on a site that uses your plugin.

The site uses a CDN for images, as they sell a lot abroad. They are UK based.
On the live site with your plugin enabled, the Product main image and its gallery, will not load. You just get a black box.

With the plugin off, they load.

This us using the DIVI theme. They have taken me around in circles, tlaking about Cloudflare (which does not cache the site) and other things. But bottom line, with your plugin disabled, it works. With it enable, it doesn’t.

Can you help? Not sure how i can give you the URL without revealing too much tho.

Regards

Simon

Viewing 15 replies - 1 through 15 (of 29 total)

1 2 →

Plugin Author David Rosendo
(@drosendo)

10 months, 1 week ago

Hey! Thanks for reaching out.

Hope this article helps: Adding CDN support – Smart Variations Images (smart-variations.com)

Let me know.

Cheers,
David

Thread Starter simon_a6
(@simon_a6)

10 months, 1 week ago

Thanks for the fast reply/. I got this warning:

Uncaught ArgumentCountError: Too few arguments to function svi_cdn_image_url(), 1 passed in wp-includes/class-wp-hook.php on line 326 and exactly 4 expected in wp-content/themes/vertical-divi/functions.php:198 Stack trace: #0 wp-includes/class-wp-hook.php(326): svi_cdn_image_url(Array) #1 wp-includes/plugin.php(205): WP_Hook->apply_filters(Array, Array) #2 wp-includes/media.php(1019): apply_filters(‘wp_get_attachme…’, Array, ‘6’, ‘woocommerce_thu…’, false) #3 wp-content/plugins/woocommerce/includes/wc-product-functions.php(297): wp_get_attachment_image_src(‘6’, ‘woocommerce_thu…’) #4 wp-content/plugins/woocommerce-gift-cards/includes/admin/class-wc-gc-admin.php(226): wc_placeholder_img_src() #5 wp-includes/class-wp-hook.php(324)
Plugin Author David Rosendo
(@drosendo)

10 months, 1 week ago
The error occurs because the wp_get_attachment_image_src filter expects four parameters, but your filter function declaration only has one. The correct approach is to define all four parameters in your function signature. Additionally, you should return the $image array rather than just the URL.

Here’s the updated code:
```
function svi_cdn_image_url($image, $attachment_id, $size, $icon)
{
    // Check if it's a WooCommerce product page and the SVI plugin is active
    if (is_product() && class_exists('Smart_Variations_Images_Public')) {
        $url = $image[0];
        $types = ["gif", "png", "jpg"];
        $type = strtolower(pathinfo($url, PATHINFO_EXTENSION));
        if (in_array($type, $types)) {
            $site = get_site_url();
            $cdn = "{Insert cdn url here}";
            $image[0] = str_replace($site, $cdn, $url);
        }
    }

    return $image; // Return the whole array, not just the URL
}
add_filter('wp_get_attachment_image_src', 'svi_cdn_image_url', 10, 4);
```
Explanation of Fixes:
1. Function Signature: The function now correctly includes all four parameters: $image, $attachment_id, $size, and $icon.
2. Correct Return Value: The function now returns the entire $image array.
3. Filter Hook: The add_filter call correctly specifies 10, 4 to ensure that WordPress passes all four arguments to the callback function.
Let me know.
Thread Starter simon_a6
(@simon_a6)

10 months, 1 week ago

Sorry it hasn’t resolved it. Here is the page in question.

https://annahaymandesigns.com/product-page/giraffe-mono-herringbone-fabric/

Hopefully you can see the issue of the grey box and the missing images.

Plugin Author David Rosendo
(@drosendo)

10 months, 1 week ago

https://ibb.co/GnYMd4S
This is what I see on that url and the images are running cdn address ? What am I missing?

Cheers,
David

Thread Starter simon_a6
(@simon_a6)

10 months, 1 week ago

This is what I see. And the code is different too, from when you do see an image there.

https://ibb.co/MBLmzSC

Thread Starter simon_a6
(@simon_a6)

10 months, 1 week ago

https://ibb.co/8jMKWwg

Also this. The top set of code is from the live site.
The bottom set is from our dev. site, and you see the difference at the tobtotm, wtih the woosvi_strap CSS classed Div – with the image. That is entirely missing from the live site.
If I disable your plugin, it shows.
Plugin Author David Rosendo
(@drosendo)

10 months, 1 week ago
Hmm… My guess is that you are logged in, and the CDN doesn’t work for logged-in users.

It’s my first time visiting the site, and everything seems good with the CDN URLs changed.
```
I guess you have to disable if you are logged as admin or have managing woocommerce capabilities:



function svi_cdn_image_url($image, $attachment_id, $size, $icon)

{

// Check if it's a WooCommerce product page and the SVI plugin is active

if (is_product() && class_exists('Smart_Variations_Images_Public')) {

// Check if the user is not a back-office user with the WooCommerce manager role

if (!current_user_can('manage_woocommerce')) {

$url = $image[0];

$types = ["gif", "png", "jpg"];

$type = strtolower(pathinfo($url, PATHINFO_EXTENSION));

if (in_array($type, $types)) {

$site = get_site_url();

$cdn = "{Insert cdn url here}";

$image[0] = str_replace($site, $cdn, $url);

}

}

}

return $image; // Return the whole array, not just the URL

}

add_filter('wp_get_attachment_image_src', 'svi_cdn_image_url', 10, 4);
```
Thread Starter simon_a6
(@simon_a6)

10 months, 1 week ago

No these two tests are on Incognito on Chrome – not logged in.

But I am told if you are not in the ‘zone’ of the CDN, it won’t load the CDN image. Not sure if that affects you. But if you try loading it via this, it may help to see the issue.
https://www.ieonchrome.com/
Plugin Author David Rosendo
(@drosendo)

10 months, 1 week ago
```
function svi_cdn_image_url($image, $attachment_id, $size, $icon)

{

// Check if it's a WooCommerce product page and the SVI plugin is active

if (is_product() && class_exists('Smart_Variations_Images_Public')) {

// Check if the user is not a back-office user with the WooCommerce manager role

if (!current_user_can('manage_woocommerce')) {

$url = $image[0];

$types = ["gif", "png", "jpg"];

$type = strtolower(pathinfo($url, PATHINFO_EXTENSION));

if (in_array($type, $types)) {

$site = get_site_url();

$cdn = "{Insert cdn url here}";

$cdn_url = str_replace($site, $cdn, $url);

// Check if CDN URL exists

if (svi_url_exists($cdn_url)) {

$image[0] = $cdn_url;

} else {

$image[0] = $url; // Use original URL if CDN URL does not exist

}

}

}

}

return $image; // Return the whole array, not just the URL

}

add_filter('wp_get_attachment_image_src', 'svi_cdn_image_url', 10, 4);

// Function to check if URL exists

function svi_url_exists($url)

{

$headers = @get_headers($url);

if($headers && strpos($headers[0], '200')) {

return true;

}

return false;

}
```
Then the recomendation would be to validade the user location and either load the original path or load cdn.
Here goes and approach that may automaticly determine and either load one or the other:
Thread Starter simon_a6
(@simon_a6)

10 months, 1 week ago

The problem is, I am in the UK. All categories load. Everyuthing loads. The logo loads.
But those product page images do NOT load. And if we turn off your plugin, it DOES load form the CDN.

So it is not a CDN issue. BUT, if we disable the CDN the image does load.

I just don’t get it at all.

Plugin Author David Rosendo
(@drosendo)

10 months, 1 week ago

Im in Portugal and the CDN loads the images ok. I just tried via UK using a VPN and also works.

What I can see is that the images are not yet loaded on the CDNs and for that reason it doesnt load.
I check the urls and they are replaced correctly but images dont show.
I have works with cloudflare with no issues so far.
Maybe you have to wait?

Thread Starter simon_a6
(@simon_a6)

10 months, 1 week ago

BTW I used that code too, but still nothing. Something stops that whole line of woosvt_strap code from even being generated, when your plugin is enabled.

Turn it off, and it loads just fine.

It won’t load for me on any browser, logged in or not. Nor on my phone.

Or via that virtual browser I sent you.
https://annahaymandesigns.com/product-page/giraffe-mono-herringbone-fabric/
The image will just not load. And if you look in the source code, that won’t even load the code that SHOULD show the image.

Plugin Author David Rosendo
(@drosendo)

10 months, 1 week ago

very weird indeed. What CDN are you using?

Could you try on oyour staging replacing the theme with some ohter and see if issue occours?

Plugin Author David Rosendo
(@drosendo)

10 months, 1 week ago

Try activating the option:

Use Feat. Image as Preload
and adjust the images sizes for main images and Thumbnails

Viewing 15 replies - 1 through 15 (of 29 total)

1 2 →

The topic ‘Product images not loading, if using CDN’ is closed to new replies.