Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Keep Image Proportions


Ian-San

Recommended Posts

If anyone used this hack from the archive forums to keep image proportions:

 

 

In html_output.php (function tep_image)  

 

 

replace:  

 

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

$image .= ' width="' . $width . '" height="' . $height . '"';  

}  

 

with:  

 

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

$image_size = @getimagesize($src);  

$ratio = $width / $image_size[0];  

if ($image_size[1]*$ratio > $height) {  

$ratio = $height / $image_size[1];  

$width = $image_size[0] * $ratio;  

} else {  

$height = $image_size[1] * $ratio;  

}  

 

$image .= ' width="' . $width . '" height="' . $height . '"';  

}

 

you should not that it is wrong as it stops pixel lines being drawn. The solution is simple:

 

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

$image_size = @getimagesize($src);

if ($height > 1) {

$ratio = $width / $image_size[0];

if ($image_size[1]*$ratio > $height) {

$ratio = $height / $image_size[1];

$width = $image_size[0] * $ratio;

} else {

$height = $image_size[1] * $ratio;

}

}

$image .= ' width="' . tep_parse_input_field_data($width, array('"' => '"')) . '" height="' . tep_parse_input_field_data($height, array('"' => '"')) . '"';

}

Ian-san

Flawlessnet

Link to comment
Share on other sites

I hate to bring this up, as i know it has been beat to death. I have installed the Mo Pics contrib, and edited my Html_output file to include the following code. My image proportions on my large pic are fine, but the small pic

is distorted. I am uploading large pics, any help would be apreciated

 

Thanks Jim

 

 

// The HTML image wrapper function

function tep_image($src, $alt = '', $width = '', $height = '', $params = '') {

if ( (($src == '') || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED=='false') ) {

return;

}

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

if ((strstr($width,'%')!='') || (strstr($height,'%')!='')) {

$dont_calculate = 1;

}

if ( (CONFIG_CALCULATE_IMAGE_SIZE) && ((!$width) || (!$height)) ) {

if ($image_size = @getimagesize($src)) {

if ( (!$width) && ($height) ) {

$ratio = $height / $image_size[1];

$width = $image_size[0] * $ratio;

} elseif ( ($width) && (!$height) ) {

$ratio = $width / $image_size[0];

$height = $image_size[1] * $ratio;

} elseif ( (!$width) && (!$height) ) {

$width = $image_size[0];

$height = $image_size[1];

}

} elseif (IMAGE_REQUIRED=='false') {

return '';

}

}

if ( CONFIG_CALCULATE_IMAGE_SIZE && (!$dont_calculate) ){

if ($image_size = @getimagesize($src)) {

$ratio = $image_size[1] / $image_size[0]; // real ratio

// do we need scaling

if (($image_size[0] > $width) || ($image_size[1] > $height)) {

$rx = $image_size[0] / $width;

$ry = $image_size[1] / $height;

if ($rx < $ry) {

$width = $height / $ratio;

} else {

$height = $width * $ratio;

}

} else {

$rx = $image_size[0] / $width;

$ry = $image_size[1] / $height;

if ($rx < $ry) {

$width = $height / $ratio;

} else {

$height = $width * $ratio;

}

}

}

}

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

$image .= ' width="' . $width . '" height="' . $height . '"';

if ($params != ' ' ) {

$image .=' ' . $params;

}

$image .= ' > ';

return $image;

} :? :?

Link to comment
Share on other sites

ok i have posted this one on my site

 

In html_output.php (function tep_image)

 

 

replace:

 

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

$image .= ' width="' . $width . '" height="' . $height . '"';

}

 

with:

 

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

$image_size = @getimagesize($src);

$ratio = $width / $image_size[0];

if ($image_size[1]*$ratio > $height) {

$ratio = $height / $image_size[1];

$width = $image_size[0] * $ratio;

} else {

$height = $image_size[1] * $ratio;

}

 

$image .= ' width="' . $width . '" height="' . $height . '"';

}

 

 

