Contribution 2094 - Image resize

Dennisra · June 15, 2004

Excellant Ryan!

Exactly what did you change to get it to work correctly?

visualpeople · June 15, 2004

It was an easy fix, I was just missing a / at the end of my path to ImageMagick.

Thanks again for spotting it.

-Ryan

MBrown · June 19, 2004

Hi,

sorry for not replying to your requests. I've completely forgotten about this contribution :ph34r:. Lukily somebody else took care of this *g*

For those of you who don't have a dedicated server or imagemagick already installed, there is an other way. Just replace the imagemagick system call by this function. But notice that this might be much slower than with imagemagick.

function createthumb($IMAGE_SOURCE, $THUMB_X, $THUMB_Y, $OUTPUT_FILE)
{ 
// $BACKUP_FILE = $OUTPUT_FILE . "_backup.jpg";
// copy($IMAGE_SOURCE, $BACKUP_FILE);
$IMAGE_PROPERTIES = GetImageSize($IMAGE_SOURCE);
if (!$IMAGE_PROPERTIES[2] == 2) {
 return(0);
} else {
 $SRC_IMAGE = ImageCreateFromJPEG($IMAGE_SOURCE);
 $SRC_X = ImageSX($SRC_IMAGE);
 $SRC_Y = ImageSY($SRC_IMAGE);
 if (($THUMB_Y == "0") && ($THUMB_X == "0")) {
	 return(0);
 } elseif ($THUMB_Y == "0") {
	 $SCALEX = $THUMB_X / ($SRC_X-1);
	 $THUMB_Y = $SRC_Y * $SCALEX;
 } elseif ($THUMB_X == "0") {
	 $SCALEY = $THUMB_Y / ($SRC_Y-1);
	 $THUMB_X = $SRC_X * $SCALEY;
 } 
 $THUMB_X = (int)($THUMB_X);
 $THUMB_Y = (int)($THUMB_Y); 
 // $DEST_IMAGE = imagecreatetruecolor($THUMB_X, $THUMB_Y);
 // $DEST_IMAGE = imagecreate($THUMB_X, $THUMB_Y);
 // unlink($BACKUP_FILE);
 $DEST_IMAGE = imageresize($SRC_IMAGE, $THUMB_X, $THUMB_Y);
 imagedestroy($SRC_IMAGE);
 if (ImageJPEG($DEST_IMAGE, $OUTPUT_FILE)) {
	 imagedestroy($DEST_IMAGE);
	 return(1);
 } 
 imagedestroy($DEST_IMAGE);

 return(0);
} 
} # end createthumb
function imageresize (&$src, $x, $y)
{
$dst = ImageCreate ($x, $y); 
// ########################
ImagePaletteCopy ($dst, $src); 
// ########################
$scX = (imagesx ($src)-1) / $x;
$scY = (imagesy ($src)-1) / $y;
$scX2 = intval($scX / 2);
$scY2 = intval($scY / 2);
for ($j = 0; $j < ($y); $j++) {
 $sY = intval($j * $scY);
 $y13 = $sY + $scY2;
 for ($i = 0; $i < ($x); $i++) {
	 $sX = intval($i * $scX);
	 $x34 = $sX + $scX2;
	 $c1 = ImageColorsForIndex ($src, ImageColorAt ($src, $sX, $y13));
	 $c2 = ImageColorsForIndex ($src, ImageColorAt ($src, $sX, $sY));
	 $c3 = ImageColorsForIndex ($src, ImageColorAt ($src, $x34, $y13));
	 $c4 = ImageColorsForIndex ($src, ImageColorAt ($src, $x34, $sY));
	 $r = ($c1['red'] + $c2['red'] + $c3['red'] + $c4['red']) / 4;
	 $g = ($c1['green'] + $c2['green'] + $c3['green'] + $c4['green']) / 4;
	 $b = ($c1['blue'] + $c2['blue'] + $c3['blue'] + $c4['blue']) / 4;
	 ImageSetPixel ($dst, $i, $j, ImageColorClosest ($dst, $r, $g, $b));
 } 
} 
return ($dst);
}

