Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Stretch Fix Support Forum


e_covert

Recommended Posts

Tired of having to decide whether you like your product images better with a standard height or with a standard width, since if you set both you end up with stretched images?

 

This modification allows the existing image wrapper function to consider your configured image width and height variables as maximum values, not absolute values. It's almost like your configured width and height variables define a box within which your images will fit while maintaining their original aspect ratio (instead of stretching one of the images dimensions).

 

View Stretch Fix contribution here

Edited by e_covert
Link to comment
Share on other sites

Tired of having to decide whether you like your product images better with a standard height or with a standard width, since if you set both you end up with stretched images?

 

This modification allows the existing image wrapper function to consider your configured image width and height variables as maximum values, not absolute values. It's almost like your configured width and height variables define a box within which your images will fit while maintaining their original aspect ratio (instead of stretching one of the images dimensions).

 

View Stretch Fix contribution here

 

I think this is exactly what I have been looking for.

Link to comment
Share on other sites

I should also mention that this modification will currently stretch images whose height and width are both smaller than your defined image height and width variables. It determines which dimension to set to the config size, then sets the other dimension accordingly while maintaining the aspect ratio.

 

Example 1:

 

Config settings:

Small image height: 120 px

Small image width: 60 px

 

Original image size:

height: 120 px

width: 120 px

 

Output image size (small):

height: 60 px

width: 60 px

So you can see that the aspect ratio (1:1) has been maintained, but the image fits within the smaller of the two config settings (width: 60 px)

 

 

Example 2:

 

Config settings:

Small image height: 120 px

Small image width: 60 px

 

Original image size:

height: 200 px

width: 100 px

 

Output image size (small):

height: 120 px

width: 60 px

Here, the ratio of 2:1 is maintained, and the image is resized to exactly the config settings, because the ratio of the config settings is also 2:1.

 

 

Example 3:

 

Config settings:

Small image height: 120 px

Small image width: 60 px

 

Original image size:

height: 10 px

width: 10 px

 

Output image size (small):

height: 60 px

width: 60 px

This somewhat extreme example shows what happens when both the width and height of the image are smaller than the config width and height. The image is stretched (while maintaining it's aspect ratio of 1:1), and fits within the size defined in the config.

 

 

If people feel a need for it, this modification could include in the future the ability to determine if "too small" images get stretched or not....

 

 

Eric Covert

Link to comment
Share on other sites

Nice little contribution !

 

I've just changed the default stretch from true to false, to have it in effect on every page. Why do you recommend changing the calls, and not the default value (if this is the desired effect ?)

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

Nice little contribution !

 

I've just changed the default stretch from true to false, to have it in effect on every page. Why do you recommend changing the calls, and not the default value (if this is the desired effect ?)

 

You are absolutely right... if you want to change the default stretch to false you can... my worry was how that might impact the display of all the other images on the site. I really don't know the code for osCommerce all that well, and I didn't want to make the assumption that setting the default stretch to false would work throughout the site....

 

If you think it won't affect anything else, or if you think it would be easier to set the default to "false" and change the calls for just the ones I want to be "true", let me know and I'll modify the contribution.

 

Thanks for the feedback :)

 

Eric Covert

Link to comment
Share on other sites

  • 1 month later...

Hi, Can anyone explain the setup in an easier way please? I do not understand the file.

I would be easier like this:

open file - html_output.php

edit this line - blah blah

change it to - blah blah

 

know what i mean?

Thanks alot

Link to comment
Share on other sites

  • 1 month later...

This is probably a really great contribution and I'm looking forward to getting it working, but I can't seem to make it do anything! sad.gif

 

I've made all the changes mentioned in the file. But it makes no difference. I even changed the default - $stretch='false' in desperation. But nothing.. sad.gif

 

I'm not sure how to debug what I have done. Can anyone suggest my next step?

 

Thanks!

 

BTW, is this correct...

 

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

 

Should there be two ='s? ie. ==

Edited by argentice
Link to comment
Share on other sites

BTW, is this correct...

 

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

 

Should there be two ='s? ie. ==

 

Um, OK i think that IS correct, but it is part of the problem (for me)...

 

