Redirecting image hotlink to the article the image was used on; where/how to store the connecting information?

Question

I have an app in node.js and I want to make a route that redirects all hotlinks to images to the article/URL the image was used on.

But since all the images are stored in /public/img directory and article URLs are generated programmatically, how do I tie down each image to its article? ..in a way that would allow me to redirects all hotlinks to the images to the article/URL the image was used on?

For example,

My article is

http://www.site.com/blog/archives/2013/article-slug/

and it uses the image

http://www.site.com/img/that-image.jpg

because all images are stored in /public/img dir.

Then if someone hotlinks to the image http://www.site.com/img/that-image.jpg, how do I redirect to the article it was used in http://www.site.com/blog/archives/2013/article-slug/? (I can check whether it was hotlinked probably by checking the referrer header)

But how do I store the relevant information about which image is used in which article, and how do I use that information to do the redirect?

Answer 1

If what you mean is making a link between the image and the article, then you could include your image in a link:

<a href="/my/url/to/my/article.html">
    <img src="/my/url/to/my/image.png" width="42" height="42">
</a>

When people click on your image, they would be directed to the corresponding article.

Answer 2

Here are some .htaccess rules that will do the redirect you want:

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?mysite\.example\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule img/that-image\.jpg$ /blog/archives/2013/article-slug/ [R]

You would need a set of these rewrite rules for each of your images to redirect them to the correct place. If you have lots of articles, that probably would not perform well. Hundreds of rewrite rules can really slow down a server.

Alternately, you could create a front controller for your image directory and serve the images programmatically.

Even then, I wouldn't recommend this approach. If the images are hot linked from another site it <img> tags, the other site will see broken links. Instead of redirecting to the article, I would recommend redirecting to a "hotlinking forbidden" gif. That way users see a relevant error message.