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

HOW-TO: Image Preparation

Sticky

Views: 268,690

Results 181 to 200 of 304
16 Aug 2007, 9:06 AM
#181
chuck avatar

chuck

Totally Zenned

Join Date:
Jul 2005
Posts:
255
Plugin Contributions:
0

HOW-TO: Image Preparation

Jake:

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

J

Sometimes responses take awhile for folks to log in and see what they know an answer to. Patience is a virtue.

What usually works around here is ... if you need further assistance when you haven't had an answer, post a reply back to your message, along with "more" information, including details of what's happened as you've tried different things while waiting on a reply. Sometimes it takes more information to give folks enough to go on in providing an answer.

18 Aug 2007, 9:26 PM
#182
ted avatar

ted

Zen Follower

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

Re: HOW-TO: Image Preparation

A good free image editor that will also allow you to add the suffix is Easy Thumbnails by Fookes software:
http://www.fookes.com/ezthumbs/index.php

What you could do using this program is take your Large images as they exist now, place them in a folder and start over creating Small, Medium and Large images with the _LRG and _MED suffixes.

You can also find a good batch renamer here:
http://www.den4b.com/downloads.php?project=ReNamer

As Chuck stated if you stay with your naming convention as you have them you'll need to change your config file.

Are you using single images per item or multiple images? Sometimes it's good to think ahead :)

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

19 Aug 2007, 8:44 PM
#183
billb2456 avatar

billb2456

New Zenner

Join Date:
Jul 2007
Posts:
7
Plugin Contributions:
0

Re: HOW-TO: Image Preparation

i am trying to set up on page 2 pics of things i have done but i can not get the pic to show where do i upload my pic to www? any help wwwdandbgraphics.com thanks bill:blink:

20 Aug 2007, 4:05 AM
#184
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: HOW-TO: Image Preparation

You need to explain your problem better. We can't give a good answer from the above.

Which page do you want the pictures on? The home page? Where on the page do you want them?

20 Aug 2007, 4:21 PM
#185
billb2456 avatar

billb2456

New Zenner

Join Date:
Jul 2007
Posts:
7
Plugin Contributions:
0

Re: HOW-TO: Image Preparation

if you look at my web site at https://www.dandbgraphics.com and go to side box that has things we have done that is page #2i want to just put the pics on that page i even tryed to link it to a web page and still the pic do not come up hope this helps thanks bill

20 Aug 2007, 4:39 PM
#186
ted avatar

ted

Zen Follower

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

Re: HOW-TO: Image Preparation

You're making that page as an EZ Page and you'll need to use the HTML editor and build the page including inserting the images directly on the page. If the images you want to use are on Product pages you can copy the image location and insert on the EZ Page and link it to the product. If not you'll need to upload the image to your image directory and then paste the URL into the EZ Page in order for it to appear.

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

4 Oct 2007, 10:53 AM
#187
freshstart avatar

freshstart

New Zenner

Join Date:
Jul 2007
Location:
England
Posts:
84
Plugin Contributions:
0

Re: HOW-TO: Image Preparation

Hello all,

Hope this is the section to place my question. I am just starting to upload images to my Zencart. I followed the method to upload images into categories from within the admin section, however, when I point to the image within one of my image folders on my server, it does not appear. When I choose the image file from my home based computer, it does?

Is this correct? I thought the whole point of transferring images from my home computer to my remote server location would mean that Zencart would identify the image within the server and use those :lamo:

Sorry if I am repeating an earlier question - I shall read more threads and look for an answer.

Best wishes,

freshstart.

4 Oct 2007, 1:57 PM
#188
ted avatar

ted

Zen Follower

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

Re: HOW-TO: Image Preparation

There are 2 image folders in ZenCart, if you're uploading images to the admin folder as stated that is the problem, images should be FTP'd to the main images folder in the cart directory and not the one in admin. Then you can call them from product and category pages by placing the directory and image name into the field: Or, select an existing image file from server, filename:

An example on what goes into that box if your directory is named "spot" and the image name is "black.jpg" then you would put in the box:
spot/black.jpg and it will attach the already uploaded image. You should see it when previewing the Product Page on the top right of the page.

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

5 Oct 2007, 5:02 AM
#189
awk_grep avatar

awk_grep

New Zenner

Join Date:
Dec 2006
Location:
Dallas,TX
Posts:
98
Plugin Contributions:
0

Re: HOW-TO: Image Preparation

Ummm,
try e_start, Zen Cart book as well..

18 Oct 2007, 8:46 AM
#190
freshstart avatar

freshstart

New Zenner

Join Date:
Jul 2007
Location:
England
Posts:
84
Plugin Contributions:
0

Re: HOW-TO: Image Preparation

Ted,

Sorry, but I do not think that my previous post was clear enough (I had not had a lot of sleep when I wrote it). I have placed the following message elsewhere today(in the wrong place I think - apologies to moderators), but repeat it here and hopefully it makes sense?

Dear colleagues,

I have spent some time reading the image preparation thread at the beginning of this section of Zencart forum and am feeling stumped.

I have created three sets of images - small, medium and large. I have placed them into three sets of folders.

Via Zencart Administration / Configuration I point to those images within the server files and nothing shows on my Zencart pages?

However, if I upload an image directly from my desktop - the image appears on Zencart?

In an effort to resolve the issue, I have tried placing the image folders and images into different parts of Zencart - for instance, I am using the latest version of Zencart with a UK contribution (to make it UK friendly). I am also using a Cherry Zen Contribution, which gives me the site appearance that I like.

So, when I placed the images etc into the your_template image section - nothing happened?

When I placed the images etc into the Cherry Zen image section - nothing happened?

When I placed the images etc into the Classic images section - nothing happened?

I am doing something wrong, but I do not know what it is?

Help appreciated.

Freshstart :frusty:

18 Oct 2007, 8:53 AM
#191
kuroi avatar

kuroi

Totally Zenned

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

Re: HOW-TO: Image Preparation

@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?

Kuroi Web Design and Development | Twitter

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

18 Oct 2007, 9:26 AM
#192
freshstart avatar

freshstart

New Zenner

Join Date:
Jul 2007
Location:
England
Posts:
84
Plugin Contributions:
0

Re: HOW-TO: Image Preparation

Hello Kuroi and many thanks for your prompt reply and support :smile:

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

19 Oct 2007, 9:39 AM
#193
freshstart avatar

freshstart

New Zenner

Join Date:
Jul 2007
Location:
England
Posts:
84
Plugin Contributions:
0

Re: HOW-TO: Image Preparation

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.

19 Oct 2007, 4:21 PM
#194
ted avatar

ted

Zen Follower

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

Re: HOW-TO: Image Preparation

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)!

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

5 Nov 2007, 7:43 PM
#195
crestien avatar

crestien

New Zenner

Join Date:
Nov 2007
Posts:
1
Plugin Contributions:
0

Re: HOW-TO: Image Preparation

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

15 Nov 2007, 7:20 PM
#196
sweet_zouzou avatar

sweet_zouzou

Zen Follower

Join Date:
Nov 2007
Posts:
138
Plugin Contributions:
0

Re: HOW-TO: Image Preparation

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?

https://www.sweetzouzou.com

Thx Sweet

15 Nov 2007, 10:55 PM
#197
ted avatar

ted

Zen Follower

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

Re: HOW-TO: Image Preparation

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

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

16 Nov 2007, 7:56 PM
#198
sweet_zouzou avatar

sweet_zouzou

Zen Follower

Join Date:
Nov 2007
Posts:
138
Plugin Contributions:
0

Re: HOW-TO: Image Preparation

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

28 Nov 2007, 8:00 PM
#199
bigfanny avatar

bigfanny

New Zenner

Join Date:
Aug 2007
Posts:
4
Plugin Contributions:
0

Re: HOW-TO: Image Preparation

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.

26 Jan 2008, 3:48 AM
#200
tmike avatar

tmike

New Zenner

Join Date:
Jan 2008
Location:
Texas, USA
Posts:
5
Plugin Contributions:
0

Re: HOW-TO: Image Preparation

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