PDA

View Full Version : How to make thumbnails out of larger images?



bigbadroo
Mar 2nd, 2008, 02:16 PM
Hi

I'm looking to implement a way in my website to make thumbnails and other size versions of large images, so I don't have to make three or 4 versions of the same image.

What is the simplest way of achieving this?

Thanks

Shaun

effpeetee
Mar 2nd, 2008, 02:30 PM
Hi

I'm looking to implement a way in my website to make thumbnails and other size versions of large images, so I don't have to make three or 4 versions of the same image.

What is the simplest way of achieving this?

Thanks

Shaun

http://exitfegs.co.uk/steve.html


This site of mine uses the one jpeg to do both thumbnail and full picture.
It may help you. It just resizes them on the first part of the line of code.
If you hover over the thumbnail, the larger picture will appear. Hold your click and drag to the main picture. It will stay on screen while you scroll.

This is another source.

http://www.serratedsoftware.net/FreeThumbnailGenerator/tabid/55/Default.aspx

Frank


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.gallerycontainer{
position: relative;
height:1000px

/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

div#thumbnails {
position: absolute;
bottom: 0;
left: 0;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color:grey;
padding-right:auto
padding-left:auto
top:1150px
border: 1px dashed gray;
visibility:hidden;
color: black;
text-decoration: none;
text-align:center;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 140px;

left: 110px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
body {background-color: #bbbbbb</style>

<title>Enter_Title_Here</title>
</head>
<body>




<A href="index.html"><IMG style="Z-INDEX: 100; LEFT: 10px; POSITION: absolute; TOP: 0px" height=22 alt="Home page." src="arrow013.gif" width=52 ></A>

<A class=thumbnail href="#thumb"><IMG height=44 alt="" src="101.jpg" width=66 ><span> Leogach - Loch Torridon.<IMG height=600 alt="Use F11" src ="101.jpg" width=800 ><br></span></A>

<A class=thumbnail href="#thumb"><IMG height=44 alt="" src="img090.jpg" width=66 ><span> The Cuillins - a tempestuous day (taken by Steven).<IMG height=600 alt="Use F11" src ="img090.jpg" width=800 ><br></span></A>

<A class=thumbnail href="#thumb"><IMG height=44 alt="" src="112.jpg" width=66 ><span> Mr Keogh and Steven at John's wedding.<IMG height=600 alt="Use F11" src ="112.jpg" width=800 ><br></span></A>
<A class=thumbnail href="#thumb"><IMG height=44 alt="" src="85.jpg" width=66 ><span> Steven relaxing at 'Aquilla Heights' (near Maiden Castle in Dorset). Spring 2006.<IMG height=600 alt="Use F11" src ="85.jpg" width=800 ></span></A>
<A class=thumbnail href="#thumb"><IMG height=44 alt="" src="92.jpg" width=66 ><span> Steven during a day trip to Eastbourne - summer 2006.<IMG height=600 alt="Use F11" src ="92.jpg" width=800 ><br></span></A>

<A class=thumbnail href="#thumb"><IMG height=44 alt="" src="89.jpg" width=66 ><span> Steven, a few years ago. In the Peak District.<IMG height=600 alt="Use F11" src ="89.jpg" width=800 ><br></span></A>
<A class=thumbnail href="#thumb"><IMG height=44 alt="" src="69.jpg" width=66 ><span> Steven enjoying the great outdoors,<IMG height=600 alt="Use F11" src ="69.jpg" width=800 ><br></span></A>
<A class=thumbnail href="#thumb"><IMG height=44 alt="" src="110.jpg" width=66 ><span> The one above sees all!<IMG height=600 alt="Use F11" src ="110.jpg" width=800 ><br></span></A>
<A class=thumbnail href="#thumb"><IMG height=66 alt="" src="steve-01.jpg" width=52 ><span> Steven as a lad.<br><IMG height=800 alt="Use F11" src="steve-01.jpg" width=600 ></span></A>
<A class=thumbnail href="#thumb"><IMG height=44 alt="" src="SteveandPhil.jpg" width=66 ><span> Steven and Philip.<IMG height=600 alt="Use F11" src ="SteveandPhil.jpg" width=800 ><br></span></A>

<A class=thumbnail href="#thumb"><IMG height=44 alt="" src="steve-02.jpg" width=66 ><span> A young Steven.<IMG height=600 alt="Use F11" src ="steve-02.jpg" width=800 ><br></span></A>
<A class=thumbnail href="#thumb"><IMG height=44 alt="" src="winhs13.jpg" width=66 ><span> A quiet read - a short break after visiting Winchester Cathedral.<IMG height=600 alt="Use F11" src ="winhs13.jpg" width=800 ><br></span></A>
<A class=thumbnail href="#thumb"><IMG height=44 alt="" src="Bluebell1.jpg" width=66 ><span> Steven, relaxing in one of the old First-Class carriages. On the Bluebell Line.<IMG height=600 alt="Use F11" src ="Bluebell1.jpg" width=800 ><br></span></A>
<A class=thumbnail href="#thumb"><IMG height=44 alt="" src="web17.jpg" width=66 ><span> Steven, Betty and Frank. Probably in the 1960's.<IMG height=600 alt="Use F11" src ="web17.jpg" width=800 ><br></span></A>

<A class=thumbnail href="#thumb"><IMG height=44 alt="" src="st7.jpg" width=66 ><span> On a day trip to Eastbourne - spring 2006.<IMG height=600 alt="Use F11" src ="st7.jpg" width=800 ><br></span></A>

<A class=thumbnail href="#thumb"><IMG height=44 alt="" src="st2.jpg" width=66 ><span> Not sure where this was taken.<IMG height=600 alt="Use F11" src ="st2.jpg" width=800 ><br></span></A>
<A class=thumbnail href="#thumb"><IMG height=44 alt="" src="st9.jpg" width=66 ><span> Philip and Steven at John's wedding.<IMG height=600 alt="Use F11" src ="st9.jpg" width=800 ><br></span></A>
<A class=thumbnail href="#thumb"><IMG height=44 alt="" src="st16.jpg" width=66 ><span> Steven and Betty in Wales.<IMG height=600 alt="Use F11" src ="st16.jpg" width=800 ><br></span></A>
<A class=thumbnail href="#thumb"><IMG height=44 alt="" src="st17.jpg" width=66 ><span> Steven holidaying in Wales.<IMG height=600 alt="Use F11" src ="st17.jpg" width=800 ><br></span></A>
<A class=thumbnail href="#thumb"><IMG height=44 alt="" src="st18.jpg" width=66 ><span> Betty and Steven many years ago.<IMG height=600 alt="Use F11" src ="st18.jpg" width=800 ><br></span></A>

<A class=thumbnail href="#thumb"><IMG height=44 alt="" src="st22.jpg" width=66 ><span> Steven in Hove - 2007.<IMG height=600 alt="Use F11" src ="st22.jpg" width=800 ><br></span></A>
<A class=thumbnail href="#thumb"><IMG height=44 alt="" src="st25.jpg" width=66 ><span> Betty, Mum and Steven. On holiday in Wales.<IMG height=600 alt="Use F11" src ="st25.jpg" width=800 ><br></span></A>
<A class=thumbnail href="#thumb"><IMG height=44 alt="" src="st26.jpg" width=66 ><span> Hi!, We're over here. Betty and Steve on a family holiday.<IMG height=600 alt="Use F11" src ="st26.jpg" width=800 ><br></span></A>
<A class=thumbnail href="#thumb"><IMG height=44 alt="" src="st28.jpg" width=66 ><span> Steven outside the "Saxon Arms" in Dorchester - 2007.<IMG height=600 alt="Use F11" src ="st28.jpg" width=800 ><br></span></A>
<A class=thumbnail href="#thumb"><IMG height=44 alt="" src="st32.jpg" width=66 ><span> Steven (and Little Ted) relaxing at 'Aquilla Heights' (near Maiden Castle in Dorset). Spring 2007.<IMG height=600 alt="Use F11" src ="st32.jpg" width=800 ><br></span></A>
<A class=thumbnail href="#thumb"><IMG height=44 alt="" src="st39.jpg" width=66 ><span> Steven on holiday with friends.<IMG height=600 alt="Use F11" src ="st39.jpg" width=800 ><br></span></A></body>
</html>

harbingerOTV
Mar 2nd, 2008, 05:43 PM
if you can use php,
http://www.anyexample.com/programming/php/php_multiple_photo_thumbnail_generator.xml

i'm sure there are others as well.

bigbadroo
Mar 3rd, 2008, 12:51 AM
Thanks Harbinger

I wasn't able to get that working - it's a little complex for me. I aren't sure what code goes where when using the example that coder gave at the end. Is there any chance you could take a look?

My page is at www.ronniewiggins.com/test2.php - I made a folder name 'aeupload' in the same folder as the script file (made it CHMOD 777), but no images are going there.

Cheers

Shaun

_Aerospace_Eng_
Mar 3rd, 2008, 06:17 AM
This is what I use on my site

<?php
$success = '';
if(isset($_POST['submit']) && $_POST['submit'] == 'Login' && $_POST['pass'] == 'password')
{
/*
Function ditchtn($arr,$thumbname)
filters out thumbnails
*/
function ditchtn($arr,$thumbname)
{
foreach ($arr as $item)
{
if (!preg_match("/^".$thumbname."/",$item)){$tmparr[]=$item;}
}
return $tmparr;
}

/*
Function createthumb($name,$filename,$new_w,$new_h)
creates a resized image
variables:
$name Original filename
$filename Filename of the resized image
$new_w width of resized image
$new_h height of resized image
*/
function createthumb($name,$filename,$new_w,$new_h)
{
$system=explode(".",$name);
if (preg_match("/jpg|jpeg/",$system[1])){$src_img=imagecreatefromjpeg($name);}
if (preg_match("/png/",$system[1])){$src_img=imagecreatefrompng($name);}
$old_x=imageSX($src_img);
$old_y=imageSY($src_img);
if ($old_x > $old_y)
{
$thumb_w=$new_w;
$thumb_h=$old_y*($new_h/$old_x);
}
if ($old_x < $old_y)
{
$thumb_w=$old_x*($new_w/$old_y);
$thumb_h=$new_h;
}
if ($old_x == $old_y)
{
$thumb_w=$new_w;
$thumb_h=$new_h;
}
$dst_img=ImageCreateTrueColor($thumb_w,$thumb_h);
imagecopyresampled($dst_img,$src_img,0,0,0,0,$thumb_w,$thumb_h,$old_x,$old_y);
if (preg_match("/png/",$system[1]))
{
imagepng($dst_img,'thumbs/'.$filename);
} else {
imagejpeg($dst_img,'thumbs/'.$filename);
}
imagedestroy($dst_img);
imagedestroy($src_img);
}

/*
Function directory($directory,$filters)
reads the content of $directory, takes the files that apply to $filter
and returns an array of the filenames.
You can specify which files to read, for example
$files = directory(".","jpg,gif");
gets all jpg and gif files in this directory.
$files = directory(".","all");
gets all files.
*/
function directory($dir,$filters)
{
$handle=opendir($dir);
$files=array();
if ($filters == "all"){while(($file = readdir($handle))!==false){$files[] = $file;}}
if ($filters != "all")
{
$filters=explode(",",$filters);
while (($file = readdir($handle))!==false)
{
for ($f=0;$f<sizeof($filters);$f++):
$system=explode(".",$file);
if ($system[1] == $filters[$f]){$files[] = $file;}
endfor;
}
}
closedir($handle);
return $files;
}
$imagefolder = getcwd();
$thumbsfolder = 'thumbs/';
$pics=directory($imagefolder,"jpg,JPG,JPEG,jpeg,png,PNG");
$pics=ditchtn($pics,"tn_");
if ($pics[0]!="")
{
foreach ($pics as $p)
{
createthumb($p,"tn_".$p,150,150);
}
}
$count = sizeof($pics);
$success = "<p>$count thumbnails have been created successfully.</p>";
header("Refresh: 3;http://www.mysite.com/index.php?page=portfolio");
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Thumbnail Generator</title>
</head>

<body>
<?php
if($success != '') echo $success;
?>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<input type="password" name="pass" id="pass" />
<input type="submit" name="submit" value="Login" />
</form>
</body>
</html>

I upload my larger images into a folder on the site, run this script which generates thumbnails of the larger images and puts them a folder called thumbs. I also found this script that does something similar.

<?php
/*
Function createthumb($name,$filename,$new_w,$new_h)
creates a resized image
variables:
$name Original filename
$filename Filename of the resized image
$new_w width of resized image
$new_h height of resized image
*/
function createthumb($name,$filename,$new_w,$new_h)
{
$system=explode(".",$name);
if (preg_match("/jpg|jpeg/",$system[1])){$src_img=imagecreatefromjpeg($name);}
if (preg_match("/png/",$system[1])){$src_img=imagecreatefrompng($name);}
$old_x=imageSX($src_img);
$old_y=imageSY($src_img);
if ($old_x > $old_y)
{
$thumb_w=$new_w;
$thumb_h=$old_y*($new_h/$old_x);
}
if ($old_x < $old_y)
{
$thumb_w=$old_x*($new_w/$old_y);
$thumb_h=$new_h;
}
if ($old_x == $old_y)
{
$thumb_w=$new_w;
$thumb_h=$new_h;
}
$dst_img=ImageCreateTrueColor($thumb_w,$thumb_h);
imagecopyresampled($dst_img,$src_img,0,0,0,0,$thumb_w,$thumb_h,$old_x,$old_y);
if (preg_match("/png/",$system[1]))
{
imagepng($dst_img,$filename);
} else {
imagejpeg($dst_img,$filename);
}
imagedestroy($dst_img);
imagedestroy($src_img);
}

/*
Function directory($directory,$filters)
reads the content of $directory, takes the files that apply to $filter
and returns an array of the filenames.
You can specify which files to read, for example
$files = directory(".","jpg,gif");
gets all jpg and gif files in this directory.
$files = directory(".","all");
gets all files.
*/
function directory($dir,$filters)
{
$handle=opendir($dir);
$files=array();
if ($filters == "all"){while(($file = readdir($handle))!==false){$files[] = $file;}}
if ($filters != "all")
{
$filters=explode(",",$filters);
while (($file = readdir($handle))!==false)
{
for ($f=0;$f<sizeof($filters);$f++):
$system=explode(".",$file);
if ($system[1] == $filters[$f]){$files[] = $file;}
endfor;
}
}
closedir($handle);
return $files;
}
?>

bigbadroo
Mar 3rd, 2008, 09:45 AM
Thanks for the scripts. Rather than output the thumbnails to a folder, I was wondering if this script, which just displays a thumbnail version of a larger file without processing it and adding it to a folder) could be altered so that you have control over the height of the thumbnails as opposed to the width?

I tried contacting the script writer, but the website doesn't work.

Here's the HTML, followed by the PHP (the maxw function controls the wdith, but how to change it to control the height instead?):

<a href="photo_1.php" target="_blank"><img src="../thumbnail.php?gd=2&src=artist_1/photo1_lg.jpg&maxw=36" border="1" style="margin: 2px; border-color:#000000; "/></a>

------------------------------------------------------

<?php
/*
=============================================================================================
Script Name: thumbnail.php
Version: 1.1
Author: Ian Anderson
Date: November 2002
Acknowledge: Teekai - http://www.teekai.info/v8/home.php (see the original script at
http://www.hotscripts.com/Detailed/18727.html on which this script is based).

This script is a self-contained Thumbnail Image Generator. It should be called as follows ...

<img src="/path/to/thumbnail.php?gd=N&src=/path/to/image.EXT&maxw=NNN" />

where N = the GD library version (supported values are 1 and 2)
EXT = the file extension of the image file
(supported values are gif (if gd = 2), jpg and png)
NNN = the desired maximum width of the thumbnail

If the actual image is narrower than the desired maximum width then the original image size
is used for the thumbnail copy.

This script checks for the following errors and generates an error JPEG image accordingly ...

GD version selected neither 1 nor 2;
Image create functions not supported;
Image file not found at the selected location;
GD version 2 functions not supported on the running version of PHP.

This script is available for use as freeware subject to the retention of the preceding
information and acknowledgements in any copy or modification that is made to this code.
=============================================================================================
*/

function ErrorImage ($text) {
global $maxw;
$len = strlen ($text);
if ($maxw < 154) $errw = 154;
$errh = 30;
$chrlen = intval (5.9 * $len);
$offset = intval (($errw - $chrlen) / 2);
$im = imagecreate ($errw, $errh); /* Create a blank image */
$bgc = imagecolorallocate ($im, 153, 63, 63);
$tc = imagecolorallocate ($im, 255, 255, 255);
imagefilledrectangle ($im, 0, 0, $errw, $errh, $bgc);
imagestring ($im, 2, $offset, 7, $text, $tc);
header ("Content-type: image/jpeg");
imagejpeg ($im);
imagedestroy ($im);
exit;
}

// Change $maxw=190 to your desired default width for the thumbnail.
// Note: any changes will mean the $offset value for the ErrorImage ( )
// function calls will require amending accordingly.
function thumbnail ($gdver, $src, $maxw=190) {

$gdarr = array (1,2);
for ($i=0; $i<count($gdarr); $i++) {
if ($gdver != $gdarr[$i]) $test.="|";
}
$exp = explode ("|", $test);
if (count ($exp) == 3) {
ErrorImage ("Incorrect GD version!");
}

if (!function_exists ("imagecreate") || !function_exists ("imagecreatetruecolor")) {
ErrorImage ("No image create functions!");
}

$size = @getimagesize ($src);
if (!$size) {
ErrorImage ("Image File Not Found!");
} else {

if ($size[0] > $maxw) {
$newx = intval ($maxw);
$newy = intval ($size[1] * ($maxw / $size[0]));
} else {
$newx = $size[0];
$newy = $size[1];
}

if ($gdver == 1) {
$destimg = imagecreate ($newx, $newy );
} else {
$destimg = @imagecreatetruecolor ($newx, $newy ) or die (ErrorImage ("Cannot use GD2 here!"));
}

if ($size[2] == 1) {
if (!function_exists ("imagecreatefromgif")) {
ErrorImage ("Cannot Handle GIF Format!");
} else {
$sourceimg = imagecreatefromgif ($src);

if ($gdver == 1)
imagecopyresized ($destimg, $sourceimg, 0,0,0,0, $newx, $newy, $size[0], $size[1]);
else
@imagecopyresampled ($destimg, $sourceimg, 0,0,0,0, $newx, $newy, $size[0], $size[1]) or die (ErrorImage ("Cannot use GD2 here!"));

header ("content-type: image/gif");
imagegif ($destimg);
}
}
elseif ($size[2]==2) {
$sourceimg = imagecreatefromjpeg ($src);

if ($gdver == 1)
imagecopyresized ($destimg, $sourceimg, 0,0,0,0, $newx, $newy, $size[0], $size[1]);
else
@imagecopyresampled ($destimg, $sourceimg, 0,0,0,0, $newx, $newy, $size[0], $size[1]) or die (ErrorImage ("Cannot use GD2 here!"));

header ("content-type: image/jpeg");
imagejpeg ($destimg);
}
elseif ($size[2] == 3) {
$sourceimg = imagecreatefrompng ($src);

if ($gdver == 1)
imagecopyresized ($destimg, $sourceimg, 0,0,0,0, $newx, $newy, $size[0], $size[1]);
else
@imagecopyresampled ($destimg, $sourceimg, 0,0,0,0, $newx, $newy, $size[0], $size[1]) or die (ErrorImage ("Cannot use GD2 here!"));

header ("content-type: image/png");
imagepng ($destimg);
}
else {
ErrorImage ("Image Type Not Handled!");
}
}

imagedestroy ($destimg);
imagedestroy ($sourceimg);
}

thumbnail ($_GET["gd"], $_GET["src"], $_GET["maxw"]);
?>

effpeetee
Mar 3rd, 2008, 11:19 AM
which just displays a thumbnail version of a larger file without processing it and adding it to a folder)

The site that I gave you does just that. You only need the main picture on your site. It produces the thumbnail as it runs. You dont need to use the hover facility.

http://exitfegs.co.uk/steve.html

Frank

abduraooft
Mar 3rd, 2008, 11:37 AM
No frank, that page is only displaying some large images in smaller dimensions with the help of img's height&width attribute. The problem of this method is, the page will load all images (requires a lot of time to load). But the other methods will dynamically create and store thumbnails of desired size with help of server side script, and this is what OP asked. (Your code can be used in the presentation side though)

effpeetee
Mar 3rd, 2008, 11:44 AM
Yes, I realise that but the OP said that he wants the thumbs on the fly and not produced in a folder.
without processing it and adding it to a folder)

That is why I gave him that. I do not know (because of lack of training) whether other methods are better. I suspect that some type of script will be proper.

Frank

bigbadroo
Mar 3rd, 2008, 12:00 PM
Hey guys

Effteepee's script is cool, but it does create pixelated thumbnails. The script I posted above does a good job of creating clear thumbs, but I just need to figure out what to change in it so I have control over the height, not width of the thumbnails outputted.

Cheers

S

effpeetee
Mar 3rd, 2008, 02:00 PM
Try this one.

http://www.cleverleap.com/ruby-thumbnail-generator/

Frank

antony09
Apr 20th, 2010, 12:15 PM
Try 3D Thumbnail Generator to create impressive 3D thumbnails.

3D Thumbnail Generator (http://www.softorbits.com/3d-thumbnail-generator)