I was just wondering how I can make thumbnails of images stored in hdd and use them in an html page, also I need the thumbnails to be able to enlarge (to their original size) if clicked on preferably inside a div tag on the same page, I would appreciate if anyone could put me in the right direction
thanks
You will need the GD extension enabled. The following code will create a thumbnail file in a subdirectory called ~tmb for a JPEG, PNG and GIF file:
$invalid = true;
if ($file != '.' and $file != '..') {
if (filetype($path_abs.$file) == "file") {
$ext = strtolower(substr($file,strrpos($file,'.')+1));
if ($ext == 'jpg' || $ext == 'jpeg') {
$origimg = @imagecreatefromjpeg($path_abs.$file);
} elseif ($ext == 'png') {
$origimg = @imagecreatefrompng($path_abs.$file);
} elseif ($ext == 'gif') {
$origimg = @imagecreatefromgif($path_abs.$file);
}
if ($origimg !== false) {
$nheight = 0;
$nwidth = 0;
$use_orig = false;
if ($width<=160 and $height<160) {
$nwidth = $width;
$nheight = $height;
$use_orig = true;
$invalid = false;
} else {
if ($width>$height and $width>0) {
$nheight = intval((160 / $width) * $height);
$nwidth = 160;
} elseif ($height>0) {
$nwidth = intval((160 / $height) * $width);
$nheight = 160;
} else {
$image = false;
}
if ($nheight > 0 and $nwidth > 0) {
$newimg = imagecreatetruecolor($nwidth, $nheight);
$bgc = imagecolorallocate ($newimg, 238, 238, 238);
imagefilledrectangle ($newimg, 0, 0, $nwidth, $nheight, $bgc);
if (@imagecopyresampled($newimg, $origimg, 0, 0, 0, 0, $nwidth, $nheight, $width, $height)) {
$image = imagejpeg($newimg, $path_abs.'~tmb/'.$file);
$invalid = false;
} elseif (@imagecopyresized($newimg, $origimg, 0, 0, 0, 0, $nwidth, $nheight, $width, $height)) {
$image = imagejpeg($newimg, $path_abs.'~tmb/'.$file);
$invalid = false;
}
}
}
}
}
}
if (!$invalid) {
if ($use_orig) {
echo '<img src="'.$file.'" alt="" />';
} else {
echo '<img src="~tmb/'.$file.'" alt="" />';
}
} else {
echo '<p>Error for file '.$file.'</p>';
}
In the above code, it resizes them to 160x160, though maintaining aspect ratio.
The gd library allows you to manipulate images. You will find an article to generate thumbnails here.
If you want to allow your users to view the thumbnail and the original size, the best way is to keep the two versions. And to display either one or the other.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With