HOW-TO: Image Preparation

It's usually best with an image problem to post a url where we can see (or not see :D) what the problem is.

Ryk,

The problem is the image is not loading from custom directory. It only likes to take image from main directory and /image/large and /image/medium. Its does like to read or write into the custom directory. And again i checked all my attribute the are fine.

Bit weird. My small image is the same size as the medium image. Then large is about 25K file size. ....:frusty:

The reason I (and others) ask for a url is that there's a range of tools we use to view the page from the simple View Source to Firefox and its various extensions.

It could be something as simple as uppercase/lowercase mismatch of directory/file names.

:clap::blush: I know now. I changed the /medium and /large folder to attribute 777. But not the custom folders. Silly me...:frusty:

Now only 2 folders for my images and they are stored like this:-

images/medium/[some directory]
images/large/[some directory]

I don't have any folder for small images.

Well you should do - images/[somedirectory]

Yes Yes Ryk,

Added /images/[somedirectory]. I thought i dont need it. After a few minutes i realise the files are uploaded into /images/[somedirectory] as well.

Thank you

ok so i have shirts that come up just fine with the images i have uploaded but now i have created a new catagory and new product for download and its only reading the small image from the main directory... what am i missing?
http://www.ransomapparel.com/store
look at "designs".

I'm using the images/, images/medium and images/large folders and uploading the 3 sized images into them.

Now I've run into the problem where I have too many files to view them all with FTP and when I need to remove an image I end up having to do it one by one with File Manager from the host side. I realize the folder view at at 1998 is to keep time and load down on the server (and have found out that my host actually suggests/mandates no more than 2500 files/images per directory.

If I create subdirectories like images/test1, images/medium/test1 and images/large/test1 and move the images into the subfolders will Zen pick up the images from the subfolders or will I need to change everything from the product page also?

Hopefully this won't be as hard as I think it's going to be, I'm trying to get those down to where I can do maintenance from FTP rather than File Manager.

Any guidance or suggestions appreciated much!

ted:

If I create subdirectories like images/test1, images/medium/test1 and images/large/test1 and move the images into the subfolders will Zen pick up the images from the subfolders

No - not without....

change everything from the product page also?
Either that, or do it directly to the database using phpMyAdmin and some sql commands (sorry, although I would mess around myself, I'm not confident enough on this to post actual code)

Hopefully this won't be as hard as I think it's going to be

You don't need to re-arrange what you've already got, but just start your sub-directory approach immediately...whenever you add new products, ensure that you select the appropriate sub-directory for the image on the data entry page.

Hi all, first post, so be gentle. Extremely useful start to the thread on image preparation.

I am preparing the product images for my new site. I'm using all square images for simplicity, so small are 120px, medium 180px and large 360px.

Forgive me if the question has already been answered in this thread or elsewhere, but I need to get my head around where each size version of the image is used on the site. I understand _MED is used in the product display, and _LRG is used in the 'larger image' pop-up. In configuration>images we have at the top

Small Image Width
Small Image Height

So should this be set to 120px a 120px, the size of my prepared image, or does it not matter?

and at the bottom a whole list of images

Image - Product listing width
Image - Product listing height
etc.
etc.

Are all these various images produced from the Small Image version?

If i set these sizes to say 80px x 80px, will they be resized from the 120px x 120px small image or the 360px x 360px large image? My pages will be very image intensive, so I don't want small images drawn from big ones with unnecessary large file sizes and slowing down of page loading.

The small image is the thumbnail that shows up when you're looking at products in a category.

Medium image is shown when you view an individual product

The large image is shown when you click the medium image on the product page.

If you already hae your images sized it isn't necessary to use the image settings in admin (although you might use them to tweak image size a bit, especially if you're using extra images to get them to lay on the page the way you want them).

Thanks for your guidance on the directories/subdirectories Ryk, got that working today

ted:

If you already hae your images sized it isn't necessary to use the image settings in admin

Not true - ZC will display the image at the size set in admin. I ***THINK ***(but haven't time to check) that if you leave the settings blank, that the pic may show at the size it is (or it may not show at all!!)

Thanks for your guidance on the directories/subdirectories Ryk, got that working today

Glad to be of help.

Ryk:

if you leave the settings blank, that the pic may show at the size it isConfirmed - In the absence of width and height, Zen Cart will use the actual dimensions of the image.

This is actually quite dangerous. It's quite common for Zen Cart users processing large numbers of images into three different sizes to accidentally leave the odd one or two at their original large size. Normally this only affects download times, but with no image sizes set, it will also *&%# up your layout. So the Admin settings give useful protection against this.

I would recommend against the earlier suggestion of using a 120x120px and having it downsized to 80x80. It is the visitor's browser who will do the downsizing. Safari's pretty good, IE7 is surprising competent, FF is OK just, IE6 ... well it's just best not to do it.

Another reason not to do it is 'cos 80x80 is too small (IMHO). I'd make my images at least 120x120 on the front page, and usually bigger. After all you want the people who come to your site to be able to see your products.

Ted, in regards to your post about running into too many images to display in FTP. I know Cuteftp will only display so many, I think its 2000 when your host has the settings as ProFTP vs other setting. You may want to ask them to change your ftp access setting, its a server wide setting so if its a large host, they may not do it. But they may or if you have your own server, I can walk you thru it depending on if its cpanel, plesk or ensim. If windows...sol.

Thanks Derek,

That was the case and the host only offered the suggestion to reduce the number of images in the directories. They pointed out that it was in the UA (buried pretty deep) that users wouldn't exceed 2500 per directory. I tried FileZilla, CuteFTP and WSFTP but after googling a bit I found it was a common thing with hosts.

I downloaded all my large images and resized, renamed and split into separate directories. Took a couple of weeks but all's well now.

Just an FYI for anyone doing the 3 folders with subdirectories, I hadn't followed the Calico Cat example to the "t" and had named images 001, 001a and 001b (for example, not the complete name I used). As long as these were in the main image folders they worked fine, as soon as I moved them to subfolders I had to rename again and put in the underscore 001_a, 001_b etc. or they wouldn't "connect" with the 001 image anymore.

I tried to activate the scroll bar as you said in image preparation. I set the scrollbars=yes.**

Because I use iC_AcadameV1.2 as my template, which don't have such directory in /includes/modules/. I had to create ****iC_AcadameV1.2/pages/product_info. And I moved modified ****jscript_main.php to ****/includes/modules/****iC_AcadameV1.2/pages/product_info. When I did everthing you said, I still can't find any change about the pop-up image, still no scroll bar for larger images.

Did I do anything wrong? Thanks!
**

libind:

I tried to activate the scroll bar as you said in image preparation. I set the scrollbars=yes.**

Because I use iC_AcadameV1.2 as my template, which don't have such directory in /includes/modules/. I had to create ****iC_AcadameV1.2/pages/product_info. And I moved modified ****jscript_main.php to ****/includes/modules/****iC_AcadameV1.2/pages/product_info. When I did everthing you said, I still can't find any change about the pop-up image, still no scroll bar for larger images.

Did I do anything wrong? Thanks!
**A search of this thread shows that you are the first person to discuss scrollbars here. Consequently your post makes no sense - were you trying to respond to a post in a different thread?

The directory structures to which you refer are advocated by one forum member only, the author of the template that you are using (and recommended against by the Zen Cart team). Maybe you really meant to post in your template's support thread?

Sorry to interrupt but I believe this is where I am supposed to ask a question about image prep, instead of starting a new thread? Hope so anyway.

Do I have to rename all my images before uploading? (I read the sticky and several posts regarding this topic. Seeking clarification here.)

My images are already named as follows:

[image_name]_tn (= thumb)
[image_name]_sm (= medium)
[image_name]_lg (=large)

I have already created folders:

images (for thumbs)
images/large (for large)
images/medium (for medium)

Thumbs range in size from 100 X 70 to 100 X 224 (All are 100 X xxx)
Medium range fr. 200 X 140 to 200 X 530.
Large are 400, 500, & 800 X 392 - 1500 (heights are varied).

If I were to load these as instructed, what is the likely outcome? Will it work?

I tried to find a free image editor that does batch file management. Any suggestions?

I have never used a batch editor. The instructions on this thread indicate it is a straight-forward process. I should have little trouble. I am operating in the dark on this so I hope to first review hear the cautions you might share with me.

Tks,
Jake

OK, well... No responses, eh? Ok, I'll close that last question out.

J

Jake:

Do I have to rename all my images before uploading? (I read the sticky and several posts regarding this topic. Seeking clarification here.)

My images are already named as follows:

[image_name]_tn (= thumb)
[image_name]_sm (= medium)
[image_name]_lg (=large)

Yes, you'll need to rename your images.

Following your example above, Zen cart uses [image_name] as the base for all images. It doesn't support the _tn suffix

You could keep the _sm and _lg suffixes if you like -- you'll have to change the default _MED and _LRG suffixes in Admin | Configuration | Images if you plan to do that.
They still need to be uploaded to the appropriate "medium" and "large" folders.

NOTE: Just a reminder that Zen Cart only ever uses one "medium" image. You don't need more than 1 medium image.