Problems with thumbnails

lapsinja · June 5, 2013, 12:20pm

Hey. I just started to learn php and I have 2 problems with thumbnails that I’ve been trying to fix for days now. Hope you could help to solve at least one of them. This is very very important for me, so I would really appreciate if you helped me!!! please

1.I have made a form on my website where the user can upload image and add some extra information. So I made thumbnails for uploaded images that are stored in folder (they’re stored in the database as well, but these thumbnails are linked with the folder not database) and when I click on the thumbnail I want it to show the big image and some data from database that was added when the user uploaded the image (like- name and date). Now when I click on a thumbnail it shows me all the data that’s in the database- including other images as well. How to link a thumbnail that is made in folder with data from database? (thumbnails and original images have exact the same name).

I used this script to create thumbnails, but it is only for .jpg images. What should I add to allow .png , .jpeg and .gif extensions as well?

/** settings **/
$images_dir = 'images/';
$thumbs_dir = 'images_thumbs/';
$thumbs_width = 200;
$images_per_row = 3;






/* function:  generates thumbnail */
function make_thumb($src,$dest,$desired_width) {
	/* read the source image */
	$source_image = imagecreatefromjpeg($src);
	$width = imagesx($source_image);
	$height = imagesy($source_image);
	/* find the "desired height" of this thumbnail, relative to the desired width  */
	$desired_height = floor($height*($desired_width/$width));
	/* create a new, "virtual" image */
	$virtual_image = imagecreatetruecolor($desired_width,$desired_height);
	/* copy source image at a resized size */
	imagecopyresized($virtual_image,$source_image,0,0,0,0,$desired_width,$desired_height,$width,$height);
	/* create the physical thumbnail image to its destination */

}

/* function:  returns files from dir */
function get_files($images_dir,$exts = array('jpg')) {
	$files = array();
	if($handle = opendir($images_dir)) {
		while(false !== ($file = readdir($handle))) {
			$extension = strtolower(get_file_extension($file));
			if($extension && in_array($extension,$exts)) {
				$files[] = $file;
			}
		}
		closedir($handle);
	}
	return $files;
}

/* function:  returns a file's extension */
function get_file_extension($file_name) {
	return substr(strrchr($file_name,'.'),1);
}



/** generate photo gallery **/
$image_files = get_files($images_dir);
if(count($image_files)) {
	$index = 0;
	foreach($image_files as $index=>$file) {
		$index++;
		$thumbnail_image = $thumbs_dir.$file;
		if(!file_exists($thumbnail_image)) {
			$extension = get_file_extension($thumbnail_image);
			if($extension) {
				make_thumb($images_dir.$file,$thumbnail_image,$thumbs_width);
			}
		}
		echo '<a href="',$images_dir.$file,'"><img src="',$thumbnail_image,'" /></a>';
	}
}
else {
	echo '<p>There are no images in this gallery.</p>';
}

cpradio · June 5, 2013, 12:32pm

A couple of things, first you need to allow this line to change based on the extension you receive.

    $source_image = imagecreatefromjpeg($src);

There are imagecreatefromgif, and imagecreatefrompng implementations, so based on extension, use the correct one.

So within make_thumb, get the extension

$ext = get_file_extension($src);

Then use a switch statement to call the correct function

$source_image = null;
switch (strtolower($ext))
{
  case "jpg":
    $source_image = imagecreatefromjpeg($src);
    break;
  case "gif":
    $source_image = imagecreatefromgif($src);
    break;
  case "png":
    $source_image = imagecreatefrompng($src);
    break;
  default:
    return;
}

In the end, you end up with:

/* function:  generates thumbnail */ 
function make_thumb($src,$dest,$desired_width) { 
    /* read the source image */ 
    $source_image = null;
    switch (strtolower($ext))
    {
      case "jpg":
        $source_image = imagecreatefromjpeg($src);
        break;
      case "gif":
        $source_image = imagecreatefromgif($src);
        break;
      case "png":
        $source_image = imagecreatefrompng($src);
        break;
      default:
        return;
    }

    $width = imagesx($source_image); 
    $height = imagesy($source_image); 
    /* find the "desired height" of this thumbnail, relative to the desired width  */ 
    $desired_height = floor($height*($desired_width/$width)); 
    /* create a new, "virtual" image */ 
    $virtual_image = imagecreatetruecolor($desired_width,$desired_height); 
    /* copy source image at a resized size */ 
    imagecopyresized($virtual_image,$source_image,0,0,0,0,$desired_width,$desired_height,$width,$height); 
    /* create the physical thumbnail image to its destination */ 

}

