Forums / Templates, Stylesheets, Page Layout / HOW-TO: Image Preparation

HOW-TO: Image Preparation

Sticky

Views: 268,690

Results 221 to 240 of 304
3 Jun 2008, 9:16 PM
#221
masakodesigns avatar

masakodesigns

New Zenner

Join Date:
Jun 2008
Posts:
4
Plugin Contributions:
0

HOW-TO: Image Preparation

Hi Ted!! Thank you SO MUCH for your response! Okay, so at least I'm on the right path, which is good to know. I did set it as you suggested, and nothing has changed. I even tried to list only 2 per row so they would fit, and still nothing. Maybe it's because the text is in the way? I don't know how to get rid of that. I want the text under the picture instead of to the side. Do you, by chance, know how to do that also? I see you're a new zenner! Obviously a quick learner! :yes:

3 Jun 2008, 9:42 PM
#222
kuroi avatar

kuroi

Totally Zenned

Join Date:
Apr 2006
Location:
London, UK
Posts:
10,475
Plugin Contributions:
11

Re: HOW-TO: Image Preparation

masakodesigns:

Okay, so at least I'm on the right path, which is good to know.I'm afraid not. The answer you need is in Ryk's post immediately above your last one. Here's a link to the add-on module that he's pointing you towards.

Kuroi Web Design and Development | Twitter

(Questions answered in the forum only - so that any forum member can benefit - not by personal message)

5 Jun 2008, 7:12 PM
#223
jamesdavid avatar

jamesdavid

Zen Follower

Join Date:
Apr 2008
Posts:
193
Plugin Contributions:
0

Re: HOW-TO: Image Preparation

If I upload my picture like this, everything works fine;
images/mypicture.jpg
images/medium/mypicture_MED.jpg
images/large/mypicture_LRG.jpg

When I upload them like this however, only the small image is used and the _MED and _LRG file are ignored.
images/products/mypicture.jpg
images/products/medium/mypicture_MED.jpg
images/products/large/mypicture_LRG.jpg

I dont want to use my images directory as its getting very cluttered. Is there a way around this problem?
james

5 Jun 2008, 7:58 PM
#224
ted avatar

ted

Zen Follower

Join Date:
Jan 2004
Location:
Arkansas
Posts:
100
Plugin Contributions:
1

Re: HOW-TO: Image Preparation

On your Product page are you pointing the image to the new directory? Over on the right down where you're telling it the image name to use there's a drop down to select the directory the image is stored in, that needs to be set correctly or it will just read the images from the main images directory.

Ted
Never say never, it's only a matter of time, energy and asking the right person the right question!

5 Jun 2008, 8:08 PM
#225
jamesdavid avatar

jamesdavid

Zen Follower

Join Date:
Apr 2008
Posts:
193
Plugin Contributions:
0

Re: HOW-TO: Image Preparation

Yes, I set the directory from Main Directory to products.

14 Jun 2008, 11:59 PM
#226
zerocrew avatar

zerocrew

New Zenner

Join Date:
Mar 2007
Location:
Chandler, Az
Posts:
54
Plugin Contributions:
0

Re: HOW-TO: Image Preparation

jamesdavid:

If I upload my picture like this, everything works fine;
images/mypicture.jpg
images/medium/mypicture_MED.jpg
images/large/mypicture_LRG.jpg

When I upload them like this however, only the small image is used and the _MED and _LRG file are ignored.
images/products/mypicture.jpg
images/products/medium/mypicture_MED.jpg
images/products/large/mypicture_LRG.jpg

I dont want to use my images directory as its getting very cluttered. Is there a way around this problem?
james

this took me a bit to get as well but I've got it now... check it out.

images/products/mypicture.jpg
images/medium/products/mypicture.jpg
images/large/pruducts/mypicture.jpg

all images should show up just fine if you are set up like that.
make sense?:smile:

16 Jun 2008, 9:05 PM
#227
melonian avatar

melonian

New Zenner

Join Date:
Jun 2008
Posts:
8
Plugin Contributions:
0

Re: HOW-TO: Image Preparation

@zerocrew: thanks man!
I was having trouble because when added to the same folder, the product page was showing "Additional" images, instead of treating them as different sizes of the same images.
Then I tried putting them on the medium and large folders but nothing happened...thanks to your post, I found out I had to add the extra folder on each medium and large folders aswell!

Thanks!

15 Jul 2008, 1:29 AM
#228
koidragon avatar

koidragon

New Zenner

Join Date:
Jun 2008
Location:
Florida
Posts:
24
Plugin Contributions:
0

Re: HOW-TO: Image Preparation

Hey another newbie with the same issue. I am hoping someone can help me. I have read all 23 pages of this thread and I thought I followed the directions carefully but went wrong somewhere. Can someone please view my site and tell me why all the images from the home page are showing on the product detail page as additional images instead of seperate images. I want the home page and categorie page to be the same image of my design but the product detail page should be the design on a tee shirt. Please help. Thanks

https://www.divinechishirts.com

15 Jul 2008, 4:45 AM
#229
ted avatar

ted

Zen Follower

Join Date:
Jan 2004
Location:
Arkansas
Posts:
100
Plugin Contributions:
1

Re: HOW-TO: Image Preparation

I think if you have uploaded your category image and designated it on the category page and have uploaded a different image(s) to the product page everything will work fine when you change the item to In Stock instead of Sold Out. Whenever a customer views a page where the item is not available for purchase or an empty shopping cart there's a setting in Admin under Stock that you can turn on or off that shows the New Products listings.

Those "additional images" you are seeing is the New Products page. If you add quantity to an item then the Sold Out button should be replaced with Add To Cart and the Product image and additional images will be shown when viewing the Product page and the New Products page won't show up any more.

Ted
Never say never, it's only a matter of time, energy and asking the right person the right question!

15 Jul 2008, 7:16 PM
#230
koidragon avatar

koidragon

New Zenner

Join Date:
Jun 2008
Location:
Florida
Posts:
24
Plugin Contributions:
0

Re: HOW-TO: Image Preparation

I appreciate your prompt response! I tried to do what you said, but now I have my Product Information image showing up in my categories! If you can check out the site agin, you will see what I mean.

Here's the link to the product I changed to in stock & tried to add the image too.

http://www.divinechishirts.com/index.php?main_page=index&cPath=67_83

I should probably make you aware that I did NOT build this site. I hired a web designer to create it for my company based off of a PhotoShop document I created. The site LOOKS great, but I can't get it to function the way I need it to. And of course the web designer received his money so now he's no where to be found.
:frusty:

Perhaps that's why I'm having difficulties understanding a lot of what I'm reading on this forum. I'm beginning to think it would have been easier to have built the site myself! lol! Anyways, ANY help or direction you can give me is much, much appreciated.

Here's some more information about what I've been doing. Maybe you can spot my mistake(s):

I created a folder called "products" in the main images folder. I loaded my small image to it (no extra extension on the file name). Then I created another "products" folder in the medium directory and loaded my medium image to it (image_MED.jpg). Then I created a third "products" folder in the large directory and loaded that image (image_LRG.jpg). I did all of these uploads through ZC admin. Meaning I had to go into each product a total of 3 times to load the three images. Each time I loaded a new image I would select the category from the drop down list. Now I notice that the two products folders I created under the Medium and Large directories do not show on this drop down list, just Large and Medium.

When I did all of this my website only showed the last image I loaded. I read several more posts and tried loading the small image through ZC admin and the medium and large images through my FTP client on GoDaddy. Then I just get blank boxes with x's in them. I know it's probably something very simple to resolve this issue. Do I need another program (image handler?) to make this work? I'm sorry for all the questions, but I appreciate the help. I'm very grateful to have a forum like this to help support me during this challenge!
:bigups:

Many blessings!

4 Aug 2008, 1:25 PM
#231
pannerrammer avatar

pannerrammer

New Zenner

Join Date:
Jul 2008
Posts:
5
Plugin Contributions:
0

Re: HOW-TO: Image Preparation

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.

4 Aug 2008, 4:11 PM
#232
pannerrammer avatar

pannerrammer

New Zenner

Join Date:
Jul 2008
Posts:
5
Plugin Contributions:
0

Re: HOW-TO: Image Preparation

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:shocking:

5 Aug 2008, 6:43 PM
#233
heatherlsi avatar

heatherlsi

New Zenner

Join Date:
Jan 2007
Posts:
23
Plugin Contributions:
0

Re: HOW-TO: Image Preparation

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?

5 Aug 2008, 9:32 PM
#234
heatherlsi avatar

heatherlsi

New Zenner

Join Date:
Jan 2007
Posts:
23
Plugin Contributions:
0

Re: HOW-TO: Image Preparation

Sorry - I withdraw the previous question. It worked like magic :D
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 ......

2 Sep 2008, 8:23 AM
#235
illusio avatar

illusio

New Zenner

Join Date:
Aug 2008
Location:
West Sussex, UK
Posts:
17
Plugin Contributions:
0

Re: HOW-TO: Image Preparation

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/index.php?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.uk/shop/index.php?main_page=product_info&cPath=66&products_id=181&zenid=ktcjgj0l7etc08bpm5e1aksma5

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

Lorrie
x

4 Sep 2008, 3:47 PM
#236
fajmp avatar

fajmp

Zen Follower

Join Date:
Jun 2008
Location:
Canada
Posts:
132
Plugin Contributions:
0

Re: HOW-TO: Image Preparation

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

Francine Harvey
http://talkingwalls.ca
Love is the beginning of knowledge.

4 Sep 2008, 7:26 PM
#237
pannerrammer avatar

pannerrammer

New Zenner

Join Date:
Jul 2008
Posts:
5
Plugin Contributions:
0

Re: HOW-TO: Image Preparation

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

27 Sep 2008, 8:11 AM
#238
saraniel avatar

saraniel

New Zenner

Join Date:
Mar 2007
Posts:
29
Plugin Contributions:
0

Re: HOW-TO: Image Preparation

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

16 Oct 2008, 2:35 PM
#239
stokeflyer avatar

stokeflyer

New Zenner

Join Date:
Sep 2008
Posts:
13
Plugin Contributions:
0

Re: HOW-TO: Image Preparation

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

17 Oct 2008, 6:11 PM
#240
saraniel avatar

saraniel

New Zenner

Join Date:
Mar 2007
Posts:
29
Plugin Contributions:
0

Re: HOW-TO: Image Preparation

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