Search code examples
image.htaccessdnsscreenshot

Image .htaccess styling

I want to take a link of a screenshot image from my domain (example: http://shot.byarr.ws/PSH.png) and dress it up a little by wrapping it up with a styled landing page, much like cloudapp (example: http://cl.ly/CP1i) for mac does when linking to a file/image.

I know this can be done with .htaccess but I have very little knowledge of such mystical practices so I'm in the need of a little guidance.

Thanks in advanced.

Solution

  • When you load an image like http://shot.byarr.ws/PSH.png, it is just the image. No html, scripts, code, css, or anything else gets loaded, so there's no inherent way to stylize the image that is being view by the browser. It's just an image and it's completely up to the browser how to render it, you have no control.

    On the other hand, you could redirect or rewrite requests for images, e.g. all requests ending with png, jpg, gif, jpeg, etc. to a script that loads the image and renders HTML so that when the browser views it, it looks stylized. I don't know of anything offhand that will allow you to do this, you may have to write your own script or just do a google search on a simple image gallery/viewer php script.

    For example, say you've found a script called view_image.php, as a parameter, it takes img and the value is the path to that image. So if you want to view the http://shot.byarr.ws/PSH.png image using the view_image.php script, you go to http://shot.byarr.ws/view_image.php?img=PSH.png (this is just an example, that link won't work). In order to make all images behave this way, you can use .htaccess and mod_rewrite to rewrite requests for image and send them to the view_image.php script:

    RewriteEngine On
# Make sure it is an image
RewriteCond %{REQUEST_URI} \.(png|gif|jpe?g)$ [NC]
# Make sure image exists
RewriteCond %{REQUEST_FILENAME} -f
# rewrite the URI so that it goes to the script
RewriteRule ^(.+)$ /view_image.php?img=$1 [L]

    Note that if you do this, and try to link to http://shot.byarr.ws/PSH.png in a page, it won't load the image, it will load the script instead and your page will appear to have a broken image.