SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist barbara1712's Avatar
    Join Date
    Apr 2007
    Location
    India
    Posts
    509
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do i use thumbnail

    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.
    Barbara

  2. #2
    SitePoint Wizard wonshikee's Avatar
    Join Date
    Jan 2007
    Posts
    1,223
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Evangelist barbara1712's Avatar
    Join Date
    Apr 2007
    Location
    India
    Posts
    509
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Barbara

  4. #4
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,435
    Mentioned
    82 Post(s)
    Tagged
    3 Thread(s)
    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.

  5. #5
    SitePoint Evangelist barbara1712's Avatar
    Join Date
    Apr 2007
    Location
    India
    Posts
    509
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Rubble,

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

  6. #6
    SitePoint Wizard wonshikee's Avatar
    Join Date
    Jan 2007
    Posts
    1,223
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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 Code:

    <?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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •