CODEWITHSUNDEEP
phphtml.htaccess
LightmanX
LightmanX

Reputation: 30

Load images from other domain using .htaccess and php

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.

Upvotes: 1

Views: 887

Answers (2)

LightmanX
LightmanX

Reputation: 30

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.

Upvotes: 1

Bembenek
Bembenek

Reputation: 36

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:

Upvotes: 2

Related Questions