Then update the following line to include gif and png as well as jpg

$exts = array('jpg')

Should be

$exts = array('jpg', 'gif', 'png')

lapsinja · June 5, 2013, 12:56pm

Thank you I changed the code, but something still is not right. This is how the code looks like now. Did I miss something? :


/** settings **/
$images_dir = 'images/';
$thumbs_dir = 'images_thumbs/';
$thumbs_width = 200;
$ext = get_file_extension($src);


/* function:  generates thumbnail */ 
function make_thumb($src,$dest,$desired_width) { 
    /* read the source image */ 
    $source_image = null;
    switch (strtolower($ext))
    {
      case "jpg":
        $source_image = imagecreatefromjpeg($src);
        break;
      case "gif":
        $source_image = imagecreatefromgif($src);
        break;
      case "png":
        $source_image = imagecreatefrompng($src);
        break;
      default:
        return;
    }

    $width = imagesx($source_image); 
    $height = imagesy($source_image); 
    /* find the "desired height" of this thumbnail, relative to the desired width  */ 
    $desired_height = floor($height*($desired_width/$width)); 
    /* create a new, "virtual" image */ 
    $virtual_image = imagecreatetruecolor($desired_width,$desired_height); 
    /* copy source image at a resized size */ 
    imagecopyresized($virtual_image,$source_image,0,0,0,0,$desired_width,$desired_height,$width,$height); 
    /* create the physical thumbnail image to its destination */ 

}  

/* function:  returns files from dir */
function get_files($images_dir,$exts = array('jpg', 'gif', 'png') ) {
	$files = array();
	if($handle = opendir($images_dir)) {
		while(false !== ($file = readdir($handle))) {
			$extension = strtolower(get_file_extension($file));
			if($extension && in_array($extension,$exts)) {
				$files[] = $file;
			}
		}
		closedir($handle);
	}
	return $files;
}

/* function:  returns a file's extension */
function get_file_extension($file_name) {
	return substr(strrchr($file_name,'.'),1);
}

/** generate photo gallery **/
$image_files = get_files($images_dir);
if(count($image_files)) {
	$index = 0;
	foreach($image_files as $index=>$file) {
		$index++;
		$thumbnail_image = $thumbs_dir.$file;
		if(!file_exists($thumbnail_image)) {
			$extension = get_file_extension($thumbnail_image);
			if($extension) {
				make_thumb($images_dir.$file,$thumbnail_image,$thumbs_width);
			}
		}
		echo '<a href="',$images_dir.$file,'" class="photo-link smoothbox" rel="gallery"><img src="',$thumbnail_image,'" /></a>';
		if($index % $images_per_row == 0) { echo '<div class="clear"></div>'; }
	}
	echo '<div class="clear"></div>';
}
else {
	echo '<p>There are no images in this gallery.</p>';
}

cpradio · June 5, 2013, 1:07pm

Yep, my bad. I missed a line and your interpretation of what I meant was incorrect.

Change

$ext = get_file_extension($src);


/* function:  generates thumbnail */ 
function make_thumb($src,$dest,$desired_width) { 
    /* read the source image */ 
    $source_image = null;
    switch (strtolower($ext))
    {
      case "jpg":
        $source_image = imagecreatefromjpeg($src);
        break;
      case "gif":
        $source_image = imagecreatefromgif($src);
        break;
      case "png":
        $source_image = imagecreatefrompng($src);
        break;
      default:
        return;
    }

    $width = imagesx($source_image); 
    $height = imagesy($source_image); 
    /* find the "desired height" of this thumbnail, relative to the desired width  */ 
    $desired_height = floor($height*($desired_width/$width)); 
    /* create a new, "virtual" image */ 
    $virtual_image = imagecreatetruecolor($desired_width,$desired_height); 
    /* copy source image at a resized size */ 
    imagecopyresized($virtual_image,$source_image,0,0,0,0,$desired_width,$desired_height,$width,$height); 
    /* create the physical thumbnail image to its destination */ 

}

To


/* function:  generates thumbnail */ 
function make_thumb($src,$dest,$desired_width) { 
    $ext = get_file_extension($src);
    /* read the source image */ 
    $source_image = null;
    switch (strtolower($ext))
    {
      case "jpg":
        $source_image = imagecreatefromjpeg($src);
        break;
      case "gif":
        $source_image = imagecreatefromgif($src);
        break;
      case "png":
        $source_image = imagecreatefrompng($src);
        break;
      default:
        return;
    }

    $width = imagesx($source_image); 
    $height = imagesy($source_image); 
    /* find the "desired height" of this thumbnail, relative to the desired width  */ 
    $desired_height = floor($height*($desired_width/$width)); 
    /* create a new, "virtual" image */ 
    $virtual_image = imagecreatetruecolor($desired_width,$desired_height); 
    /* copy source image at a resized size */ 
    imagecopyresized($virtual_image,$source_image,0,0,0,0,$desired_width,$desired_height,$width,$height); 
    /* create the physical thumbnail image to its destination */ 

}

lapsinja · June 5, 2013, 1:25pm

I changed as you said, but it is still not working. now the code isn’t creating thumbnails at all, even not for .jpg files

Drummin · June 5, 2013, 6:49pm

I don’t see $desired_width defined.

lapsinja · June 5, 2013, 8:22pm

ok, I defined it but that doesn’t seem to be the problem. Can someone see where is the mistake? I did work with just jpg files before my attempt to add other extensions as well ,but now it is not working at all.


/** settings **/
$images_dir = 'images/';
$thumbs_dir = 'images/images_thumbs/';
$thumbs_width = 200;
$images_per_row = 3;
$desired_width= 200;

/* function:  generates thumbnail */ 
function make_thumb($src,$dest,$desired_width) { 
    $ext = get_file_extension($src);
    /* read the source image */ 
    $source_image = null;
    switch (strtolower($ext))
    {
      case "jpg":
        $source_image = imagecreatefromjpeg($src);
        break;
      case "gif":
        $source_image = imagecreatefromgif($src);
        break;
      case "png":
        $source_image = imagecreatefrompng($src);
        break;
      default:
        return;
    }

    $width = imagesx($source_image); 
    $height = imagesy($source_image); 
    /* find the "desired height" of this thumbnail, relative to the desired width  */ 
    $desired_height = floor($height*($desired_width/$width)); 
    /* create a new, "virtual" image */ 
    $virtual_image = imagecreatetruecolor($desired_width,$desired_height); 
    /* copy source image at a resized size */ 
    imagecopyresized($virtual_image,$source_image,0,0,0,0,$desired_width,$desired_height,$width,$height); 
    /* create the physical thumbnail image to its destination */ 

}  

/* function:  returns files from dir */
function get_files($images_dir,$exts = array('jpg', 'gif', 'png')) {
	$files = array();
	if($handle = opendir($images_dir)) {
		while(false !== ($file = readdir($handle))) {
			$extension = strtolower(get_file_extension($file));
			if($extension && in_array($extension,$exts)) {
				$files[] = $file;
			}
		}
		closedir($handle);
	}
	return $files;
}

/* function:  returns a file's extension */
function get_file_extension($file_name) {
	return substr(strrchr($file_name,'.'),1);
}



/** generate photo gallery **/
$image_files = get_files($images_dir);
if(count($image_files)) {
	$index = 0;
	foreach($image_files as $index=>$file) {
		$index++;
		$thumbnail_image = $thumbs_dir.$file;
		if(!file_exists($thumbnail_image)) {
			$extension = get_file_extension($thumbnail_image);
			if($extension) {
				make_thumb($images_dir.$file,$thumbnail_image,$thumbs_width);
			}
		}
		echo '<a href="gallery.php" class="photo-link smoothbox" rel="gallery"><img src="',$thumbnail_image,'" /></a>';
		if($index % $images_per_row == 0) { echo '<div class="clear"></div>'; }
	}
	echo '<div class="clear"></div>';
}
else {
	echo '<p>There are no images in this gallery.</p>';
}