and getting this wonderfull error

Warning: Division by zero in /home/n/e/newcompserve/public_html/catalog/includes/functions/html_output.php on line 104

 

othere than that it works fine the image looks great no longer squashed

have tried the one below that mentions this one is wrong but that wont work fullstop and stop the site from working all togethere any sugestions

Link to comment
Share on other sites

Good luck on this one. I have tried every hack and sugestion that I could

find on the board,nothing seems to work for me. I looked at your site and

your small pix do look good, what are you using for small image size

in your admin, also what size picks are you uploading.Also do you know

what code is on line 104 , if you an html or php editor it will show you the

line numbers.

Link to comment
Share on other sites

hi tx for reply

line 104 = $ratio = $width / $image_size[0];

 

tryed changing the the [0] to a [1] and [.5] with the same error comming up

 

the image sizes that i post to the site are all different

 

the settings in oscommerce admin/image size are as follows

 

Title Value Action

Small Image Width 100

Small Image Height 100

Heading Image Width 57

Heading Image Height 40

Subcategory Image Width 100

Subcategory Image Height 57

Calculate Image Size false

Image Required false

 

please not that i have tryed calculate image size and image required both as true with the same resaults

Link to comment
Share on other sites

I am still looking at this, and trying some other things. What date is your snapshot? If i turn off calculate image size my pix display in large format

only.The code you showed me looks right, have you added any pick

mods? I will let you know if I find anything, I have never been able to get any help from the regs here.

 

Jim

 

:?:

Link to comment
Share on other sites

Guys

 

I dont know the answers but maybe this will help:

 

I post images as follows:

 

Image Sizes (Width x Height)

 

 

Thumb = 135 x 90 = 1 x

 

Product Normal = 390 x 260 = 2.889 x

 

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

 

Prod Info Small = 240 x 180 = 0.5 x

 

Medium (not Used) = 480 x 360 = 1 x

 

Product Big image = 640 x 480 = 1.334 x

 

My settings in Admin are:

 

Small Image Width 135

Heading Image Width 90

Heading Image Height 60

Small Image Height 90

Subcategory Image Width 90

Subcategory Image Height 60

Product Image Width 240

Product Image Height 180

 

and my html_output file has:

 

 

// 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_parse_input_field_data($src, array('"' => '"')) . '" border="0" alt="' . tep_parse_input_field_data($alt, array('"' => '"')) . '"';

 

if (tep_not_null($alt)) {

$image .= ' title=" ' . tep_parse_input_field_data($alt, array('"' => '"')) . ' "';

}

 

if ( (CONFIG_CALCULATE_IMAGE_SIZE == 'true') && ((!$width) || (!$height)) ) {

if ($image_size = @getimagesize($src)) {

if ( (!$width) && ($height) ) {

$ratio = $height / $image_size[1];

$width = $image_size[0] * $ratio;

} elseif ( ($width) && (!$height) ) {

$ratio = $width / $image_size[0];

$height = $image_size[1] * $ratio;

} elseif ( (!$width) && (!$height) ) {

$width = $image_size[0];

$height = $image_size[1];

}

} elseif (IMAGE_REQUIRED == 'false') {

return false;

}

}

 

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

$image_size = @getimagesize($src);

if ($height > 1) {

$ratio = $width / $image_size[0];

if ($image_size[1]*$ratio > $height) {

$ratio = $height / $image_size[1];

$width = $image_size[0] * $ratio;

} else {

$height = $image_size[1] * $ratio;

}

}

$image .= ' width="' . tep_parse_input_field_data($width, array('"' => '"')) . '" height="' . tep_parse_input_field_data($height, array('"' => '"')) . '"';

}

 

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

 

$image .= '>';

 

return $image;

}

 

 

I have no problems with images but maybe it is because they are already mostly in proportion to each other? I have some older images that are 240 x 160 and they display as that even though the Admin setting would make them 240 x 180.

