HOW-TO: Image Preparation

[kuroi]

@freshstart

Those folders are used for template images only. Product images go in the images folder in your site's root directory. Your medium sized images would go in images/medium and your large ones in images/large.

You can also include a folder name such as products in your images filenames when you define them via the admin and then your images should be placed in images/products, images/products/medium and images/products/large.

Have you also included the _MED and _LRG suffices for your medium and large products?

[freshstart]

Hello Kuroi and many thanks for your prompt reply and support

Although it is only 10.15AM I have a smashing headache. I have deleted all of the files contained in various directories within Zencart, except one (see below) which I had previously uploaded via FTP and am now in the position to begin loading correctly again.

Background - I am a beginner, although given all of the work I have done over the past few months in trying to understand Zencart, I would have thought things would be easier now? This is not the case, apparently.

Ok - this is what I see (via CPanel) - public_html - mywebsite - then Zencart (admin / cache / docs IMAGES etc, etc...).

I have left my images (item1_small - item1 _MED - item1_LRG in this folder / directory - each being distributed in its own medium / large folder).

Can you see where I am going wrong (using simple language)?

Freshstart

[freshstart]

Further to my last post, I appear to be making headway. I can now see images on my testsite. I note that only one of the images is being used, even though I have uploaded three sizes. I shall read previous posts in the hope that this issue can be explained and resolved.

Thanx Kuroi.

Freshstart.

[ted]

In your example you'll only see 1 image depending on the page you are on. The small image is what you'll see as a thumbnail on the category page containing the product, the medium image is what is displayed on the product page and the large image is displayed when you use the Click to enlarge on the product page.

Give some thought to your image names as names that all start with the same names or letters will appear as multiple images of the same product. Search the Calico Cat example in the forums and follow those naming conventions but you're on the right track and are now uploading your images to the correct folder(s)!

[Crestien]

I thought this might help someone here.

Here's a little snippet of code I just added to my upload.php that take care of all this resizing and folder placement for me on the fly. It requires gd library I believe. This comes in very handy since I give my clients the login and pass to manage their own ZenCart and they are NOT Computer savvy most of the time. FTP is beyond them.

I'm sure there are better ways to accomplish this, like with imagemagick, but I don't have the time to mess with that right now and i just wanted to share this. it also just ignores everything here if they upload something incompatible like a bmp.

Just put this code in the parse() function of the upload class in:
admin\includes\classes\upload.php

After this block of Code:

if (isset($_FILES[$this->file])) {
        $file = array('name' => $_FILES[$this->file]['name'],
                      'type' => $_FILES[$this->file]['type'],
                      'size' => $_FILES[$this->file]['size'],
                      'tmp_name' => $_FILES[$this->file]['tmp_name']);
      } elseif (isset($GLOBALS['HTTP_POST_FILES'][$this->file])) {
        global $HTTP_POST_FILES;

        $file = array('name' => $HTTP_POST_FILES[$this->file]['name'],
                      'type' => $HTTP_POST_FILES[$this->file]['type'],
                      'size' => $HTTP_POST_FILES[$this->file]['size'],
                      'tmp_name' => $HTTP_POST_FILES[$this->file]['tmp_name']);
      } else {
        $file = array('name' => (isset($GLOBALS[$this->file . '_name']) ? $GLOBALS[$this->file . '_name'] : ''),
                      'type' => (isset($GLOBALS[$this->file . '_type']) ? $GLOBALS[$this->file . '_type'] : ''),
                      'size' => (isset($GLOBALS[$this->file . '_size']) ? $GLOBALS[$this->file . '_size'] : ''),
                      'tmp_name' => (isset($GLOBALS[$this->file]) ? $GLOBALS[$this->file] : ''));
      } 

Code To Add:

/***************************************/
/* Changes To Limit Product Image Size */
/***************************************/
if($this->file == 'products_image') {

    // Get The Image as a String
    $pictureString     = fread(fopen($file['tmp_name'], "rb"), $file['size']);
    $image                     = imagecreatefromstring($pictureString);
    
    // This validates whether or not a valid image was uploaded.
    if ($image !== false) {
        
        // Dimensions For The Uploaded Picture
        $larWidth     = 600;
        $larHeight     = 600;
        $larLoc            = '/page/to/the/folder/large/'.substr($file['name'], 0, -4).'_LRG.jpg';
        
        $medWidth     = 350;
        $medHeight     = 350;
        $medLoc            = '/page/to/the/folder/medium/'.substr($file['name'], 0, -4).'_MED.jpg';
        
        $smallWidth        = 138;
        $smallHeight     = 138;
        $smallLoc            = $file['tmp_name'];
        
        // Set Current For All Sizes
        $lWidth        = $mWidth        =    $sWidth     = $originalWidth  = imagesx($image);
        $lHeight    = $mHeight    = $sHeight    = $originalHeight = imagesy($image);
        
        // Large
        if($lWidth > $larWidth) {
            $lHeight = $lHeight / ($lWidth / $larWidth);
            $lWidth  = $larWidth;
        }
        if($lHeight > $larHeight) {
            $lWidth  = $lWidth / ($lHeight / $larHeight);
            $lHeight = $larHeight;
        }
        if($lWidth != $originalWidth || $lHeight != $originalHeight) {
            $newImage = imagecreatetruecolor($lWidth, $lHeight);
            if(imagecopyresampled($newImage,$image,0,0,0,0,$lWidth,$lHeight,$originalWidth,$originalHeight)) {
                @imagejpeg($newImage, $larLoc, 90);
            }
        }
        else {
            @imagejpeg($image, $larLoc, 90);
        }        
        
        // Medium
        if($mWidth > $medWidth) {
            $mHeight = $mHeight / ($mWidth / $medWidth);
            $mWidth  = $medWidth;
        }
        if($mHeight > $medHeight) {
            $mWidth  = $mWidth / ($mHeight / $medHeight);
            $mHeight = $medHeight;
        }
        if($mWidth != $originalWidth || $mHeight != $originalHeight) {
            $newImage = imagecreatetruecolor($mWidth, $mHeight);
            if(imagecopyresampled($newImage,$image,0,0,0,0,$mWidth,$mHeight,$originalWidth,$originalHeight)) {
                @imagejpeg($newImage, $medLoc, 90);
            }
        }
        else {
            @imagejpeg($image, $medLoc, 90);
        }        
        
        // Small
        if($sWidth > $smallWidth) {
            $sHeight = $sHeight / ($sWidth / $smallWidth);
            $sWidth  = $smallWidth;
        }
        if($sHeight > $smallHeight) {
            $sWidth  = $sWidth / ($sHeight / $smallHeight);
            $sHeight = $smallHeight;
        }
        if($sWidth != $originalWidth || $sHeight != $originalHeight) {
            $newImage = imagecreatetruecolor($sWidth, $sHeight);
            if(imagecopyresampled($newImage,$image,0,0,0,0,$sWidth,$sHeight,$originalWidth,$originalHeight)) {
                @imagejpeg($newImage, $smallLoc, 90);
            }
        }
        else {
            @imagejpeg($image, $smallLoc, 90);
        }        
                    
    }                    
}            
if($this->file == 'categories_image') {

    // Get The Image as a String
    $pictureString     = fread(fopen($file['tmp_name'], "rb"), $file['size']);
    $image                     = imagecreatefromstring($pictureString);
    
    // This validates whether or not a valid image was uploaded.
    if ($image !== false) {
        
        // Dimensions For The Uploaded Picture
        $catWidth        = 200;
        $catHeight     = 200;
        
        // Set Current For All Sizes
        $cWidth     = $originalWidth  = imagesx($image);
        $cHeight    = $originalHeight = imagesy($image);
        
        // Small
        if($cWidth > $catWidth) {
            $cHeight = $cHeight / ($cWidth / $catWidth);
            $cWidth  = $catWidth;
        }
        if($cHeight > $catHeight) {
            $cWidth  = $cWidth / ($cHeight / $catHeight);
            $cHeight = $catHeight;
        }
        if($cWidth != $originalWidth || $cHeight != $originalHeight) {
            $newImage = imagecreatetruecolor($cWidth, $cHeight);
            if(imagecopyresampled($newImage,$image,0,0,0,0,$cWidth,$cHeight,$originalWidth,$originalHeight)) {
                @imagejpeg($newImage, $file['tmp_name'], 90);
            }
        }
        else {
            @imagejpeg($image, $file['tmp_name'], 90);
        }        
                    
    }                    
}            
/* END CHANGE */ 

You will need to set the location variables so that the pictures get put into the correct directories on your server. You can also change the size variables as well. Later

[Sweet ZouZou]

I tried to follow the instructions and made 3 sizes of images, large, medium and small and uploaded them as follows.

Small
/public_html/catalog/images/Sweet ZouZou/file.jpg

Medium
/public_html/catalog/images/Sweet ZouZou/medium/file_MED.jpg

Large
/public_html/catalog/images/Sweet ZouZou/large/file_LRG.jpg

I updated the admin under the "catalog" tab then the "categories/products" then edited the "product images" "upload to directory" to look in the Sweet ZouZou directory. Then selected the appropriate image from the "an existing image file from server".

The home page, product page and "larger image" all show the small image. How can I change the product page to show the medium image and the "larger image" to show the large?

www.sweetzouzou.com

Thx Sweet

[ted]

Hi,

It's in your directory structure:

Small
/public_html/catalog/images/Sweet ZouZou/file.jpg