Drummin · June 5, 2013, 9:50pm

Well I’m no expert on this but it seems to me you’re missing the actual image creation after resized tmp is made. I added the imagejpeg($virtual_image,$dest,100); line and it seemed to work fine for me.

function make_thumb($src,$dest,$desired_width) { 
    $ext = get_file_extension($src);
    /* read the source image */ 
    $source_image = null;
    switch (strtolower($ext))
    {
      case "jpg":
        $source_image = imagecreatefromjpeg($src);
        break;
      case "gif":
        $source_image = imagecreatefromgif($src);
        break;
      case "png":
        $source_image = imagecreatefrompng($src);
        break;
      default:
        return;
    }

    $width = imagesx($source_image); 
    $height = imagesy($source_image); 
    /* find the "desired height" of this thumbnail, relative to the desired width  */ 
    $desired_height = floor($height*($desired_width/$width)); 
    /* create a new, "virtual" image */ 
    $virtual_image = imagecreatetruecolor($desired_width,$desired_height); 
    /* copy source image at a resized size */ 
    imagecopyresized($virtual_image,$source_image,0,0,0,0,$desired_width,$desired_height,$width,$height); 
    /* create the physical thumbnail image to its destination */
	imagejpeg($virtual_image,$dest,100); 
}

There’s also the issue of where you’re saying if thumb doesn’t exist, then get extension of the file that doesn’t exist, so it should be changed to the primary image.

        if(!file_exists($thumbnail_image)) {
            $extension = get_file_extension($images_dir.$file);
            if($extension) {
            	make_thumb($images_dir.$file,$thumbnail_image,$thumbs_width);
            }
        }

cpradio · June 5, 2013, 10:15pm

It doesn’t need to be. It is using $thumbs_width which is defined.

Let’s fix that so it works for multiple extensions:

function make_thumb($src,$dest,$desired_width) { 
    $ext = get_file_extension($src);
    /* read the source image */ 
    $source_image = null;
    switch (strtolower($ext))
    {
      case "jpg":
        $source_image = imagecreatefromjpeg($src);
        break;
      case "gif":
        $source_image = imagecreatefromgif($src);
        break;
      case "png":
        $source_image = imagecreatefrompng($src);
        break;
      default:
        return;
    }

    $width = imagesx($source_image); 
    $height = imagesy($source_image); 
    /* find the "desired height" of this thumbnail, relative to the desired width  */ 
    $desired_height = floor($height*($desired_width/$width)); 
    /* create a new, "virtual" image */ 
    $virtual_image = imagecreatetruecolor($desired_width,$desired_height); 
    /* copy source image at a resized size */ 
    imagecopyresized($virtual_image,$source_image,0,0,0,0,$desired_width,$desired_height,$width,$height); 

    /* create the physical thumbnail image to its destination */
    switch (strtolower($ext))
    {
      case "jpg":
	imagejpeg($virtual_image,$dest,100); 
        break;
      case "gif":
	imagegif($virtual_image,$dest); 
        break;
      case "png":
	imagepng($virtual_image,$dest,9); 
        break;
    }
}

You mis-read that. The get_file_extension is fine, as it is only dependent on $file being populated, which is. Yes, the path is bad, but that only matters for file_exists.[/QUOTE]

Final code (I think)

/** settings **/
$images_dir = 'images/';
$thumbs_dir = 'images/images_thumbs/';
$thumbs_width = 200;
$images_per_row = 3;

/* function:  generates thumbnail */ 
function make_thumb($src,$dest,$desired_width) { 
    $ext = get_file_extension($src);
    /* read the source image */ 
    $source_image = null;
    switch (strtolower($ext))
    {
      case "jpg":
        $source_image = imagecreatefromjpeg($src);
        break;
      case "gif":
        $source_image = imagecreatefromgif($src);
        break;
      case "png":
        $source_image = imagecreatefrompng($src);
        break;
      default:
        return;
    }

    $width = imagesx($source_image); 
    $height = imagesy($source_image); 
    /* find the "desired height" of this thumbnail, relative to the desired width  */ 
    $desired_height = floor($height*($desired_width/$width)); 
    /* create a new, "virtual" image */ 
    $virtual_image = imagecreatetruecolor($desired_width,$desired_height); 
    /* copy source image at a resized size */ 
    imagecopyresized($virtual_image,$source_image,0,0,0,0,$desired_width,$desired_height,$width,$height); 

    /* create the physical thumbnail image to its destination */
    switch (strtolower($ext))
    {
      case "jpg":
	imagejpeg($virtual_image,$dest,100); 
        break;
      case "gif":
	imagegif($virtual_image,$dest,100); 
        break;
      case "png":
	imagepng($virtual_image,$dest,100); 
        break;
    }
}  