MBrown · June 19, 2004

One more thing...

as this function automatically resizes the image according to the width/heigth you can easily define a max-size for the popup-"full-size" image by changing popup_image.php after

<body onload="resize();" style="padding:0px;margin:0px">

to

<?php echo tep_image(DIR_WS_IMAGES . $products['products_image'], $products['products_name'], POPUP_IMAGE_WIDTH,POPUP_IMAGE_HEIGHT,'',1,0); ?>

POPUP_IMAGE_HEIGHT & POPUP_IMAGE_HEIGHT has to be defined in the configuration table.

INSERT INTO `configuration` VALUES ('', 'Popup Image Height', 'POPUP_IMAGE_HEIGHT', '600', 'The pixel height of images on popups', 4, 2, NULL, now(), NULL, NULL);
INSERT INTO `configuration` VALUES ('', 'Popup Image Width', 'POPUP_IMAGE_WIDTH', '600', 'The pixel width of images on popups', 4, 1, NULL, now(), NULL, NULL);

it should now show up in the admin pages.

greez

MB

Dennisra · June 19, 2004

Exactly what should be replaced in html_output.html?

MBrown · June 19, 2004

copy($src, $filename_small);
exec(DIR_IMAGEMAGICK . "mogrify -geometry " . $width . " " . $filename_small);

should be replaced by

createthumb($src, $width, $height, $filename_small);

untested but should work

galvanize · June 22, 2004

When adding this contribution

Do you need to set image sizes to a certain size such as thumbnail as a 90x90

Images look pretty bad on this version - - -see some of the newer products uploaded on

http://www.tvtimedirect.com

as compared to http://www.4asseenotnv.com which uses an older version of the software and a different contribution - - -I wish i knew which contribution because it seems to work good.

Any ideas on how I can upload only one large image and have the thumbnails and other images come out as the right size?

Perhaps a different contribution?

galen · June 22, 2004

Hi Galvanize,

This contrib gets the values from the admin>config>images

It uses the Small Image Width/Height for the max thumbnail sizes.

I had a look at the webpage you posted and the contrib is not working correctly.

You can test this by right clicking on the image and viewing it separetly(I use firefox as my browser).

To see this contrib correctly in action visit this webpage

http://www.advisns.com.au/catalog/product_...roducts_id=5600

For my webpage I only upload one large image and it creates thumbnails automatically.

If you requre it to amke multiple thumbnails you would need to edit the scripting but still use imagemagick.

If you dont' get resizing happening then imagemagick may not be install on the server or you may not have the imagemagick path pointing to the correct location.

Galen

Edited June 22, 2004 by galen

richms · June 30, 2004

Ok, I found what I was doing wrong, I was adding the function instead of editing it.

However, it is only resizing images that have no spaces in the filename. If theres a space in the name, the size stays the same. Luckily the small image is shown in the correct aspect now.

Is there any way to change this so that it will resize images with spaces in them rather then me having to go in and rename them and edit the mysql database by hand across all the entries affected?

galen · June 30, 2004

well you could try this..

edit this line and put ' around the filename

eg

exec(DIR_IMAGEMAGICK . "mogrify -geometry " . $width . " '" . $filename_small ."'");

That may or may not work. Also try \" instead of '

You may also need to place the ' around where it copies the file as well.

Test out a few things and see what the results are :)

Galen

richms · July 6, 2004

well you could try this..
edit this line and put ' around the filename

eg

exec(DIR_IMAGEMAGICK . "mogrify -geometry " . $width . " '" . $filename_small ."'");

That may or may not work. Also try \" instead of '

You may also need to place the ' around where it copies the file as well.

Test out a few things and see what the results are :)

Galen

Neither single quotes or backslash double quotes around that sorted it.

another issue is, the file size of the thumbnails is exceeding the orig images in some cases - the images are saved mostly at wuality 3 in photoshop, and are about 35-40 kB in size, some of the thumbnails are over 40kB, even tho they are resized to the smaller size. I appended -quality 5 to the command line, and the images do indeed look like crap, but are still 35k. I think there is still the DCIF data from the camera present or something causeing this, as opening and saving in paint takes the size down to 3 kilobytes.

richms · July 6, 2004

Answering my own posting here, but the good news is that the line

exec(DIR_IMAGEMAGICK . "mogrify +profile \"*\" -quality 50 -geometry " . $width . " \"".$filename_small."\"");

Removes the 35odd kB comments from the file, and makes the quality low enough to get most thumbnails in at under 1.5kB - has _really_ helped page load times on the 33.6k connect here.

Not 100% related to this contribution, but where would be the appropriate place to put a similar command line to strip comments and lower quality on images as they are uploaded to the site?

mistmov · September 18, 2004

Hi.

I have read all the posts in this topic and I still can't get this contrib. to work.

When i added the contrib.:

All my category images disappeared (header images and such are still there).

Nothing is being saved in my 'images/res' directory (yes, it's chmod to 777).

(My server already has imagemagic loaded)

When I added the 'echo $src;' test, I could see that the original image url's were being called.

(my websitre isn't coming up with any errors)

This is what is in my contrib. file:

define('DIR_WS_IMAGES', '/images/');

define('DIR_WS_ICONS', '/images/icons/');

define('DIR_IMAGEMAGICK', '/usr/local/bin/');

define('DIR_WS_RSIMAGES', DIR_WS_IMAGES . 'res/');

*I am not totally sure about the location of imagemagic but shouldn't I see the origonal images on my website if everything else worked?

This is what I copied into my html_output.php file:

--------------------------------------------

////

// The HTML image wrapper function

function tep_image($src, $alt = '', $width = '', $height = '', $parameters = '', $res = 1, $addattribs = 1){

if ((empty($src) || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'true') || !is_file($src)) {

return false;

}

if ( !strstr($width, '%') && $res) {

$width = round($width);

$height = round($height);

preg_match("/.*\/(.*)\.(\w*)$/", $src, $fname);

list($oiwidth, $oiheight, $oitype) = getimagesize($src);

if (($width || $height) && ($height < $oiheight || $width < $oiwidth)) {

if (!$height) $height = 1;

if (!$width) $width = 1;

$k = max($oiheight / $height, $oiwidth / $width); //use smallest size

$width = round($oiwidth / $k);

$height = round($oiheight / $k);

// createthumb($filename, $width, $height, "test.jpg");

$filename_small = DIR_WS_RSIMAGES . $fname[1] . '_' . $width . '_' . $height . '.' . $fname[2];

if (!file_exists($filename_small)) {

copy($src, $filename_small);

exec(DIR_IMAGEMAGICK . "mogrify -geometry " . $width . " " . $filename_small);

}

$src = $filename_small;

}

// alt is added to the img tag even if it is null to prevent browsers from outputting

// the image filename as default

$image = '<img src="' . tep_output_string($src) . '" border="0" alt="' . tep_output_string($alt) . '"';

if (tep_not_null($alt)) {

$image .= ' title=" ' . tep_output_string($alt) . ' "';

}

if ($addattribs && tep_not_null($width) && tep_not_null($height)) {

$image .= ' width="' . tep_output_string($width) . '" height="' . tep_output_string($height) . '"';

}

if (tep_not_null($parameters)) $image .= ' ' . $parameters;

$image .= '>';

return $image;

}

-----------------------------------------------------------

If someone could please help me, that would be great! I am not a pro at php and have already spent hours trying to figure out what is wrong. PLEASE HELP!!!

Thanks!

mistmov · September 18, 2004

Hi.

I still can't figure out how to fix my problem above!

Could someone PLEASE HELP ME.

Thank you

Dennisra · September 19, 2004

What is your website URL?

mistmov · September 19, 2004

I made this website for someone else and they are not ready to put it up yet (and I am still fine tuning it) so I was requested to password protect it. For this, I can make a temporary exception

The URL is:

http://paradiseinbloom.com/index.php?cPath...6ec72e58ca906e2

username: test

password: test

*This is only a temp username and password until I can get this error fixed. THANK YOU!!!

As you can see, all the category images, product images, icon images, and space images all disappear and I am left with the main header and design images.

galen · September 20, 2004

Hi mistmov,

There are several reasons why this can happen.

The times that i have encounted it were becuase users has incorrected defined the values in their configure.php

either post your configure.php to me or check that it follows the same format as the original.

Galen

mistmov · September 21, 2004

And once again you are correct. Thank you so much! You are a GOD to the lost OSC people like me!

[email protected] · September 28, 2004

I've updated the thumbnails.txt with lots more information.

Have a look

http://www.oscommerce.com/community/contributions,2094

Galen

<{POST_SNAPBACK}>

Hello Galen,

I have seen you support for this contribution and it seems like I need this one.

I have done what is described in the thumbnails.txt and correct mistake in configure.php. Now I have a error that is not mentionned in your post.

As I can see that your personal catalog is working well, it sounds to me that there could be a mistake in php code somewhere.

Here is my url : http://www.tecnnis.be/shop/default.php

All images have dissapeared and there is that error in the browser :

Fatal error: Call to undefined function: tep_output_string() in /vhosts/tecnnis.be/shop/includes/functions/html_output.php on line 100

There is also something I have missed: where can I configure the mogrify width and height ?

So as my images have different sizes and rates, this module will be very helpfull.

I wish this could work for me.

Thank you for any help.

Didier

galen · September 29, 2004

Hi Didier,

I would re-check steps 2 & 3 from the thumbnails.txt

Also this is the line where it changes the image sizes

exec(DIR_IMAGEMAGICK . "mogrify -geometry " . $width . " " . $filename_small);

i would not mess around until you have the core contrib working

capersd · October 1, 2004

ok.. I've just installed this contribution from scratch based on the latest thumbnails.admin.txt and thumbnails.txt. I have been very lucky, other than the typo in the configure.php file. The only issue that I'm having is the following error message:

Warning: exec(): Unable to fork [C:/Program Files/ImageMagick-6.0.8-Q16/mogrify -geometry 65 c:/inetpub/wwwroot/store/images/res/logomarkLogo_65_80.gif] in C:\Inetpub\wwwroot\store\admin\includes\functions\html_output.php on line 92

Ok, I am running Oscommerce on a windows server, and I chose to install the windows binary version of imagemagic. The nice thing is, everything is working, well, after I set the correct permissions. I am receiving this error in both the admin and in the catalog. I know what is causing the error, I just don't know how to fix it.

Take this for example, If I visit a page of the website that contains a image that has not been copied to the res/ directory, that's when I get the error message. I also get the error message in the admin when I create a new item (during the image upload process).

Everything seems to work, it's just annoying, does anybody have a suggestion.

Thanks

Daymon

harko · October 9, 2004

Somebody had a problem with pictures not shown, but actually being there (with 1x1 pixels dimentsions). I do'nt know why, but the problem goes away if you change two umbers in html_output.php:

list($oiwidth, $oiheight, $oitype) = getimagesize($src);

if (($width || $height) && ($height < $oiheight || $width < $oiwidth)) {

if (!$height) $height = 1;

if (!$width) $width = 1;

$k = max($oiheight / $height, $oiwidth / $width); //use smallest size

$width = round($oiwidth / $k);

$height = round($oiheight / $k);

change the two lines like this:

if (!$height) $height = 1000;

if (!$width) $width = 1000;

Any Idea why this happens?

harko · October 15, 2004

Somebody had a problem with pictures not shown, but actually being there (with 1x1 pixels dimentsions).
...

change the two lines like this:

if (!$height) $height = 1000;

if (!$width) $width = 1000;

<{POST_SNAPBACK}>

OK, indeed, I shoul look more interested to the code. The problem was the "image" setting in osC. If one wants to have an image in the original ratio, it's in need to keep empty one of the dimension-settings. This empty field will cause the contrib to set this dimension to 1, keeping the ratio and scaling the whole image to 1x1.

So simply keep the original cotrib and set the maximum dimensions at the "images"-settings.

Please see next posting for an essential expansion of this contrib.

harko · October 15, 2004

This is an extension of the contribution, using imagemagick for building thumbnails. It also looks for presence of Internet Explorer to fix the well known bug of PNG-rendering.

Also it looks for existing thumbs before generating a newer one. If the original image is changed since the last thumbnail production, the thumb will be renewed.

Pictures smaller than the maximum allowed dimensions will not be touched.

I only altered the tep_image - functions within html_output.php (both in catalog/includes/functions and in admin/includes/functions )

The new functions in catalog/includes/functions:

  function tep_image($src, $alt = '', $width = '', $height = '', $parameters = '', $res = 1, $addattribs = 1)
 {
   if ((empty($src) || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'false') || !is_file($src))
   {
     return false;
   }
   if ( !strstr($width, '%') && $res) {
     $width = round($width);
     $height = round($height);
     preg_match("/.*\/(.*)\.(\w*)$/", $src, $fname);
     list($oiwidth, $oiheight, $type, $dimstring) = getimagesize($src);
     if (($width || $height) && ($height < $oiheight || $width < $oiwidth))
     {
       if (!$height) $height = 1;
       if (!$width) $width = 1;
       $k = max($oiheight / $height, $oiwidth / $width); //use smallest size
       $width = round($oiwidth / $k);
       $height = round($oiheight / $k);
       // createthumb($filename, $width, $height, "test.jpg");
       $filename_small = DIR_WS_RSIMAGES . $fname[1] . '_' . $width . '_' . $height . '.' . $fname[2];
       // Neue Datei nur bauen, wenn kein Thumb vorhanden oder Original neu
       if (!file_exists($filename_small) || filemtime($src) > filemtime($filename_small))
       {
         copy($src, $filename_small);
         exec(DIR_IMAGEMAGICK . "mogrify +profile \"*\" -filter Lanczos -quality 75 -geometry " . $width . " \"" . $filename_small ."\"");
       }
       $src = $filename_small;
     }
   }
   // alt is added to the img tag even if it is null to prevent browsers from outputting
   // the image filename as default
   if (file_exists($filename_small)) // Bildgroessen setzen, wenn Thumb existiert
   {
     list($siwidth, $siheight, $type, $dimstring) = getimagesize($filename_small);
   }
   $image = '<img border="0" alt="' . tep_output_string($alt) . '" ';
   if (tep_not_null($alt)) {
     $image .= 'title="' . tep_output_string($alt) . '" ';
   }
     $image .= $dimstring . ' ';    // setzt die Breite und Hoehe des anzuzeigenden Bildes fuer den Browser
   if (tep_not_null($parameters)) $image .= $parameters;

   // Falls PNG-Bild ankommt, wollen wir dem IE auch ne Chance lassen
   $msie='/msie\s(5\.[5-9]|[6-9]\.[0-9]*).*(win)/i';
   if(($type == 3) && preg_match($msie,$_SERVER['HTTP_USER_AGENT']) && !preg_match('/opera/i',$_SERVER['HTTP_USER_AGENT']))
   {
     $image .= ' src="' . DIR_WS_IMAGES . 'blank.gif" align=BOTTOM style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' . HTTP_SERVER . DIR_WS_HTTP_CATALOG . tep_output_string($src) . '\', sizingMethod=\'image\');" >';
   }
   else
   {
     $image .= ' src="' . tep_output_string($src) . '">';
   }
   return $image;
 }

The new function in admin/includes/functions:

  function tep_image($src, $alt = '', $width = '', $height = '', $params = '', $catalog_image = 0, $res = 1, $addattribs = 1)
 {
   if ($catalog_image == 1){
     $resized=0;
     $original_image=$src;^M
     $src=DIR_FS_CATALOG_IMAGES.$src;

     if ((empty($src) || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'false') || !is_file($src)) {
       return false;
     }

     if ( !strstr($width, '%') && $res) {
       $width = round($width);
       $height = round($height);
       preg_match("/.*\/(.*)\.(\w*)$/", $src, $fname);
       list($oiwidth, $oiheight, $type, $dimstring) = getimagesize($src);
       if (($width || $height) && ($height < $oiheight || $width < $oiwidth)) {
         if (!$height) $height = 1;
         if (!$width) $width = 1;
         $k = max($oiheight / $height, $oiwidth / $width); //use smallest size
         $width = round($oiwidth / $k);
         $height = round($oiheight / $k); 
         // createthumb($filename, $width, $height, "test.jpg");
         $filename_small = DIR_FS_RSIMAGES . $fname[1] . '_' . $width . '_' . $height . '.' . $fname[2];
         if (!file_exists($filename_small) || filemtime($src) > filemtime($filename_small)) {
           copy($src, $filename_small);
           exec(DIR_IMAGEMAGICK . "mogrify +profile \"*\" -filter Lanczos -quality 75 -geometry " . $width . " \"" . $filename_small ."\"");
         }
         $resized=1;
       }
     }

   }//end if catalog_image
   
   if ($catalog_image == 1 && $resized == 0){
     $src=DIR_WS_CATALOG_IMAGES.$original_image;
   }
   else if ($catalog_image == 1 && $resized == 1)
   {
     $src=DIR_WS_RSIMAGES. $fname[1] . '_' . $width . '_' . $height . '.' . $fname[2];
   }

   if (file_exists($filename_small))
   {
     list($siwidth, $siheight, $type, $dimstring) = getimagesize($filename_small);
   }
   $image = '<img border="0" alt="' . $alt . '" ';
   if ($alt)
   {
     $image .= 'title="' . $alt . '" ';
   }
     $image .= $dimstring . ' ';    // setzt die Breite und Hoehe des anzuzeigenden Bildes fuer den Browser
   if ($params) $image .= $params;

   // Falls PNG-Bild ankommt, wollen wir dem IE auch ne Chance lassen
   $msie='/msie\s(5\.[5-9]|[6-9]\.[0-9]*).*(win)/i';
   if(($type == 3) && preg_match($msie,$_SERVER['HTTP_USER_AGENT']) && !preg_match('/opera/i',$_SERVER['HTTP_USER_AGENT']))
   {
     $image .= ' src="' . DIR_WS_IMAGES . 'blank.gif" align=BOTTOM style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' . HTTP_SERVER . DIR_WS_HTTP_CATALOG . $src . '\', sizingMethod=\'image\');" >';
   }
   else
   {
     $image .= ' src="' . $src . '">';
   }
   return $image;
 }

OK, hope this helps.

badvox · October 21, 2004

:thumbsup:

To all envolved with this thread.

I just want to say thank you very much for all of your input.

Galen and Dennisra your exchange throughout this thread

was a breath of fresh air. I am a software engineer but work

in the wireless telecom arena.

Your exchanges were exactly what an experienced programmer needds

to figure this out. I read your exchanges and got this working on the first try.

I dont have all my pics loaded yet because I was waiting to fix this.

Here is the url anyway.

Quads4Less of Temecula

Sincerely,

mike

Ryan:

What is your URL?

I would like to see the contribution in action.

<{POST_SNAPBACK}>

Contribution 2094 - Image resize

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation