1

I have a product description page that displays small product image with a link to the bigger image.

<a href="https://www.primarydomain.com/images/BIGimage.jpg" target="_blank">
<img src="https://www.primarydomain.com/images/SMALLimage.jpg"></a>

Since my web space is going to saturate, I must to move the whole image folder to another domain and try to load them from my primary domain.

Are there any tricks to transparently load images from other domain?

I thought to use .htaccess file to redirect all links like "https://primarydomain.com/images/.jpg" to a .Php page that loads the image from other domain (lets say "https://newdomain.com/images/.jpg" ) and show it in a div or other stuff.

What will happen to small image links using this approach? Whats the best practice to solve this problem?

example image

SMALL IMAGE:

Current link: https://www.primarydomain.com/images/SMALLimage.jpg

--> New link: https://www.newdomain.com/images/SMALLimage.jpg

BIG IMAGE:

Current URL: https://www.primarydomain.com/images/BIGimage.jpg

--> New URL: https://www.primarydomain.com/showImage.php?img=BIGimage.jpg

Image to be loaded from new link: https://www.newdomain.com/images/BIGimage.jpg

EDIT: Since the whole image folder was moved, also simple direct link to image must be redirected to the PHP page cause the image doesn't exists anymore on current domain. Maybe this can be achieved using .htaccess rewrite or redirect.

LightmanX
  • 21
  • 5
  • _“What will happen to small image links using this approach?”_ - that depends - on whether you can differentiate between them and the large ones by some sort of pattern that can be matched in the URL rewriting. _“Whats the best practice to solve this problem?”_ - to simply modify the image URLs in your HTML output accordingly, so that they point to the actual location in the first place. Everything else just adds overhead. – misorude Aug 22 '19 at 09:49

2 Answers2

2

An option is to replace all links using jQuery or javascript when the page loads.

Example

    <img src="w3javascript.gif" onload="loadImage()" width="100" height="132">

    <script>
    function loadImage() {
      alert("Image has loaded");
      // ... change <a href=""> links here ...
    }
    </script>

Docs:

MaartenDev
  • 5,631
  • 5
  • 21
  • 33
Bembenek
  • 36
  • 2
  • This solution doesn't provide any support for direct link access. If a customer try to use the old link to view the image, he will get 404 error cause image doesn't exists anymore. – LightmanX Aug 22 '19 at 10:22
1

Here it is the solution to my own question:

RewriteCond %{REQUEST_URI} /images/.*\.(png|gif|jpe?g|bmp)$  [NC]
RewriteCond %{HTTP_REFERER} ^$
RewriteRule (.*)  https://www.newdomain.cloud%{REQUEST_URI} [L,R=301]

It isn't a perfect solution to the problem but it is enough for now.

Thanks for support.

LightmanX
  • 21
  • 5