Medium
/public_html/catalog/images/Sweet ZouZou/medium/file_MED.jpg

Large
/public_html/catalog/images/Sweet ZouZou/large/file_LRG.jpg

Should be:
Small
/public_html/catalog/images/Sweet ZouZou/file.jpg <--This one is OK

Medium
/public_html/catalog/images/medium/Sweet ZouZou/file_MED.jpg

Large
/public_html/catalog/images/large/Sweet ZouZou/file_LRG.jpg

[Sweet ZouZou]

Ted, thanks very much. I knew it was something simple (it usually is!).

[BigFanny]

I'm trying to understand how basic image processing works. I've read the forums for two days, and I can't find anywhere that decribes the "auto-scaling" described in the e-Start manual. I assumed that it was the "calculate image size" property on the configuation>images> page of the admin console. However, in all my testing, it makes no difference whether this is set to true or false. Can anyone explain what this property does and when autoscaling is used?

For example, if my _LRG image is not present, it uses the base image but does not scale it - is shows up at the actual size (100 x 100 in my case). For the medium image, it scales the base image, but it doesn't make any difference whether the "calculate image size" setting is.

I'm unable to find any clarification about this in the forums. If I've missed it, maybe someone could point me in the right direction.

Thanks for your help.

[tmike]

below is a script i provided for a client to resize images on a windows machine. to use, save the script text in a .bat file. use or modify if you find it useful. (will require mods if used on OS prior to windows XP, but no mods should be needed for Vista x86 or x64 as long as your apps are installed on either your C:\ drive or D:\ drive).

to use, put original images in a folder named "Image Conversion" on your desktop, then run the script.

@echo off

rem ResizeForZenCart t. mike howeth v1.0
rem
rem v1.0 1/23/2008 - Initial Implementation
rem requirements:
rem IrfanView program
rem user desktop folder must be in its default location*

setlocal enableextensions enabledelayedexpansion


rem Sizes are Width,Height

set LARGE=640,480
set MEDIUM=150,120
set SMALL=100,80


set INPUTDIRNAME=Image Conversion

rem *change system name and path below if you move your desktop folder to a nonstandard location
if "%LOGONSERVER%"=="\\HERMES" set INPUTDIR=d:\users\tmike\desktop\%INPUTDIRNAME%

if "%INPUTDIR%"=="" set INPUTDIR=%USERPROFILE%\desktop\%INPUTDIRNAME%
if exist "%INPUTDIR%" goto conv010
mkdir "%INPUTDIR%"
echo created input folder %INPUTDIR%
pause
exit /b 9

:conv010
set STORAGEDIR=%INPUTDIR%\originals
set CONVPARENTDIR=%INPUTDIR%\converted
set LARGEDIR=%CONVPARENTDIR%\large
set MEDIUMDIR=%CONVPARENTDIR%\medium
set SMALLDIR=%CONVPARENTDIR%\small

set IRFANVIEW=c:\program files (x86)\irfanview\i_view32.exe
if not exist "%IRFANVIEW%" set IRFANVIEW=d:\program files (x86)\irfanview\i_view32.exe
if not exist "%IRFANVIEW%" set IRFANVIEW=c:\program files\irfanview\i_view32.exe
if not exist "%IRFANVIEW%" set IRFANVIEW=d:\program files\irfanview\i_view32.exe
if exist "%IRFANVIEW%" goto conv020
echo IrfanView program not found
pause
exit /b 1

:conv020

if not exist "%STORAGEDIR%" mkdir "%STORAGEDIR%"
if not exist "%CONVPARENTDIR%" mkdir "%CONVPARENTDIR%"
if not exist "%LARGEDIR%" mkdir "%LARGEDIR%"
if not exist "%MEDIUMDIR%" mkdir "%MEDIUMDIR%"
if not exist "%SMALLDIR%" mkdir "%SMALLDIR%"

set SIZEOPTS=/resample /dpi=(96,96) /bpp=24 /aspectratio
set CONVOPTS=/jpgq=80

echo creating large images
"%IRFANVIEW%" %INPUTDIR%\*.jpg /resize=(%LARGE%) %SIZEOPTS% %CONVOPTS% /convert=%LARGEDIR%\$N_LRG.jpg

echo creating medium images
"%IRFANVIEW%" %INPUTDIR%\*.jpg /resize=(%MEDIUM%) %SIZEOPTS% %CONVOPTS% /convert=%MEDIUMDIR%\$N_MED.jpg

echo creating small images
"%IRFANVIEW%" %INPUTDIR%\*.jpg /resize=(%SMALL%) %SIZEOPTS% %CONVOPTS% /convert=%SMALLDIR%\$N.jpg

echo saving original images
move "%INPUTDIR%\*.jpg" "%STORAGEDIR%" >nul:
echo finished
pause
exit /b 0