2009/09/10
Preserve Image Ratio in osCommerce
By default, if you configure osCommerce to use a particular image size in admin >> Configuration >> Images, it will rescale the image to fit that size. If the image had a different aspect ratio, it will then appear smushed or distorted. It’s possible to set up osCommerce such that this does not happen. You can do so by setting admin >> Configuration >> Images >> Calculate Image Size to true and then change the tep_image function in includes/functions/html_output.php as so
| PHP | | copy code | | ? |
| 75 | function tep_image($src, $alt = '', $width = '', $height = '', $parameters = '', $calculate_image_size = true) { |
| 76 | if ( ( empty($src) || ( $src == DIR_WS_IMAGES ) ) && ( IMAGE_REQUIRED == 'false' ) ) { |
| 77 | return false; |
| 78 | } |
| 79 | |
| 80 | // alt is added to the img tag even if it is null to prevent browsers from outputting |
| 81 | // the image filename as default |
| 82 | $image = '<img src="' . tep_output_string($src) . '" border="0" alt="' . tep_output_string($alt) . '"'; |
| 83 | |
| 84 | if ( tep_not_null($alt) ) { |
| 85 | $image .= ' title=" ' . tep_output_string($alt) . ' "'; |
| 86 | } |
| 87 | |
| 88 | if ( ( CONFIG_CALCULATE_IMAGE_SIZE == 'true' ) && ( $calculate_image_size == true ) ) { |
| 89 | if ($image_size = @getimagesize($src)) { |
| 90 | if (empty($width) && tep_not_null($height)) { |
| 91 | $ratio = $height / $image_size[1]; |
| 92 | $width = intval($image_size[0] * $ratio); |
| 93 | } elseif (tep_not_null($width) && empty($height)) { |
| 94 | $ratio = $width / $image_size[0]; |
| 95 | $height = intval($image_size[1] * $ratio); |
| 96 | } elseif (empty($width) && empty($height)) { |
| 97 | $width = $image_size[0]; |
| 98 | $height = $image_size[1]; |
| 99 | } elseif ( $width * $image_size[1] < $height * $image_size[0] ) { |
| 100 | $height = intval($width * $image_size[1] / $image_size[0]); |
| 101 | } elseif ( $width * $image_size[1] > $height * $image_size[0] ) { |
| 102 | $width = intval($height * $image_size[0] / $image_size[1]); |
| 103 | } |
| 104 | } elseif (IMAGE_REQUIRED == 'false') { |
| 105 | return false; |
| 106 | } |
| 107 | } |
Two lines changed (75 and 88) and four lines added (99-102).
What this does is it makes the image fit within the selected size, preserving the image ratio. This takes the traditional advice (set Calculate Image Size to true and leave the width blank) and expands it for stores that have both narrow and wide images. The traditional advice could actually cause images that were tall and narrow to expand further in height, breaking out of the box for them. With this code, the image is always smaller than the box size (or the exact box size).
And make one change in tep_draw_separator, to keep this change from breaking tep_draw_separator:
| PHP | | copy code | | ? |
| 147 | function tep_draw_separator($image = 'pixel_black.gif', $width = '100%', $height = '1') { |
| 148 | return tep_image(DIR_WS_IMAGES . $image, ' ', $width, $height, '', false); |
| 149 | } |
What this does is it keeps osCommerce from preserving the image ratio on the separators. In that case, we want the single pixel image to appear in different ratios than the original.