Image gallery thumbnail generation

[hackersapien]

Hi Guys,

I found this code that generates thumbnails from the images and displays them, unfortunately it creates new images, can somebody please modify it to generateto display the thumbnails without generating new images?

# Prepends the prefix to the filename of $imageFile, and finds the relative position of $imageFile
# in our image output folder.
# Example: "c:\digicam\yosemite\t.jpg", "tn_" -> "c:\web\travel\images\yosemite\tn_t.jpg"
#
function getNewFilename($imageFile, $prefix)
{
	$filename = basename($imageFile);
	$dirname = dirname($imageFile);
	$dirname = str_replace("digicam/", "web/travel/", $dirname);
	$filename = $prefix . $filename;
	return $dirname . "/" . $filename;
}

# Resizes the passed $imageFile filename so that the longest side in either dimension is $maxDimension pixels.
# This function returns the filename of the resized image, prepended with the passed filename $prefix.
function resizeImage($imageFile, $maxDimension, $prefix)
{
	list($width, $height, $type, $attr) = getimagesize($imageFile);

# Find the new height and width
$newWidth = $width;
$newHeight = $height;
if ($newWidth > $maxDimension)
{
	$newHeight = $height * ($maxDimension / $width);
	$newWidth = $maxDimension;
}
if ($newHeight > $maxDimension)
{
	$newWidth = $newWidth * ($maxDimension / $newHeight);
	$newHeight = $maxDimension;
}

# Get the new image filename
$newFile = getNewFilename($imageFile, $prefix);

# Resize the image (if it hasn't been done already)
if (!file_exists($newFile))
{
	$image_p = imagecreatetruecolor($newWidth, $newHeight);
	$image = imagecreatefromjpeg($imageFile);
	imagecopyresampled($image_p, $image, 0, 0, 0, 0, $newWidth, $newHeight, $width, $height);
	if (!file_exists(dirname($newFile))) mkdirs(dirname($newFile));
	imagejpeg($image_p, $newFile, 60);
}

return $newFile;
}

Cheers

[bpat1434]

can somebody please modify it to generate to display the thumbnails without generating new images?

Well, unfortunately you're thinking about this the wrong way. In order for an image to be displayed, one of two things needs to happen:
1.) An image is created and saved on the server
OR
2.) An image is created and streamed to the client

Either way, an image is made on the server (with streaming it's temporary). With the streaming method, that's a lot of calls to one script to handle all those images, and may (depending upon server specs & load) overload your server and utilize all its resources. So it's not the best way to go.

That's not even to go into the fact that we are here as a helping board, so if you want to learn to do this, we're here. But unless you find someone nice enough to do it for you, we're most likely going to help get you to where you want to be with your initiative.

[ClarkF1]

The problem with the 2nd option that bpat mentioned is that seemingly small images can take ages to load if you just resize them on the client side and some people (me included) might not wait around for to finish loading.

Thumbnails take up very little space compated to the large versions and load much faster

[hackersapien]

Unfortunately in all the replies I am yet to find a workable solution or a way forward, the scenario I have right now is where users just upload one image into their gallery, the gallery then displays thumbnail versions of the images. previously I have accomplished this using to upload buttons, one for large image another for thumbnail image, but this is too tedious for a website user and will discourage them from uploading any pics.

Bringing me back to my first question:

Can I diplay thumbnails without having to generate them on each time am displaying the gallery?

I have seen some galleries that generate thumbnails but am having a problem modifying the code, so i decided to look far and wide. One such gallery is minishowcase:

http://minishowcase.frwrd.net/

Help a brother out..

[bpat1434]

Well, here's an "automated" way of doing it. It has to save it to your server; however, if your user uploads the photo, it will automatically be resized as needed to fit your "thumbnail" size.

 // Get the temporary file name that php gives us.
  $tempname = $_FILES['photo']['tmp_name'];

  // Set the max upload file-size
  $maxSize = 1024 * 1024 * 5; 
  // 5 MB upload limit.  Done in Bytes (1024 bytes/Kb, 1024 Kb/Mb).
  // bytes * Kilobytes * Megabytes will give you the max alloted size.
  // This is of course limited by php.ini

  // Check to make sure it's uploaded
  if(is_uploaded_file($tempname))
	{
	  // Original dimensions
	  $orig_dimensions = getimagesize($tempname);

  // Check to make sure we get a valid image size
  if($orig_dimensions === FALSE || $orig_dimensions[2] != 2)
	{
	  die("Image upload failed!!");
	  // You can change this to a different message, or call your own
	  // error function if you wish.
	}

	// Define the original dimensions (width & height)
	$orig_width = $orig_dimensions[0];
	$orig_height = $orig_dimensions[1];

	// Create a new image from the temp to work off of
	$orig_image = imagecreatefromjpeg($tempname);

	// If it's tall, we need to do one more step
	$image_is_tall = ($orig_height>=$orig_width);

	// Define how large you want the new image
	$swidth = 250;

	// Define the proportionate height
	$sheight = ceil($orig_height*$swidth/$orig_width);

	// If the image is tall, not wide, well rotate the image dimensions
	// This is so that it stays proportionate if it's a tall image
	if($image_is_tall)
	{
		$t = $swidth;
		$swidth = $sheight;
		$sheight = $t;
	}

	// Create a new image based on the new widths & height
	$new_image = imagecreatetruecolor($swidth, $sheight);

	// Now we'll copy the old image, to the new image and it will be resized
	if(imagecopyresampled($new_image, $orig_image, 0, 0, 0, 0, $swidth, $sheight, $orig_width, $orig_height) === FALSE)
	{
		echo "Image creation Failed!!";
	}
	else{
		// Set up some variables to use
		$photo_dir="/hsphere/local/home/chulamik/granbylionsclub.com/uploads/";
		$photo_url="http://www.granbylionsclub.com/uploads/";
		$photo_name = $HTTP_POST_VARS['photosID'].'.jpg';

		$newer_image = $photo_dir.$photo_name;

		// Create a new jpeg (*.jpg) from the resized image with 100% quality
		if(@imagejpeg($new_image, $newer_image, 100) === FALSE)
		{
			echo "Creation of image failed!!";
		}
		else
		{
			// Define the photo url for the database insertion
			$photo_url = $photo_url.$photo_name;
			echo "Image Created Successfully!!<br>";

			// Display the newly created image if you like.
			echo '<img src="'.$photo_url.'" width="250" alt="The New Photo!!">'; // Remove this if you don't want it.
		}
	}
}

[hackersapien]

Hi bpat1434,

I take it that from the script below, that once the user uploads the image, the big image is first stored, a thumbnail is generated from the big image and is also stored on the server preferably in a different folder?

How efficient is this in terms of resource usage, bearing in mind that we have shared hosting and I don't want the guys to kick me out?

Cheers

[mborish_2000]

did you ever figure out how to do it? I'm looking for something similar too.

[bpat1434]

It should be fine. You can limit resource usage to the size of images uploaded (like less than 8 Mb) as well as the number uploaded (no more than say 5 at one time). Other than that, it should be fine.

And yes, the thumbnail would be saved in a different folder.