Redirecting from image to page

[Skotina]

Hey there,

I have a lot of visitors who directly linking to uploaded images and until now I didn't worry about it - the amount of traffic of this kind is huge and I would like to convert it to money

So the idea is to automatically redirect all image visitors to a page this image originates from.

E.g.: Someone clicks a link like http://cdn-demo.chevereto.com/images/2015/04/30/bussines-man.png but instead of image he is being redirected to the page http://demo.chevereto.com/image/N1w

Any ideas how to implement this?

 

[LEckley]

I am looking to accomplish the same thing, any suggestions out there?

 

[Rodolfo]

You can use the ID based filenaming so anything/<id>.ext could be redirected to /image/<id> if conditions meet. The basic redirect will be something like this:

Root .htaccess

RewriteCond %{REQUEST_FILENAME} -f
RewriteCond %{HTTP_REFERER} ^$
RewriteRule images\/.+\/(\w+)(\.md|th){0,1}\.(gif|jpe?g|png|bmp) http://127.0.0.1/image/$1 [NC,L,R=301]

Put it right below "RewriteEngine On".

The rule can be read as "For any existing file, which has a blank referrer (someone opening the image directly using copy-paste), redirect him to /image/<id>". Note that if someone clicks the image URL this rule won't do anything so in that case you need this:

RewriteCond %{REQUEST_FILENAME} -f
RewriteCond %{HTTP_REFERER} ^$
RewriteCond %{HTTP_REFERER} !^http://127.0.0.1/$
RewriteRule images\/.+\/(\w+)(\.md|th){0,1}\.(gif|jpe?g|png|bmp) http://127.0.0.1/image/$1 [NC,L,R=301]

This rule does the same as the other one, but in this case this one will be triggered on blank referrers (copy-paste direct link) and when someone request this image from another URL (http://127.0.0.1/ is your website in this example).

You can play a LOT with the RewriteCond and if you notice, the RewriteRule is always the same so basically you change the conditions that trigger the redirection.

Hope it helps.

 

[LEckley]

Thanks!

Any chance you have those for Nginx?

 

[Rodolfo]

Thanks!

Any chance you have those for Nginx?

http://nginx.org/en/docs/http/converting_rewrite_rules.html

 

[LEckley]

http://nginx.org/en/docs/http/converting_rewrite_rules.html

Thanks!

 

[LEckley]

Hi @Rodolfo,

I proceeded to translate the rules over to Nginx, however I ran into several issues which prompted me to setup an Ubuntu VM running Apache 2.4 so I could perform further testing using the rules you provided.

The rules you provided above unfortunately aren't working completely and so far I haven't been able to resolve it.

Right this is what I am seeing...

Direct Image Link -- Redirect --> Image Page --> Page Loads --> Image fails to load --> refresh page (browser button) --> page reloads & image shows perfectly

I am not entirely sure sure why the image is failing to load initially, however I do suspect its because the referrer is still blank until which time the browser page is refreshed.

Thoughts?

Further thought, ideally users should still be able to embed the image on their sites as well...well at least the thumbnail I suppose?

 

[Rodolfo]

You have to play with the conditionals to make it fit your needs, also you need to test this without cache or any client side cache that could give you wrong previews of those.

 

[AshleyUK]

I can't seem to get this working??
This is what my test htaccess looks like.

# Disable server signature
ServerSignature Off

# Disable directory listing (-indexes), Multiviews (-MultiViews) and enable Follow system links (+FollowSymLinks)
Options -Indexes
Options -MultiViews
Options +FollowSymLinks

<IfModule mod_rewrite.c>

    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} -f
    RewriteCond %{HTTP_REFERER} ^$
    RewriteRule images\/.+\/(\w+)(\.md|th){0,1}\.(gif|jpe?g|png|bmp) http://ultraimg.com/image/$1 [NC,L,R=301]

    # If you have problems with the rewrite rules remove the "#" from the following RewriteBase line
    # You will also have to change the path to reflect the path to your Chevereto installation
    # If you are using alias is most likely that you will need this.
    #RewriteBase /
   
    # 404 images
    # If you want to have your own fancy "image not found" image remove the "#" from RewriteCond and RewriteRule lines
    # Make sure to apply the correct paths to reflect your current installation
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule images/.+\.(gif|jpe?g|png|bmp) - [NC,L,R=404]
    #RewriteRule images/.+\.(gif|jpe?g|png|bmp) content/images/system/404.gif [NC,L]

    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !\.(css|js|html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml|asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|exe|gif|gz|gzip|ico|jpe?g|jpe|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|swf|tar|tif|tiff|wav|wma|wri|xla|xls|xlsx|xlt|xlw|zip)$ [NC]
    RewriteRule . index.php [L]
   
