How do i use thumbnail

[barbara1712]

Hello All,

I want help how do i implement the thumbnails for my item image.
i.e. I want to display thumbnail of item image on my page.

From where should I start?

Thanks in adv.

[wonshikee]

1) get a image recreation script that will create a smaller version of uploaded images if its bigger than your desginated size.

2) get a image thumbnail popup script, like lightbox 2 or a variety.

[barbara1712]

Thanks,

But I really don't about image recreation script.
tell me weather I have to write the code for the script or I can get it from
somewhere.If I have to write the code then please help me.

[Rubble]

You can:

1/ <img src="image.jpg" width="image width" height="image height"> All this does is display a smaller version of the image although the file size is the original size.

2/ Resize the image and save a thumbnail on upload.

3/ Resize the image dynamicaly when it is loaded by the browser.

4/ Make a thumbnail on your PC and upload it at the same time as the large image.

You need to decide what method you want to use. There are lots of posts about resizing images and thumbnails if you do a search on the forum.

[barbara1712]

Thanks Rubble,

I will search and then I will try to use thumbnail.

[wonshikee]

I don't recommend using the HTML width and height attributes for images, it's very low quality and you're wasting bandwith because the real file size is still bloated.

You can look at

http://www.sitepoint.com/forums/showthread.php?t=482679

or modify this example to suit your needs.

<?php
function uploadImage($userfile,$userfile_name,$userfile_size,$userfile_type,$new_width,$new_height,$extension,$dir,$rel) {

    // validate image properties
    if (!$userfile_name)
    {
        $error = 1;
        $errormessage = "No image uploaded.";
    }
    elseif (!$userfile_size)
    {
        $error = 1;
        $errormessage = "There was a problem uploading this image.<br/>";
        $errormessage .= "The image may be too large.";
    }
    elseif ($userfile_type != 'image/gif'&&$userfile_type != 'image/jpeg'&&$userfile_type != 'image/pjpeg'&&$userfile_type != 'image/png')
    {
        $error = 1;
        $errormessage = "Images must be of type 'gif' or 'jpeg' or 'png'<br/>";
        $errormessage .= "This image is of type ".$userfile_type.".";    
    }
    // check for errors
    if ($error)
    {
        echo "error uploading image<br><br>$errormessage";die();
    }

    //upload original image
    $upfile = "$rel$dir".$userfile_name;
    copy ($userfile, $upfile);

    $userfile_array = explode(".",$userfile_name);

    //resize image
    if ($userfile_type == 'image/gif') {
        $im = imagecreatefromgif($upfile);
    } elseif ($userfile_type == 'image/png') {
        $im = imagecreatefrompng($upfile);
    } else {
        $im = imagecreatefromjpeg($upfile);

    }

    // new width & height
    $max_width = $new_width;
    $max_height = $new_height;
    
    // original width & height
    $width = ImageSX($im);
    $height = ImageSY($im);

    $x_ratio = $max_width / $width;
    $y_ratio = $max_height / $height;

    if (($width <= $max_width) && ($height <= $max_height)) {
        $dst_width = $width;
        $dst_height = $height;
    } elseif (($x_ratio * $height) < $max_height) {
        $dst_height = ceil($x_ratio * $height);
        $dst_width = $max_width;
    } else {
        $dst_width = ceil($y_ratio * $width);
        $dst_height = $max_height;
    }

    $dst = imagecreatetruecolor($dst_width, $dst_height);
    ImageCopyResampled($dst, $im,        
                        0,0,0,0,
                        $dst_width, $dst_height,
                        $width, $height);

    $file = $dir.$userfile_array[0].$extension;

    if ($userfile_type == 'image/gif')
    {
        $file = $file.'.gif';
        ImageGIF($dst, $rel.$file, -1);
    }
    elseif ($userfile_type == 'image/png')
    {
        $file = $file.'.png';
        //echo $file;die();
        ImagePNG($dst, $rel.$file, -1);
    }
    else
    {
        $file = $file.'.jpeg';
        ImageJPEG($dst, $rel.$file, -1);
    }
    
    ImageDestroy($im);
    ImageDestroy($dst);
    
    // delete original image
    unlink($upfile);

    return $file;
}
?>

thumbnail scripts, atleast the two that I know of are extremely simple to use, lightbox 2 looks great and i'd recommend it.