/* function:  returns files from dir */
function get_files($images_dir,$exts = array('jpg', 'gif', 'png')) {
    $files = array();
    if($handle = opendir($images_dir)) {
        while(false !== ($file = readdir($handle))) {
            $extension = strtolower(get_file_extension($file));
            if($extension && in_array($extension,$exts)) {
                $files[] = $file;
            }
        }
        closedir($handle);
    }
    return $files;
}

/* function:  returns a file's extension */
function get_file_extension($file_name) {
    return substr(strrchr($file_name,'.'),1);
}



/** generate photo gallery **/
$image_files = get_files($images_dir);
if(count($image_files)) {
    $index = 0;
    foreach($image_files as $index=>$file) {
        $index++;
        $thumbnail_image = $thumbs_dir.$file;
        if(!file_exists($thumbnail_image)) {
            $extension = get_file_extension($thumbnail_image);
            if($extension) {
                make_thumb($images_dir.$file,$thumbnail_image,$thumbs_width);
            }
        }
        echo '<a href="gallery.php" class="photo-link smoothbox" rel="gallery"><img src="',$thumbnail_image,'" /></a>';
        if($index % $images_per_row == 0) { echo '<div class="clear"></div>'; }
    }
    echo '<div class="clear"></div>';
}
else {
    echo '<p>There are no images in this gallery.</p>';
}

Drummin · June 5, 2013, 10:38pm

Yes cpradio I’m following that now. Nice job.

lapsinja · June 5, 2013, 10:57pm

thank you for helping me But something is still now working.
I tried both codes… the first one kind of works, but the thumbnails are duplicated - 2 instead of one.
The second one creates the thumbnail in the thumbnail folder, but the thumbnail image for .png isn’t working, it shows the broken image icon. But the thumbnails for.jpg files are working.

cpradio · June 6, 2013, 11:28am

Please post your version of the code, so we know what we are looking at (what to make sure there aren’t any copy/paste typos).

cpradio · June 6, 2013, 12:05pm

Ah, the PNG issue is because 100 is not valid for the third parameter of imagepng. That needs to be a value between 0-9. 9 will produce the smallest filesize, 0 will produce the largest filesize. I ran 6 images through 0 and through 9 and they looked visually identical, so I suggest using 9.

imagepng($virtual_image,$dest,9);

Drummin · June 6, 2013, 9:26pm

Not sure if GIF has a third parameter. ???
imagegif($virtual_image,$dest);

lapsinja · June 16, 2013, 7:21pm

Thank you, cpradio ! It works fine now, I can upload png images as well
And back to the first question:
Now when I click on the thumbnail it leads to all of the images from database…maybe you know how to link the thumbnails to the same image from the database? I don’t want to show just the full image when user clicks on the thumbnail (just in case you say to link the thumbnail to the folder, not database), because I want it to show the image from the database + additional info that was uploaded together with the image.

cpradio · June 16, 2013, 9:46pm

You would need to pass an unique identifier to gallery.php (maybe the image name?) That you can then use to filter your query on that page (when present).

Think gallery.php?image=my_image.png or something like that.

Then your gallery.php would read it using $_GET[‘image’] and validate it/sanitize it, and then use it in a query to the database.

Topic		Replies	Views
Creating thumbnail images PHP	2	441	July 8, 2010
PHP Image upload to folder and making Thumbnail Images PHP	3	613	January 24, 2019
Image management guide PHP	1	560	October 8, 2014
Generating "thumbnail" image problems PHP	4	471	January 17, 2011
Create thumbnail when uploaded PHP	5	730	February 16, 2010

Problems with thumbnails

Related topics