Image Proxy

Move photos and files to different server using php

It is possible to move the photos and files embedded in your content to a different location without editing your content. One scenario is moving the photos from your server to a photo server such as Flickr.

In the past, relocation of files required editing content to point towards the new location. The process of editing file locations becomes tedious when content is separated into different categories. Using a simple php script to serve all your embedded content simplifies the relocation of files later because the only change required is modifying location in the php file.

Tools Required:
Text editor for creating and modifying the php script and permissions
Web server such as apache
Php installed on your web server
Knowledge of the files to be served.

Php file

<?php
/*
 *      my_image_proxy.php
 *
 *      Copyright 2010 edward <http://ojambo.com>
 *
 *      This program is free software; you can redistribute it and/or modify
 *      it under the terms of the GNU General Public License as published by
 *      the Free Software Foundation; either version 2 of the License, or
 *      (at your option) any later version.
 *
 *      This program is distributed in the hope that it will be useful,
 *      but WITHOUT ANY WARRANTY; without even the implied warranty of
 *      MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *      GNU General Public License for more details.
 *
 *      You should have received a copy of the GNU General Public License
 *      along with this program; if not, write to the Free Software
 *      Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
 *      MA 02110-1301, USA.
 *
 * 		USAGE:
 * 		/image_proxy.php?fileName=myfile.jpg
 * 		chmod 644 for directory
 */

$fileName = basename(urldecode($_GET["fileName"]));
$fileDir = "images/";  //relative is best "../"

	// Make sure file exists
	if (file_exists($fileDir . $fileName)) {

		// Grab contents of the file.
		$contents = file_get_contents($fileDir . $fileName);

		// Create mime array
		  $mime=array(
			 "jpg"=>"image/jpeg",
			 "png"=>"image/png",
			 "gif"=>"image/gif",
			 "svg"=>"image/svg+xml",
			 "pdf"=>"application/pdf",
			 "ico"=>"image/vnd.microsoft.icon",
			 "ogv"=>"video/ogg",
			 "mov"=>"video/quicktime",
			 "mpg"=>"video/mpeg"
		  );

		// Check on filetype by using the lower case of last three chars
		header("Content-Type: ".$mime[strtolower(substr($fileName,-3))]);

		// Display the file
		echo $contents;
	}

?>

The beginning of the file after the php tag shows comments on its usage. $fileName is the name of the file that is sent as a server request. $fileDir is the location of the files. The location can be changed to be outside the webroot. It is possible to use absolute paths, but relative paths are best for added security.

Next, check whether the file exists. If the file exists then it is placed inside $contents. Create an array called mime for all the mime types. Php requires a header in order to display files on the web server. The Content-Type utilizes a mime which utilizes the last three characters of the file name and the mime array. Substr is used to grab the last three characters of the file name and strlower converts the characters into lower case. The file is displayed using a simple echo statement.

Create a folder called images and place it anywhere on your server or on in a remote location, be sure to edit the $fileDir in the php file. Create an empty file called index.html and place it in the images folder. The .htaccess file should also be placed in your images folder.

.htaccess file

#
#      .htaccess
 #
 #      Copyright 2010 edward <http://ojambo.com>
 #
 #      This program is free software; you can redistribute it and/or modify
 #      it under the terms of the GNU General Public License as published by
 #      the Free Software Foundation; either version 2 of the License, or
 #      (at your option) any later version.
 #
 #      This program is distributed in the hope that it will be useful,
 #      but WITHOUT ANY WARRANTY; without even the implied warranty of
 #      MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 #      GNU General Public License for more details.
 #
 #      You should have received a copy of the GNU General Public License
 #      along with this program; if not, write to the Free Software
 #      Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
 #      MA 02110-1301, USA.
 #
 # 		USAGE:
 # 		.htaccess
 # 		chmod 644 for directory
 #

# DirectoryIndex: sets the file that Apache will serve if a directory is requested.
DirectoryIndex index.html

# PROTECT FILES
<FilesMatch "\.(htaccess|htpasswd|php|log)$">
Order Allow,Deny
Deny from all
</FilesMatch>

# PREVENT HOTLINKING
SetEnvIfNoCase Referer "^$" let_in
<FilesMatch "\.(png|jpg|jpeg|gif|svg|pdf|ogv|mpg|mov|ico)$">
Order Deny,Allow
Deny from all
Allow from env=let_in
ErrorDocument 403 bad_hotlinker.gif
</FilesMatch>

# IMAGES
AddType image/jpeg .jpg
AddType image/png .png
AddType image/gif .gif

# VIDEOS
AddType video/ogg .ogv
AddType video/mpeg .mpg

# SVG
AddType image/svg+xml .svg .svgz
AddEncoding x-gzip .svgz

# Favicons
AddType image/vnd.microsoft.icon .ico

# Adobe PDF
AddType application/pdf .pdf

# Quicktime movies
AddType video/quicktime .mov .qt

Check your Apache’s core server configuration file usually httpd.conf file to make sure that .htaccess is enabled. The sample .htaccess file contains only recommended additions for the folder where you files will reside.

Here is an example schema
Embedded Picture Should be here.

Image Missing
Folder Schema

The first part consists of comments. The second part will show an empty index.html file is someone tries to get the directory listing.

The third part prevents access to specific files. The fourth part prevents hotlinking which will save bandwidth and grant access from specific locations as such the website. Other websites can be granted access as let_in. An option to show a simple gif file when hotlinkers try to access your files.

Hot linkers will see this:

Image Missing
Bad Hot Linker

The fifth part deals with the mime types that will be used.

How to use

Usage:

<a href="my_image_proxy.php?fileName=photo.jpg">My Photo File </a>

Recommendations:
All files should have their permissions set to 644 or read only. This post will be updated as new technology emerges especially php and apache.

Tags: , , , , , , , , , ,

This entry was posted on Tuesday, June 8th, 2010 at 4:17 pm and is filed under Tips & Tricks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

5 Responses to “Image Proxy”

  1. Image Watermark Says:

    June 27th, 2010 at 1:00 am

    […] in the php file. The process of creating a permissions file was discussed for the Ojambo.com image proxy article. Test […]

  2. Morris Kolis Says:

    August 6th, 2010 at 1:38 am

    Are you connecting using the Windows VPN Client? If so, go to Connection >> Properties >> Networking >> TCP/IP Properties >> Advanced and uncheck the box that says "Use default gateway on remote network".

  3. fitness model Says:

    August 30th, 2010 at 10:36 am

    “the location can be changed to be outside the webroot” : Idon’t understand…

  4. Edward Says:

    September 2nd, 2010 at 12:22 am

    The webroot is the location where content and files are available for the the internet. Since the “Image Proxy” works on the server side, it can serve images from any location. The images can be stored so that they are never visible on the internet. Hence, the outside webroot.

  5. Ojambo Image Proxy Video 0001 Says:

    June 8th, 2011 at 8:45 am

    […] Video for the ojambo.com image proxy article. Part […]

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>