</IfModule>

I've tried with both:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} -f
RewriteCond %{HTTP_REFERER} ^$
RewriteRule images\/.+\/(\w+)(\.md|th){0,1}\.(gif|jpe?g|png|bmp) http://ultraimg.com/image/$1 [NC,L,R=301]

and

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} -f
RewriteCond %{HTTP_REFERER} ^$
RewriteCond %{HTTP_REFERER} !^http://ultraimg.com/$
RewriteRule images\/.+\/(\w+)(\.md|th){0,1}\.(gif|jpe?g|png|bmp) http://ultraimg.com/image/$1 [NC,L,R=301]

Neither of them appear to work? I put the code in, clear my browsers cache, and then test an image and it just goes to the direct link. It doesn't redirect to the page??

Any ideas why this might be?
I'm running Apache.

 

[Rodolfo]

You need to test it in private navigation with no cache at all.

 

[AshleyUK]

I edited the htaccess file.
I uploaded a new image, and then tried to view the direct link on a entirely different computer.

The direct link was still loaded, not the page as expected.

I also tried a few more images with adding 'th' and 'md' in the direct link url, but still no luck.


----- EDIT ------

Oh hang on... I'm using cloudflare, so I'll probably have to purge the cache. I'll try that.

----- EDIT 2 ------

Hmmm, well even after disabling the cache in cloudflare, and also turning on development mode, it made no difference.
The direct link is still loading, not the page.

----- EDIT 3 ------

Rodolfo,
Have you tested the above code on your demo site? If so, did it work? If not, could you please test and let us have the full code so that we can implement this feature on our sites to start converting the direct traffic to money.
Thanks.

 

[Rodolfo]

No, I didn't tested on the demo website because that runs nginx. I tested in my local apache server and it worked. Most likely is working for you but you think that it will do something different or you have browser cache turned on.

 

[LEckley]

Hey Guys,

I realize this thread is old, but now that I am moving away from CloudFlare I can finally implement the redirection.

The rules above are working well for images that aren't using external storage, however those on external storage (sFTP + Apache) I am running into a redirect loop and so far I have failed to resolve the issue.

external.domain.com/image.png --> redirects --> domain.com/image/image

Once it redirects to the page, the image loads briefly and then it fails to load (I believe this is due to a redirection loop).

Any ideas?

 

[Rodolfo]

Problem is that there is no quick way to map external storage contents back to local, the only way to achieve it is to manually insert every image and put the corresponding redirection.

There is another alternative (the one that I should use in your case) and is basically take the cname and point it to your localhost then indicate the cname (sub-domain) in the redirection rule, by doing this the rule applies only for those URLs and not the ones that doesn't map to that storage.

 

[mark012492]

I have implemented the rewrite rules and changed to ID file naming. Works fine for new uploads however it doesn't work with existing uploads. Any way to make the current uploads work properly?

 

[mark012492]

Now that things have calmed down a bit from the recent release. Anyone have any ideas on my above question?

 

[Rodolfo]

You will need to manually rename each filed and alter each image database row.