Thumnails


#1

Hi…I am very new to php,
I am trying to make a website…for the most part I am successful. I am having a couple of issues.

I am trying to make the images into thumbnails. I have found many different types of thumbnail code online, but I don’t understand how it works…
I do have the GD library.

All the code works…Some classmates have used the thumbnails pages to make thumbnails for their sites.

I don’t know what to do with the code. How do I get it to make the thumbnails?

Do I add it to the top of the sweaters script?

I don’t know what to do with the script. I missed class the day the instructor went over how to use the files.

I have a full site on a development server. I am just trying to make the images into thumbnails for quicker page downloads. What do I do with the two php files for thumbnails? Do I put them with the images? I am just completely lost. I know the sweaters product page works fine on the server, I just don’t know how to make them work together with an image folder that has contains large images.

Basically at the risk of sounding completely dumb…how can I use the above two php files for making thumbnails for a website?
My images are set in tables made in MYSql, and this is for a basic shopping cart.

I am trying to get it so that the listings on my products page shows a small image, but blows up onclick or mouse-over.

I just don’t understand how to implement these two php pages to make thumbnails.
I want to use a code similar to this:
[php]

<?php require_once('thumbnail.inc.php'); /** * Create thumbnail images for the images directory! */ public function createThumbs() { $pathName = dirname(__FILE__) . '/images/'; // create an array containing the list of thumbnails // this will be passed from the controller to the view $thumbFiles = array(); // DirectoryIterator is part of the Standard PHP library foreach(new DirectoryIterator($pathName) as $fileInfo) { $fileName = $fileInfo->getFileName(); if ($fileInfo->isDir()) { continue; } // TODO: we should also check if this file // already has a thumbnail generated!! // skip thumbnails that have already been generated // $pos = strpos($fileName, "_Thumb."); if ($pos !== false) { //$thumbFiles[] = $thumbFileName; continue; } $thumb = new Thumbnail($pathName . $fileName); $thumb->resize(200, 100); // create a new fileName with 'Small' in it // (e.g. pic.jpg -> picSmall.jpg) // $thumbFileName = substr_replace($fileName, "_Thumb", strpos($fileName, '.')); // add the file extension back $thumbFileName .= '.' . substr($fileName, -3); $thumb->save($pathName . $thumbFileName); // add this to our array containing the list of thumbnail files $thumbFiles[] = $thumbFileName; //echo $fileInfo . "\n"; } return $thumbFiles; } ?>

[/php]


#2

second part:
[php]

<?php /** * thumbnail.inc.php * */ class Thumbnail { /** * Error message to display, if any * * @var string */ private $errmsg; /** * Whether or not there is an error * * @var boolean */ private $error; /** * Format of the image file * * @var string */ private $format; /** * File name and path of the image file * * @var string */ private $fileName; /** * Image meta data if any is available (jpeg/tiff) via the exif library * * @var array */ public $imageMeta; /** * Current dimensions of working image * * @var array */ private $currentDimensions; /** * New dimensions of working image * * @var array */ private $newDimensions; /** * Image resource for newly manipulated image * * @var resource */ private $newImage; /** * Image resource for image before previous manipulation * * @var resource */ private $oldImage; /** * Image resource for image being currently manipulated * * @var resource */ private $workingImage; /** * Percentage to resize image by * * @var int */ private $percent; /** * Maximum width of image during resize * * @var int */ private $maxWidth; /** * Maximum height of image during resize * * @var int */ private $maxHeight; /** * Class constructor * * @param string $fileName * @return Thumbnail */ public function __construct($fileName) { //make sure the GD library is installed if(!function_exists("gd_info")) { echo 'You do not have the GD Library installed. This class requires the GD library to function properly.' . "\n"; echo 'visit http://us2.php.net/manual/en/ref.image.php for more information'; exit; } //initialize variables $this->errmsg = ''; $this->error = false; $this->currentDimensions = array(); $this->newDimensions = array(); $this->fileName = $fileName; $this->imageMeta = array(); $this->percent = 100; $this->maxWidth = 0; $this->maxHeight = 0; //check to see if file exists if(!file_exists($this->fileName)) { $this->errmsg = 'File not found'; $this->error = true; } //check to see if file is readable elseif(!is_readable($this->fileName)) { $this->errmsg = 'File is not readable'; $this->error = true; } //if there are no errors, determine the file format if($this->error == false) { //check if gif if(stristr(strtolower($this->fileName),'.gif')) $this->format = 'GIF'; //check if jpg elseif(stristr(strtolower($this->fileName),'.jpg') || stristr(strtolower($this->fileName),'.jpeg')) $this->format = 'JPG'; //check if png elseif(stristr(strtolower($this->fileName),'.png')) $this->format = 'PNG'; //unknown file format else { $this->errmsg = 'Unknown file format'; $this->error = true; } } //initialize resources if no errors if($this->error == false) { switch($this->format) { case 'GIF': $this->oldImage = ImageCreateFromGif($this->fileName); break; case 'JPG': $this->oldImage = ImageCreateFromJpeg($this->fileName); break; case 'PNG': $this->oldImage = ImageCreateFromPng($this->fileName); break; } $size = GetImageSize($this->fileName); $this->currentDimensions = array('width'=>$size[0],'height'=>$size[1]); $this->newImage = $this->oldImage; $this->gatherImageMeta(); } if($this->error == true) { $this->showErrorImage(); break; } } /** * Class destructor * */ public function __destruct() { if(is_resource($this->newImage)) @ImageDestroy($this->newImage); if(is_resource($this->oldImage)) @ImageDestroy($this->oldImage); if(is_resource($this->workingImage)) @ImageDestroy($this->workingImage); } /** * Returns the current width of the image * * @return int */ private function getCurrentWidth() { return $this->currentDimensions['width']; } /** * Returns the current height of the image * * @return int */ private function getCurrentHeight() { return $this->currentDimensions['height']; } /** * Calculates new image width * * @param int $width * @param int $height * @return array */ private function calcWidth($width,$height) { $newWp = (100 * $this->maxWidth) / $width; $newHeight = ($height * $newWp) / 100; return array('newWidth'=>intval($this->maxWidth),'newHeight'=>intval($newHeight)); } /** * Calculates new image height * * @param int $width * @param int $height * @return array */ private function calcHeight($width,$height) { $newHp = (100 * $this->maxHeight) / $height; $newWidth = ($width * $newHp) / 100; return array('newWidth'=>intval($newWidth),'newHeight'=>intval($this->maxHeight)); } /** * Calculates new image size based on percentage * * @param int $width * @param int $height * @return array */ private function calcPercent($width,$height) { $newWidth = ($width * $this->percent) / 100; $newHeight = ($height * $this->percent) / 100; return array('newWidth'=>intval($newWidth),'newHeight'=>intval($newHeight)); } /** * Calculates new image size based on width and height, while constraining to maxWidth and maxHeight * * @param int $width * @param int $height */ private function calcImageSize($width,$height) { $newSize = array('newWidth'=>$width,'newHeight'=>$height); if($this->maxWidth > 0) { $newSize = $this->calcWidth($width,$height); if($this->maxHeight > 0 && $newSize['newHeight'] > $this->maxHeight) { $newSize = $this->calcHeight($newSize['newWidth'],$newSize['newHeight']); } //$this->newDimensions = $newSize; } if($this->maxHeight > 0) { $newSize = $this->calcHeight($width,$height); if($this->maxWidth > 0 && $newSize['newWidth'] > $this->maxWidth) { $newSize = $this->calcWidth($newSize['newWidth'],$newSize['newHeight']); } //$this->newDimensions = $newSize; } $this->newDimensions = $newSize; } /** * Calculates new image size based percentage * * @param int $width * @param int $height */ private function calcImageSizePercent($width,$height) { if($this->percent > 0) { $this->newDimensions = $this->calcPercent($width,$height); } } /** * Displays error image * */ private function showErrorImage() { header('Content-type: image/png'); $errImg = ImageCreate(220,25); $bgColor = imagecolorallocate($errImg,0,0,0); $fgColor1 = imagecolorallocate($errImg,255,255,255); $fgColor2 = imagecolorallocate($errImg,255,0,0); imagestring($errImg,3,6,6,'Error:',$fgColor2); imagestring($errImg,3,55,6,$this->errmsg,$fgColor1); imagepng($errImg); imagedestroy($errImg); } /** * Resizes image to maxWidth x maxHeight * * @param int $maxWidth * @param int $maxHeight */ public function resize($maxWidth = 0, $maxHeight = 0) { $this->maxWidth = $maxWidth; $this->maxHeight = $maxHeight; $this->calcImageSize($this->currentDimensions['width'],$this->currentDimensions['height']); if(function_exists("ImageCreateTrueColor")) { $this->workingImage = ImageCreateTrueColor($this->newDimensions['newWidth'],$this->newDimensions['newHeight']); } else { $this->workingImage = ImageCreate($this->newDimensions['newWidth'],$this->newDimensions['newHeight']); } ImageCopyResampled( $this->workingImage, $this->oldImage, 0, 0, 0, 0, $this->newDimensions['newWidth'], $this->newDimensions['newHeight'], $this->currentDimensions['width'], $this->currentDimensions['height'] ); $this->oldImage = $this->workingImage; $this->newImage = $this->workingImage; $this->currentDimensions['width'] = $this->newDimensions['newWidth']; $this->currentDimensions['height'] = $this->newDimensions['newHeight']; } /** * Resizes the image by $percent percent * * @param int $percent */ public function resizePercent($percent = 0) { $this->percent = $percent; $this->calcImageSizePercent($this->currentDimensions['width'],$this->currentDimensions['height']); if(function_exists("ImageCreateTrueColor")) { $this->workingImage = ImageCreateTrueColor($this->newDimensions['newWidth'],$this->newDimensions['newHeight']); } else { $this->workingImage = ImageCreate($this->newDimensions['newWidth'],$this->newDimensions['newHeight']); } ImageCopyResampled( $this->workingImage, $this->oldImage, 0, 0, 0, 0, $this->newDimensions['newWidth'], $this->newDimensions['newHeight'], $this->currentDimensions['width'], $this->currentDimensions['height'] ); $this->oldImage = $this->workingImage; $this->newImage = $this->workingImage; $this->currentDimensions['width'] = $this->newDimensions['newWidth']; $this->currentDimensions['height'] = $this->newDimensions['newHeight']; } /** * Crops the image from calculated center in a square of $cropSize pixels * * @param int $cropSize */ public function cropFromCenter($cropSize) { if($cropSize > $this->currentDimensions['width']) $cropSize = $this->currentDimensions['width']; if($cropSize > $this->currentDimensions['height']) $cropSize = $this->currentDimensions['height']; $cropX = intval(($this->currentDimensions['width'] - $cropSize) / 2); $cropY = intval(($this->currentDimensions['height'] - $cropSize) / 2); if(function_exists("ImageCreateTrueColor")) { $this->workingImage = ImageCreateTrueColor($cropSize,$cropSize); } else { $this->workingImage = ImageCreate($cropSize,$cropSize); } imagecopyresampled( $this->workingImage, $this->oldImage, 0, 0, $cropX, $cropY, $cropSize, $cropSize, $cropSize, $cropSize ); $this->oldImage = $this->workingImage; $this->newImage = $this->workingImage; $this->currentDimensions['width'] = $cropSize; $this->currentDimensions['height'] = $cropSize; } [/php]

#3

3rd part…(too big to post in one post…
[php]

    /**
     * Advanced cropping function that crops an image using $startX and $startY as the upper-left hand corner.
     *
     * @param int $startX
     * @param int $startY
     * @param int $width
     * @param int $height
     */
    public function crop($startX,$startY,$width,$height) {
        //make sure the cropped area is not greater than the size of the image
        if($width > $this->currentDimensions['width']) $width = $this->currentDimensions['width'];
        if($height > $this->currentDimensions['height']) $height = $this->currentDimensions['height'];
        //make sure not starting outside the image
        if(($startX + $width) > $this->currentDimensions['width']) $startX = ($this->currentDimensions['width'] - $width);
        if(($startY + $height) > $this->currentDimensions['height']) $startY = ($this->currentDimensions['height'] - $height);
        if($startX < 0) $startX = 0;
        if($startY < 0) $startY = 0;

        if(function_exists("ImageCreateTrueColor")) {
                    $this->workingImage = ImageCreateTrueColor($width,$height);
            }
            else {
                    $this->workingImage = ImageCreate($width,$height);
            }

            imagecopyresampled(
        $this->workingImage,
        $this->oldImage,
        0,
        0,
        $startX,
        $startY,
        $width,
        $height,
        $width,
        $height
            );

            $this->oldImage = $this->workingImage;
            $this->newImage = $this->workingImage;
            $this->currentDimensions['width'] = $width;
            $this->currentDimensions['height'] = $height;
    }

    /**
     * Outputs the image to the screen, or saves to $name if supplied.  Quality of JPEG images can be controlled with the $quality variable
     *
     * @param int $quality
     * @param string $name
     */
    public function show($quality=100,$name = '') {
        switch($this->format) {
            case 'GIF':
                if($name != '') {
                    ImageGif($this->newImage,$name);
                }
                else {
                   header('Content-type: image/gif');
                   ImageGif($this->newImage);
                }
                break;
            case 'JPG':
                if($name != '') {
                    ImageJpeg($this->newImage,$name,$quality);
                }
                else {
                   header('Content-type: image/jpeg');
                   ImageJpeg($this->newImage,'',$quality);
                }
                break;
            case 'PNG':
                if($name != '') {
                    ImagePng($this->newImage,$name);
                }
                else {
                   header('Content-type: image/png');
                   ImagePng($this->newImage);
                }
                break;
        }
    }

    /**
     * Saves image as $name (can include file path), with quality of # percent if file is a jpeg
     *
     * @param string $name
     * @param int $quality
     */
    public function save($name,$quality=100) {
        $this->show($quality,$name);
    }

    /**
     * Creates Apple-style reflection under image, optionally adding a border to main image
     *
     * @param int $percent
     * @param int $reflection
     * @param int $white
     * @param bool $border
     * @param string $borderColor
     */
    public function createReflection($percent,$reflection,$white,$border = true,$borderColor = '#a4a4a4') {
    $width = $this->currentDimensions['width'];
    $height = $this->currentDimensions['height'];

    $reflectionHeight = intval($height * ($reflection / 100));
    $newHeight = $height + $reflectionHeight;
    $reflectedPart = $height * ($percent / 100);

    $this->workingImage = ImageCreateTrueColor($width,$newHeight);

    ImageAlphaBlending($this->workingImage,true);

    $colorToPaint = ImageColorAllocateAlpha($this->workingImage,255,255,255,0);
    ImageFilledRectangle($this->workingImage,0,0,$width,$newHeight,$colorToPaint);

    imagecopyresampled(
                        $this->workingImage,
                        $this->newImage,
                        0,
                        0,
                        0,
                        $reflectedPart,
                        $width,
                        $reflectionHeight,
                        $width,
                        ($height - $reflectedPart));
    $this->imageFlipVertical();

    imagecopy($this->workingImage,$this->newImage,0,0,0,0,$width,$height);

    imagealphablending($this->workingImage,true);

    for($i=0;$i<$reflectionHeight;$i++) {
        $colorToPaint = imagecolorallocatealpha($this->workingImage,255,255,255,($i/$reflectionHeight*-1+1)*$white);
        imagefilledrectangle($this->workingImage,0,$height+$i,$width,$height+$i,$colorToPaint);
    }

    if($border == true) {
        $rgb = $this->hex2rgb($borderColor,false);
        $colorToPaint = imagecolorallocate($this->workingImage,$rgb[0],$rgb[1],$rgb[2]);
        imageline($this->workingImage,0,0,$width,0,$colorToPaint); //top line
        imageline($this->workingImage,0,$height,$width,$height,$colorToPaint); //bottom line
        imageline($this->workingImage,0,0,0,$height,$colorToPaint); //left line
        imageline($this->workingImage,$width-1,0,$width-1,$height,$colorToPaint); //right line
    }

    $this->oldImage = $this->workingImage;
            $this->newImage = $this->workingImage;
            $this->currentDimensions['width'] = $width;
            $this->currentDimensions['height'] = $newHeight;
    }

    /**
     * Inverts working image, used by reflection function
     * 
     */
    private function imageFlipVertical() {
        $x_i = imagesx($this->workingImage);
        $y_i = imagesy($this->workingImage);

        for($x = 0; $x < $x_i; $x++) {
            for($y = 0; $y < $y_i; $y++) {
                imagecopy($this->workingImage,$this->workingImage,$x,$y_i - $y - 1, $x, $y, 1, 1);
            }
        }
    }

    /**
     * Converts hexidecimal color value to rgb values and returns as array/string
     *
     * @param string $hex
     * @param bool $asString
     * @return array|string
     */
    private function hex2rgb($hex, $asString = false) {
    // strip off any leading #
    if (0 === strpos($hex, '#')) {
       $hex = substr($hex, 1);
    } else if (0 === strpos($hex, '&H')) {
       $hex = substr($hex, 2);
    }

    // break into hex 3-tuple
    $cutpoint = ceil(strlen($hex) / 2)-1;
    $rgb = explode(':', wordwrap($hex, $cutpoint, ':', $cutpoint), 3);

    // convert each tuple to decimal
    $rgb[0] = (isset($rgb[0]) ? hexdec($rgb[0]) : 0);
    $rgb[1] = (isset($rgb[1]) ? hexdec($rgb[1]) : 0);
    $rgb[2] = (isset($rgb[2]) ? hexdec($rgb[2]) : 0);

    return ($asString ? "{$rgb[0]} {$rgb[1]} {$rgb[2]}" : $rgb);
}

/**
 * Reads selected exif meta data from jpg images and populates $this->imageMeta with appropriate values if found
 *
 */
private function gatherImageMeta() {
    //only attempt to retrieve info if exif exists
    if(function_exists("exif_read_data") && $this->format == 'JPG') {
                    $imageData = exif_read_data($this->fileName);
                    if(isset($imageData['Make'])) 
                            $this->imageMeta['make'] = ucwords(strtolower($imageData['Make']));
                    if(isset($imageData['Model'])) 
                            $this->imageMeta['model'] = $imageData['Model'];
                    if(isset($imageData['COMPUTED']['ApertureFNumber'])) {
                            $this->imageMeta['aperture'] = $imageData['COMPUTED']['ApertureFNumber'];
                            $this->imageMeta['aperture'] = str_replace('/','',$this->imageMeta['aperture']);
                    }
                    if(isset($imageData['ExposureTime'])) {
                            $exposure = explode('/',$imageData['ExposureTime']);
                            $exposure = round($exposure[1]/$exposure[0],-1);
                            $this->imageMeta['exposure'] = '1/' . $exposure . ' second';
                    }
                    if(isset($imageData['Flash'])) {
                            if($imageData['Flash'] > 0) {
                                    $this->imageMeta['flash'] = 'Yes';
                            }
                            else {
                                    $this->imageMeta['flash'] = 'No';
                            }
                    }
                    if(isset($imageData['FocalLength'])) {
                            $focus = explode('/',$imageData['FocalLength']);
                            $this->imageMeta['focalLength'] = round($focus[0]/$focus[1],2) . ' mm';
                    }
                    if(isset($imageData['DateTime'])) {
                            $date = $imageData['DateTime'];
                            $date = explode(' ',$date);
                            $date = str_replace(':','-',$date[0]) . ' ' . $date[1];
                            $this->imageMeta['dateTaken'] = date('m/d/Y g:i A',strtotime($date));
                    }
    }
}

/**
 * Rotates image either 90 degrees clockwise or counter-clockwise
 *
 * @param string $direction
 */
public function rotateImage($direction = 'CW') {
    if($direction == 'CW') {
            $this->workingImage = imagerotate($this->workingImage,-90,0);
    }
    else {
            $this->workingImage = imagerotate($this->workingImage,90,0);
    }
    $newWidth = $this->currentDimensions['height'];
    $newHeight = $this->currentDimensions['width'];
            $this->oldImage = $this->workingImage;
            $this->newImage = $this->workingImage;
            $this->currentDimensions['width'] = $newWidth;
            $this->currentDimensions['height'] = $newHeight;
}

}
?>

[/php]


#4

YIKES!
PS: I can name that tune in 10 lines or less…

Okay, sorry, had to joke about that TON of code to do a simple resize…

You could just use built-in image functions for this. There are easy to use resizing functions that seem to work very well. If you are interest in them, this is the link that shows how they work. (Note example post #1)
Should work for you…
http://php.net/manual/en/function.imagecopyresampled.php
Note: this function will allow you to take all of the picture, part of it and resize to a percentage or a set size.
A further note, there are hundreds of other options such as alpha-blending and transparency. (left side page.)
I have personally used it to create thumbnails. Simple, easy, fast! (Little overhead) Good luck!