Ian-san

Flawlessnet

Link to comment
Share on other sites

nope no pick mods installed running cvs 2.2

 

ok have changed settings as below

with out thw othere settings as they are not on my list for some resone might have something to do with it just about to check and see if there is any diferance between the two files

 

Small Image Width 135

Heading Image Width 90

Heading Image Height 60

Small Image Height 90

Subcategory Image Width 90

Subcategory Image Height 60

 

othere wise still not working

 

just going to check what size pick i have on processors as on this page it seems as if there is a full page of the same error

Link to comment
Share on other sites

Warning: Division by zero in /home/n/e/newcompserve/public_html/catalog/includes/functions/html_output.php on line 104

 

This is due to not having an image - you can reduce the risk by making no_picture.gif the default image the various MySQL tables. But there should be a better way ...

Ian-san

Flawlessnet

Link to comment
Share on other sites

This seems to solve it:

 

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

$image_size = @getimagesize($src);

if (($height > 1) && ($image_size[0] >0) && ($image_size[1] > 0)){

$ratio = $width / $image_size[0];

if ($image_size[1]*$ratio > $height) {

$ratio = $height / $image_size[1];

$width = $image_size[0] * $ratio;

} else {

$height = $image_size[1] * $ratio;

}

}

$image .= ' width="' . tep_parse_input_field_data($width, array('"' => '"')) . '" height="' . tep_parse_input_field_data($height, array('"' => '"')) . '"';

}

Ian-san

Flawlessnet

Link to comment
Share on other sites

Did anybody actually get this working. I tried all examples in this thread and couldn't get any of them to work. I repeatidly get the error:

 

Fatal error: Call to undefined function: tep_parse_input_field_data() in /hsphere/local/home/hogplum/hogplum.com/catalog/includes/functions/html_output.php on line 113

 

Any help appreciated. I keep going around in circles trying to get the images to look nice. Right now the shrunken images look really nasty.

 

Thanks!

Link to comment
Share on other sites

The problem is that there is no image for that product or catagory... the solution is to put in an image!

 

However, to make life a little easier for my operators, I did it this way:

 

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

 

if ( $image_size[0] ) {

$image_size = @getimagesize($src);

$ratio = $width / $image_size[0];

if ($image_size[1]*$ratio > $height) {

$ratio = $height / $image_size[1];

$width = $image_size[0] * $ratio;

} else {

$height = $image_size[1] * $ratio;

}

}

$image .= ' width="' . $width . '" height="' . $height . '"';

}

 

Now if there is no image to present, it still works!

 

For me anyway :wink:

 

 

RDB

Link to comment
Share on other sites

  • 1 month later...

hey.. i currently have my ssl set up on a seperate server and the images from the non ssl catalog are being linked from there (only need to upload one copy through admin that way) the problem is the getimagesize() can't seem to open files on the ssl server even though the path is right.. any ideas?

Link to comment
Share on other sites

Uh....really silly question....

 

Why are you hacking code when you can just turn off one of the settings in the admin and acheive the same thing?

 

Small Image Height 90

Small Image Width

 

Heading Image Height 60

Heading Image Width

 

Subcategory Image Height 60

Subcategory Image Width

Link to comment
Share on other sites

Why are you hacking code when you can just turn off one of the settings in the admin and acheive the same thing?

 

I guess we just like to program ... :)

 

On a point of pointless detail, I thought that HTML standards require that all images should have a height and width setting?

Ian-san

Flawlessnet

Link to comment
Share on other sites

If you have an image with a 1:15 ratio, then you would get a really long image that's 90px high. This is unacceptable. We need it to fit within an A x B box. while retaining its size ratio.

 

Uh....really silly question....

 

Why are you hacking code when you can just turn off one of the settings in the admin and acheive the same thing?

 

Small Image Height 90

Small Image Width  

 

Heading Image Height 60

Heading Image Width  

 

Subcategory Image Height 60

Subcategory Image Width

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...