HOW-TO: Image Preparation

[pannerrammer]

Crestien.

Liked your addition to upload.php suggested in #195 (page 20) but have made a couple of changes:

First, I replaced the /your/path/to/shop/ or whatever with the ZenCart constant DIR_FS_CATALOG_IMAGES

Second, some image editors insist on using .JPG as an extension, which causes problems with the medium & large images (which you give a .jpg extension). The code substr($file['name'], -4) simply replicates the original extension.

$larLoc = DIR_FS_CATALOG_IMAGES . 'large/' . substr($file['name'], 0, -4).'_LRG' . substr($file['name'], -4);

$medLoc = DIR_FS_CATALOG_IMAGES . 'medium/' . substr($file['name'], 0, -4).'_MED' . substr($file['name'], -4);

Thanks.

[pannerrammer]

Sometimes it's best not to jump the gun! I've found that Cristien's code block works fine for new product/category images, but gets upset with me whenever I either

• edit something about the product/category, but don't change the image, or
• manually type in the name of a product/category image (cos I've already uploaded it)

I've added an extra test strlen ($file['tmp_name']>0 to handle these 2 events.
The code block I'm now using is

/***************************************/

/* Changes To Limit Product Image Size */
/***************************************/

 if(($this->file == 'products_image') && (strlen ($file['tmp_name']>0))) {
    // 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       = DIR_FS_CATALOG_IMAGES . 'large/' . substr($file['name'], 0, -4).'_LRG' . substr($file['name'], -4);

        $medWidth     = 200;
        $medHeight    = 200;
        $medLoc       = DIR_FS_CATALOG_IMAGES . 'medium/' . substr($file['name'], 0, -4).'_MED' . substr($file['name'], -4);

        $smallWidth   = 100;
        $smallHeight  = 100;
        $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') && (strlen ($file['tmp_name']>0))) {
    // 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 */

Hope it helps

[heatherlsi]

This is probably an easy question, but how does ZenCart know that when someone clicks on the thumbnail and wants a larger image that it should get the image from the /large folder?

[heatherlsi]

Sorry - I withdraw the previous question. It worked like magic
I just uploaded the images into the folder and they showed up.... I thought it was a lot more complicated and I'd have to tell it where to find the pictures ......

[Illusio]

Hi there...

I hope you can help me, as this problem is driving me mad.

I followed this tutorial to the letter: https://www.zen-cart.com/tutorials/i...hp?article=224

All of my image settings are set to width 150px and height to 0 with 'calculate image size' switched on.

I have three images;
image_small.jpg is saved to shop/images/
image_MED.jpg is saved to shop/images/medium
image_LRG.jpg is saved to shop/images/large

My 'product info page' setting is set to width 200px height 0px.

I have also changed the width and height in includes/modules/YOUR_TEMPLATE/pages/product_info/


So, as far as I can tell I have done all I am supposed to do.
However, when I upoad my image in catalog, no matter what image I use, whether the thumbnail that is 150px wide, or the medium image, and no matter where I put them, whether in Main Gallery, or Images, or Medium etc, it's always the same. If I use the small image, the thumbnail is fine, the the image on the product info page is blurry because the small image has been enlarged. If I use the medium image then the thumbnail has been compressed and looks horrible, and the 'Large' image just references whatever image I have uploaded via Admin.
The files are not being refereced at all.
I have created templage overides as recommended, though not for images as it appears this is not necessary.

Here is a linky for ya: http://art4sale.illusiocreative.co.u...08bpm5e1aksma5

I hope all this makes sense. Any help would be really appreciated. Thank you...

Lorrie
x

[fajmp]

I'm bumping in if it's all right.
I'm having kind of the same problem
I have arranged all the files the way it is suggested and to make the website run faster. However, half of my _MED pics don't show up now

[pannerrammer]

Hi Illusio (and fajmp)

You write that you have this:

image_small.jpg is saved to shop/images/
image_MED.jpg is saved to shop/images/medium
image_LRG.jpg is saved to shop/images/large

You need to have this:

image.jpg in shop/images/
image_MED.jpg in shop/images/medium
image_LRG.jpg in shop/images/large

Zen Cart takes whatever your image is called and uses it as the 'stem', adding _MED and _LRG to it (and stores them in the medium and large folders).

Hope that helps. pannerrammer

[Saraniel]

Hi All,

I just developped a script generator for photoshop CS3 in flex technology that is able to produce a javascript code to be executed from photoshop. The script generates the 3 required image sizes for Zencart (square canva) based on your format requirements. The features are described below:

1. Improve images luminosity by applying an automatic level correction (optional)
2. Image Sharpening (optional)
3. Convert color images into black&white (optional)
4. Apply a selected background color to the square canva
5. Save the small, medium and large images to different destination directory
6. Save in .jpg or .png file format
7. Set specific file sizes for small, medium and large images
8. Add copyright information (IPTC)
9. Add _LRG, _MED or whatever extension to the filename

Photoshop + the script generator can save you a lot of time in the images creation for Zencart.
As it is very new, I had no time to test it on a large scale. may you please have a look and try it. It is working with CS3. I don't know for the other version.
Your inputs and comments are very welcome.


Link: www.kidsavenue.ch/zencart

Saraniel

[stokeflyer]

Saraneil,
I just tried your script generator, the images are resized and saved great but it does not seem to add copyright info?
Just before each photo closes in Photoshop CS2 I get the following error message:
"Could not write the file. A file-system error has occurred. (c:\)"
Do you have any idea what this could be and how I can get the copyright info to work?
Many thanks for a useful script generator

[Saraniel]

Hi stokeflyer

Thank you for using the script generator.
Could you please provide to me the script code by E-Mail.
Just go to www.kidsavenue.ch/zencart then "contact us" then paste the script in "Enter your message"

I will check and replay the script on my machine and see if I experience the same behaviour.

Thanks again Stokeflyer

Saraniel