No images on mobile

  • Resolved nicholas_benoit

    (@nicholas_benoit)


    4 years, 10 months ago

    Hello,

    I’m testing out the free version of the plugin and so far I like how it works. The only problem I’m having is images are not loading in because they are calling the full URL instead of a relative URL, and I’m trying to share my site from my local server using ngrok. So even though everything else loads on the site loads in fine, the plugin is entering the URL for my local server and not the ngrok supplied URL. Is there a way to disable full URLs and just use relative paths?

    For example, my locally hosted address using Desktop Server is gokeyusa.dev.cc
    Since I’m using ngrok, it supplies a new URL, let’s say abc.xyz. When the plugin is calling the images, it’s calling the full src=”https://www.gokeyusa.dev.cc/wp-content/uploads … etc” instead of just src=”/wp-content/uploads/ …” etc.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author David Rosendo

    (@drosendo)

    Hello,

    I recommend reading this post: https://stackoverflow.com/questions/17187437/relative-urls-in-wordpress

    Do you know on any plugin using relative urls?

    Nevertheless if you really need it applied I have filters set in place that allow you to customize the url, as an example for some CDN: https://www.smart-variations.com/knowledge-base/how-to/adding-cdn-support/

    Does it help?

    Cheers,
    David

    Thread Starter nicholas_benoit

    (@nicholas_benoit)

    Thanks David,

    I realize the title of my original post should have been updated. When I first started asking the question, I thought it was just a mobile issue and forgot to update there. Woops.

    I haven’t been able to get the filter to work, but I’ll keep messing with it and see if I can figure it out. It was originally throwing an error saying it wanted 4 arguments but only 1 was available. I got it to stop throwing the error by only passing only $image, but then it was still using the site URL and not the ngrok url that I replaced {Insert cdn URL here} with.

    Also, as far as I can tell, WooCommerce uses relative URLs for all of it’s images. At least that’s what it shows when I inspect the element of any image that it pulls.

    See https://40fc667c.ngrok.io/home/gokey-boots/the-supreme/ for example. The thumbnails pulled for the related products at the bottom are all relative.

    It’s not a huge deal, I can set up a staging environment on the site’s cPanel, I was just hoping to be able to share it w/ ngrok.

    Thanks again,

    Nick

    Thread Starter nicholas_benoit

    (@nicholas_benoit)

    Got it to work!

    I had to change your CDN example to:

    function svi_cdn_image_url($image)
{

    $url = $image[0];
    $types = ["gif", "png", "jpg"];
    $type = substr($url, -3);
    if (in_array($type, $types)) {
        $site = get_site_url();
        $cdn = "{ngrok URL}";
        $image[0] = str_replace($site, $cdn, $url);
    }

    return $image;
}
add_filter('wp_get_attachment_image_src', 'svi_cdn_image_url');

    Interestingly enough, with the filter in place, it adds the ngrok URL to all of the images, even the ones WooCommerce was displaying as relative in my example above. If I remove the filter, they go back to relative.

    All good now!

    Plugin Author David Rosendo

    (@drosendo)

    Hi,

    just FYI you can see the official storefront theme: https://themes.woocommerce.com/storefront/product/lowepro-slingshot-edge-250-aw/

    There is no relative urls :/

    Maybe you have something else removing and covnertinf everythign to relative urls.

    Cheers,
    David

    Thread Starter nicholas_benoit

    (@nicholas_benoit)

    Good call! I just checked out the live version on the site’s real domain and they are all absolute, but when hosted through Desktop Server Pro it removes them. I guess it doesn’t mess w/ the plugin because it’s all done after the fact in javascript.

    Thanks for the help!

    Plugin Author David Rosendo

    (@drosendo)

    No problem.

    When you have the time would really appreciate a review.

    Cheers,
    david

    Thread Starter nicholas_benoit

    (@nicholas_benoit)

    Done! Thanks again!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘No images on mobile’ is closed to new replies.