$src=/shop/images....

 

Where it should be /home/xxx/public_html/shop/images.. for getimagesize($src) to work properly.

 

Still looking into it.......

Link to comment
Share on other sites

OK, I'm not a PHP expert, but I've made this change, which seems to work for me.

 

if ($image_size = @getimagesize($_SERVER["DOCUMENT_ROOT"]."/".$src))

 

It's probably NOT the right thing to do! but if someone can come up with a better, neater solution, then please do :)

Link to comment
Share on other sites

OK, I'm not a PHP expert, but I've made this change, which seems to work for me.

 

if ($image_size = @getimagesize($_SERVER["DOCUMENT_ROOT"]."/".$src))

 

It's probably NOT the right thing to do! but if someone can come up with a better, neater solution, then please do :)

 

Hi argentice...

 

That line in your file should not have to be changed. All the calls to this function are supposed to pass in the full path to the image (this is not new to my function, that's the way this function has always worked). If what you changed fixed the problem for you, then it seems to me like your config isn't set up properly. In particular, you need to make sure the constant DIR_WS_IMAGES is set properly.

 

Mine (as found in "catalog/includes/configure.php") is set as follows:

 

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

 

If you set the default 'stretch' variable in the function definition to "false", it should work as per the description for all images. If you leave the default as "true", then you need to find in your code all the calls to this function which you want to apply the fix to, and modify how they call the function. This is described in the included file as follows:

 

if the old function call looked like this:

 

tep_image(DIR_WS_IMAGES . $products_new['products_image'], $products_new['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT)

 

Then the new function call will be:

 

tep_image(DIR_WS_IMAGES . $products_new['products_image'], $products_new['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT,'','false')

 

In the included file, I have provided a list of the function calls I chose to change, and where to find them. Another poster to this forum recommended just setting the default to "false".... I wasn't sure if that would adversly affect other things, but it sounds like it worked for them.

 

Please read through the examples posted earlier in the forum. It should also be noted that this modification is designed to fix the aspect ratio, not whether or not images are resized. So... if both the height and width of your images are smaller than the related height and width settings in your configuration, then the images will be "stretched" to fit the settings, but the aspect ratio of the image will be maintained.

 

I hope this clarifies a bit :)

 

ecovert

Link to comment
Share on other sites

Hi argentice...

 

That line in your file should not have to be changed. All the calls to this function are supposed to pass in the full path to the image (this is not new to my function, that's the way this function has always worked). If what you changed fixed the problem for you, then it seems to me like your config isn't set up properly. In particular, you need to make sure the constant DIR_WS_IMAGES is set properly.

 

Mine (as found in "catalog/includes/configure.php") is set as follows:

 

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

 

 

I told you I wasn't a programmer :lol:

 

However, I removed my change, and set what you suggested

 

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

 

And it now works!! B) THANK YOU!

 

it WAS set to....

 

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

I thought it required the full path, hence my suggestion.

 

 

I'm now worried my OSC wasn't installed corectly (done automatically via cpanel) :angry:

Edited by argentice
Link to comment
Share on other sites

I installed it as it says in stretch_fix.php file but nothing happend..no change at all

 

What I have done is:

 

I replaced this code from catalog\includes\functions\html_output.php

// The HTML image wrapper function
 /*function tep_image($src, $alt = '', $width = '', $height = '', $params = '') {
$image = '<img src="' . $src . '" border="0" alt="' . $alt . '"';
if ($alt) {
  $image .= ' title=" ' . $alt . ' "';
}
if ($width) {
  $image .= ' width="' . $width . '"';
}
if ($height) {
  $image .= ' height="' . $height . '"';
}
if ($params) {
  $image .= ' ' . $params;
}
$image .= '>';

return $image;
 }
*/
////

 

with this code:

// The HTML image wrapper function

//EC - modified to allow calls to this function to determine whether or not to allow images to stretch

// If stretch is set to false, the width and height attributes are considered as "maximum" values, rather than absolute values

function tep_image($src, $alt = '', $width = '', $height = '', $parameters = '', $stretch='true')

{

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

{

return false;

}

// 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) . ' "';

}

 

//EC - modified - removed check on if width or height are null. Change made for no-stretch ability

if ( (CONFIG_CALCULATE_IMAGE_SIZE == 'true') )

{

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

{

if (empty($width) && tep_not_null($height))

{

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

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

}

elseif (tep_not_null($width) && empty($height))

{

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

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

}

elseif (empty($width) && empty($height))

{

$width = $image_size[0];

$height = $image_size[1];

}

//EC - added the following elseif for calculating based on stretch/no-stretch

elseif (tep_not_null($width) && tep_not_null($height))

{

if ($stretch=='false')

{

$new_ratio=$height / $width;

$image_ratio=$image_size[1] / $image_size[0];

if ($new_ratio >= $image_ratio)

{

$height=$image_size[1]*($width/$image_size[0]);

}

else

{

$width=$image_size[0]*($height/$image_size[1]);

}

}

}

}

elseif (IMAGE_REQUIRED == 'false')

{

return false;

}

}

 

if (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;

}[/code]

 

And change in all files

this code:

tep_image(DIR_WS_IMAGES . $products_new['products_image'], $products_new['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT)

 

with this code:

tep_image(DIR_WS_IMAGES . $products_new['products_image'], $products_new['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT,'','false')

 

 

What should I do more to make it work?

 

thanks alot

?,???`???,?? God must love stupid people, he made so many ??,???`???,?

Link to comment
Share on other sites

Hi all.... just letting you know there is a new version of the Image Stretch Fix. This new version sets the default stretch to false, meaning you no longer have to find all the calls to tep_image (btw Shaytaan, if you change the default on the one you have to "false", that should work for you.... or download the new version and follow the instructions).

 

The new functionality implemented in this fix allows images whose original dimensions are smaller than the passed in dimensions to not be expanded to fit. As before, images will always maintain their original aspect ratio, but only images that are too big will be resized.

 

Installation is much simpler now, requiring you to simply replace the tep_image function.

Link to comment
Share on other sites

Hi all.... just letting you know there is a new version of the Image Stretch Fix. This new version sets the default stretch to false, meaning you no longer have to find all the calls to tep_image (btw Shaytaan, if you change the default on the one you have to "false", that should work for you.... or download the new version and follow the instructions).

 

The new functionality implemented in this fix allows images whose original dimensions are smaller than the passed in dimensions to not be expanded to fit. As before, images will always maintain their original aspect ratio, but only images that are too big will be resized.

 

Installation is much simpler now, requiring you to simply replace the tep_image function.

 

 

It's working now... thanks alot...

A few problems:

* When strech is false, the <?php echo tep_draw_separator('pixel_black.gif', '100%', '1'); ?> is shown as only one pixel :(

 

* When strech is true and set to false on those pages with SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT,'','false') the small pictures is not resized.. ex. a picture with 10 x 10 is 10 x 10 but piture with 100 x 100 is resized to 50 x 50...

 

PLease advice

?,???`???,?? God must love stupid people, he made so many ??,???`???,?

Link to comment
Share on other sites

It's working now... thanks alot...

A few problems:

* When strech is false, the <?php echo tep_draw_separator('pixel_black.gif', '100%', '1'); ?> is shown as only one pixel :(

 

* When strech is true and set to false on those pages with SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT,'','false') the small pictures is not resized.. ex. a picture with 10 x 10 is 10 x 10 but piture with 100 x 100 is resized to 50 x 50...

 

PLease advice

 

Hi again Shaytann :)

 

As for the first issue, I guess you would have to find where the tep_draw_separator function is defined (off the top of my head I'd say includes/functions/html_output.php) and in that function somewhere will be a call to the tep_image function. Modify that function call to include "true" for the stretch variable.

 

As for the second issue, it sounds like it's working perfectly. As per my description of the new version of the fix, only images which are too large will be resized. As you have described it, when stretch is set to false, small pictures are not resized.

 

NOTE TO ALL READERS:

If people could let me know whether or not they think images which are too small should be expanded to fit I could judge the usefulness of leaving that functionality in place. For my application, I like having them not get expanded. If enough of you think it would be useful, I could control the expanding of small images with another variable, separately from the whole ratio-maintaining thing.

 

ANOTHER NOTE TO ALL READERS:

Just to let you know I am planning on releasing another version in the near future which allows you to control the defaults via the admin.

Edited by e_covert
Link to comment
Share on other sites

Hi again Shaytann :)

 

As for the first issue, I guess you would have to find where the tep_draw_separator function is defined (off the top of my head I'd say includes/functions/html_output.php) and in that function somewhere will be a call to the tep_image function. Modify that function call to include "true" for the stretch variable.

 

As for the second issue, it sounds like it's working perfectly. As per my description of the new version of the fix, only images which are too large will be resized. As you have described it, when stretch is set to false, small pictures are not resized.

 

NOTE TO ALL READERS:

If people could let me know whether or not they think images which are too small should be expanded to fit I could judge the usefulness of leaving that functionality in place. For my application, I like having them not get expanded. If enough of you think it would be useful, I could control the expanding of small images with another variable, separately from the whole ratio-maintaining thing.

 

ANOTHER NOTE TO ALL READERS:

Just to let you know I am planning on releasing another version in the near future which allows you to control the defaults via the admin.

 

THanks alot man :thumbsup:

 

Now I understand :D It's a very cool fix for oscommerce and I think it should be included to the next milestone version :) will done

?,???`???,?? God must love stupid people, he made so many ??,???`???,?

Link to comment
Share on other sites

Hi everyone!

 

I know I just released version 1.2, but I decided to re-release it in a different area of the osCommerce Contributions site. It's now under the "Features" section. The old contrib is no longer maintained, and was finished with a note recommending people to get it from the new area. You can find the new contrib at:

 

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

 

NOTE: the last package posted on the old contrib and the first package posted on the new contrib are the same.

 

This forum will continue to be the support forum for the new contrib.

 

Thank you all for your kind words... it really isn't all that complicated of a solution... the simpler the better sometimes :)

 

Take care,

Eric Covert

 

ps: My previous post mentioned that I would be releasing another version soon. The new contrib is not that version.... it is still coming though :)

Link to comment
Share on other sites

After installing this extension I noticed that the "Image Required" variable no longer had any effect on the website. This extension really helps the distorted images problems, but I wish it would still respect the "Image Required" variable.

Link to comment
Share on other sites

After installing this extension I noticed that the "Image Required" variable no longer had any effect on the website. This extension really helps the distorted images problems, but I wish it would still respect the "Image Required" variable.

 

Hi bkissi01 :)

 

I did a comparison of my function to the original that comes in 2.2MS2 to make sure I hadn't accidentally changed something while performing other customizations. As far as I can tell, replacing the tep_image function with my new one should not have any adverse effect related to whether or not the image is required.

 

The code that controls this is in two places in the function.... once right at the top, where the first four lines (including the function definition) should read:

 

  function tep_image($src, $alt = '', $width = '', $height = '', $parameters = '', $stretch='false') {
if ( (empty($src) || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'false') ) {
  return false;
}

 

The "if" statement on lines 2-4 are exactly the same as in the original function. It basically says that if this function was called without being passed a filename to look for, and images are not required, then don't output an image tag, and don't do anything else. If we get past this "if" statement, then we have passed in something for the source variable and/or images are required.

 

Then a bit later we have another little structure something like this:

 

	if ( (CONFIG_CALCULATE_IMAGE_SIZE == 'true') )
	{
		if ($image_size = @getimagesize($src))
		{

			//... there are about 50 lines of code in this section which is where I really made the changes in order to calculate the image size.... but the code structure surrounding it is the same as the original function.

		}
		elseif (IMAGE_REQUIRED == 'false')
		{
			return false;
		}
	}

 

This structure basically says:

- "If we are supposed to be calculating image sizes, and we are able to determine the original dimensions of the passed in filename, then go ahead and figure out what size it should be."

- "If however we are supposed to be calculating image sizes but we are NOT able to determine the original dimensions (probably because the file doesn't exist, or something weird was passed in) then we can safely not create an image tag, as long as images are not required.

 

 

So.... to sum up, there are two points in the function at which it matters whether or not images are required, and both of those places are intact in the new function within the exact same logical structure as the original. If anyone else is reading this, it would be helpful to have someone double check my logic, but I'm sorry to say bkissi01, that I think your problem lies elsewhere. I wish the problem was in my function so I could help, but I really don't think it is.

 

If anyone has suggestions for how bkissi can debug this problem, feel free to post them here. Unfortunately, my osCommerce site is live and active, and has now been customized to the point that I cannot accurately test whether or not the IMAGE_REQUIRED functionality is working properly...

 

Well, I hope this helps somewhat :)

 

Eric Covert

Link to comment
Share on other sites

Hi I installed this function but got an error

 

Parse error: parse error, unexpected '}' in /home/lotbeyo/public_html/includes/functions/html_output.php on line 221

 

Any idea on how to fix this?

Link to comment
Share on other sites

I installed this contribution but my pictures are still distorted. When I turn the "calculate image size" to false the images are no longer distorted but are huge. How do I fix this?

 

Thank you,

 

Jacqueline

Link to comment
Share on other sites

I installed this contribution but my pictures are still distorted. When I turn the "calculate image size" to false the images are no longer distorted but are huge. How do I fix this?

 

Thank you,

 

Jacqueline

 

Same problem here, too. Tried multiple permutations of image height settings, turning cal image size on/off, all to no avail.

Link to comment
Share on other sites

  • 2 weeks later...

I have a little problem with the last code: I did everything right and it worked... but as you can see on the pic if I insert an image with bigger width it changes the hight of the table itself, if the hight is bigger then no problem... but its left top aligned... how can I change this? I need images to be centered and have no changes in the table itself... Please help me... I was trying to find the problem myself but no chance :'(

 

stretchfixproblem6mt.th.jpg

Edited by arimest
Link to comment
Share on other sites

I have a little problem with the last code: I did everything right and it worked... but as you can see on the pic if I insert an image with bigger width it changes the hight of the table itself, if the hight is bigger then no problem... but its left top aligned... how can I change this? I need images to be centered and have no changes in the table itself... Please help me... I was trying to find the problem myself but no chance :'(

 

stretchfixproblem6mt.th.jpg

 

 

Hi Arimest,

 

Got a bit of bad news for you.... there's no way to accomplish what you want in code without making changes to either your images or the table itself. So, a little comparison for clarification....

 

Original osCommerce Image Handling

- if you have set your height and width variables in the admin, then the images will be displayed with exactly those dimensions. This has advantages in terms of layout, you know you will always have a consistent height and width to your images, and thus you will also have a consistent height and width to the table cells that those images are in. The disadvantage is that if your original images don't match the aspect ratio of your height and width variables from admin, then your image will be distorted along either it's height or it's width

 

Stretch Fix Image Handling

- with your height and width variables set in admin, osCommerce will treat these as "maximum" values instead of absolute values. I have described this more in depth in previous posts, and I recommend you read those posts to understand what is being done. The advantage is that your images will sustain little or no distortion when being resized. The disadvantage is that the table cells holding these images now become more "fluid".

 

So.... a few possible solutions to look at:

 

1. Try just setting the Small Image Height variable, and leaving the Small Image Width variable empty in your admin. This will not fix the problem in all cases, but it looks to me like it would work for the samples you showed.

 

or

 

2. examine the way the tables are created.... see if there is a way to move the drawing of the surround box up a level in the table heirarchy... a bit difficult to explain, but through a careful process of nesting tables (yuck!), you should be able to accomplish a consistent appearance. This could be difficult work, but I think would give you the best result if you are stuck on keeping the borders around your images.

 

or

 

3. Revert back to the original image function and pad your images (also yuck) with whitespace to "fake it"... I think this will end up looking weird when you click on the thumbnail to view the actual product, but might be worth it for the sake of a consistent thumbnail view.

 

 

So, having now written those suggestions, I think that if you have the patience to figure it out, option #2 will be the best solution.

 

Hope this helps... feel free to ask more questions if you'd like :)

 

-Eric Covert

Edited by e_covert
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...