maxeydevbox.org

Including thumbnail image galleries from remote sites on your site can be quite beneficial for your user experience but, can be a major pain in the butt for site performance and page weight, especially, if your's is a high-traffic site. It can also be major for the remote server if you are loading a large amount of images.

In our current project, we ran in to the same issue which led to this question. How can we have the same amount of thumbnails and decrease load time and page weight? Well, through a little brainstorming we came up with the idea of creating a sprite image that looks exactly like the thumbnail gallery but, is, one, a single image, and two, is hosted locally which eliminates remote http requests on page load.

The solution:
During cron run a script that accepts an RSS feed from the image host site, creates an array containing the URI's of the thumbnail images, load the images and then merge them into a blank template image. The merged images are arranged in the template image by adjusting the hortizontal and vertical offsets based on each merging images height/width.

The themed output:
The output is controlled by then creating an HTML imagemap over the newly created sprite image wherein you may create links to the full images if so desired. Other options for creating the links are available such as using javascript/jQuery to overlay the image or however you wish to do so. In this current case we opted for the imagemap to aide in meeting deadline.

The Code:
Here is the code for producing the sprite. We'll take the parcing of the RSS to array as given. ( for more information on parcing RSS xml to PHP arrays check out the xml2array module for drupal ) The incidence of this code code should appear during a cron run, preferably inside of a hook_cron function within your gallery module.

This code is also utilizing the GD image module for PHP which, may not be available or even work for earlier versions of PHP.

/**
 * this function generates a spaced sprite image
 * from thumbnails received from the RSS feed
 **/	
function spotted_awesome_build_sprite($photos, $id) {
	//all directories must exist and be writable by the machine!
	$target_file = 'path/to/store/image/myImage_sprite' . $id . '.jpg';
	$dest_file = imagecreatetruecolor(592, 265);
	$x_offset = 7;
	$y_offset = 15;
	$image_count_per_row = 0;
	$row_count = 0;
	foreach ($photos as $photo) {
		$file_to_merge = imagecreatefromjpeg($photo['thumb_uri']);
		$file_width = imagesx($file_to_merge);
		$file_height = imagesy($file_to_merge);
		imageinterlace($file_to_merge, 1);
		imagecopy($dest_file, $file_to_merge, $x_offset, $y_offset, 0, 0, $file_width, $file_height);
		$image_count_per_row++;
		$x_offset += $file_width + 7;
		if ($image_count_per_row == 5) {
			$y_offset += $file_height + 16;
			$x_offset = 7;
			$image_count_per_row = 0;
			$row_count++;	
		}
		if ($row_count == 2) {
			imagedestroy($file_to_merge);
			break;
		}
		imagedestroy($file_to_merge);
	}	
	imageinterlace($dest_file, 1);
	imagejpeg($dest_file, $target_file, 75);
	imagedestroy($dest_file);
}

You may note in my code that i attached an id to the end of my image file. For many, this can be optional. I mainly provided an ID source to be able provide a unique filename to the image I'm creating as to be able to find it amongst the many sprites that will be created.

For more information on image processing with PHP check out the full documentation at : PHP: GD and Image Functions
There's even more information on image processing with systems other than GD, for example, ImageMagick, on the site, if you wish to utilize a different image handling system.

Also, if you would like to know a little more about the subject of sprite generation as to how I was implementing it feel free to leave comments.