Dynamic Image Resizing - osCommerce development and design specialists

Dynamic Image Resizing

Presenting product images in your store is always a nightmare with osCommerce. You upload your image to your store only to find it has been resized and looks awful. Our Resize module solves this problem by dynamically resizing your product images to a more suitable size.

Once generated, the image is then displayed to the user and cached for future use. The advantage of this method is you use less bandwidth and your images always appear clean and clear.

With our module you can:

Upload a single high quality image and have it resized on different page types
Customise the output size using the osCommerce admin site
Enhance the enlarge image display

To install the module you will need to edit one file: /catalog/includes/functions/html_output.php. Open this file in your php editing program or any text editor, find the following function:

Replace original image function

// The HTML image wrapper function
function tep_image($src, $alt = '', $width = '', $height = '', $parameters = '') {
    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) . ' "';
    }

    if ( (CONFIG_CALCULATE_IMAGE_SIZE == 'true') && (empty($width) || empty($height)) ) {
      if ($image_size = @getimagesize($src)) {
        if (empty($width) && tep_not_null($height)) {
          $ratio = $height / $image_size[1];
          $width = intval($image_size[0] * $ratio);
        } elseif (tep_not_null($width) && empty($height)) {
          $ratio = $width / $image_size[0];
          $height = intval($image_size[1] * $ratio);
        } elseif (empty($width) && empty($height)) {
          $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;
}

New image function

// The HTML image wrapper function
   function tep_image($src, $alt = '', $width = '', $height = '', $parameters = '', $supressOutput = false)
    {
   // if no width or height specified or file not found use default function
   if ((!$width) || (!$height) || (!is_file(DIR_FS_CATALOG . '/' . $src))){
      return tep_default_image($src, $alt, $width, $height, $parameters);
   }

   // If file is a gif simply output as we can't handle gif images
   $filetype = strrchr($src, '.');
       if($filetype == '.gif'){
           return tep_default_image($src, $alt, $width, $height, $parameters);
       }

   // Name for the resampled image (always JPEG for decent results in size and quality
   $newName = eregi_replace( '.([a-z]{3,4})', "-{$width}x{$height}.jpg", $src );
   //$newName = str_replace(DIR_WS_IMAGES, DIR_WS_IMAGES . 'thumbs/', $newName);

   if(!file_exists(DIR_WS_IMAGES . 'thumbs')){
       mkdir(DIR_WS_IMAGES . 'thumbs');
       chmod(DIR_WS_IMAGES . 'thumbs', '777');
   }

   // if resampled image exists, no need to create. Use existing one.
   // Added check to determine whether thumbnail is older than main image. If it is, the main image has been updated. Generate a new thumbnail.
     if( is_file( DIR_FS_CATALOG . str_replace(DIR_WS_IMAGES, DIR_WS_IMAGES . 'thumbs/', $newName)) && filemtime( DIR_FS_CATALOG . $src) < filemtime ( DIR_FS_CATALOG . str_replace(DIR_WS_IMAGES, DIR_WS_IMAGES . 'thumbs/', $newName)) )
      {
      $src = str_replace(DIR_WS_IMAGES, DIR_WS_IMAGES . 'thumbs/', $newName);
      if($supressOutput == true){
          return $src;
      } else {
        return tep_default_image($src, $alt, $width, $height, $parameters);
      }
      }

   // get the size of the image. if width or height=0, image is broken. No processing.
   $size = GetImageSize(DIR_FS_CATALOG . '/' . $src);
   if (!$size[0] || !$size[1])
      return tep_default_image($src, $alt, $width, $height, $parameters);

   // Calculate Scaling Factor and x,y pos for centering the thumbnail
   // If scale = 1, image does not need to be resized.
   $scale = min($width/$size[0], $height/$size[1]);
   if ( $scale == 1 )
      return tep_default_image($src, $alt, $width, $height, $parameters);

   $newwidth = (int)($size[0]*$scale);
   $newheight = (int)($size[1]*$scale);
   $xpos = (int)(($width - $newwidth)/2);
   $ypos = (int)(($height - $newheight)/2);

   //create the destination image resource.
   //always use true color here, or you'll get some real bad color shifts
   $destImg = ImageCreateTrueColor($width, $height);
   $backColor=ImageColorAllocate($destImg, 255, 255, 255);
   ImageFilledRectangle($destImg, 0, 0, $width, $height, $backColor);

   // Check image format. Only process JPG or PNG. GIF not supported by PHP.
   // The results with gifs were no good anyway
   // We set the memory limit very high so that the script can handle big images.
   // The image resize only needs to be done once anyway.
   ini_set("memory_limit","64M");
   $newName = str_replace(DIR_WS_IMAGES, DIR_WS_IMAGES . 'thumbs/', $newName);
   switch ( $size[2] )
      {
      case 2: // JPG
         $sourceImg = ImageCreateFromJPEG (DIR_FS_CATALOG . '/' . $src);
         if (function_exists('ImageCopyResampled'))
            ImageCopyResampled($destImg, $sourceImg, $xpos, $ypos, 0, 0, $newwidth, $newheight, $size[0], $size[1]);
         else
            ImageCopyResized($destImg, $sourceImg, $xpos, $ypos, 0, 0, $newwidth, $newheight, $size[0], $size[1]);
         imagejpeg($destImg, DIR_FS_CATALOG . '/' . $newName, 90);
         $src = $newName;           // Use the resampled image
         $width = $height = "";     // and it's own properties
         break;
      case 3: // PNG
        $sourceImg = ImageCreateFromPNG (DIR_FS_CATALOG . '/' . $src);
        if (function_exists('ImageCopyResampled'))
           ImageCopyResampled($destImg, $sourceImg, $xpos, $ypos, 0, 0, $newwidth, $newheight, $size[0], $size[1]);
        else
           ImageCopyResized($destImg, $sourceImg, $xpos, $ypos, 0, 0, $newwidth, $newheight, $size[0], $size[1]);
        imagejpeg($destImg, DIR_FS_CATALOG . '/' . $newName, 90);
        $src = $newName;
        $width = $height = "";
        break;
     }
     if($supressOutput == true){
         return $newName;
     } else {
        return tep_default_image($src, $alt, $width, $height, $parameters);
     }
   }

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

    if (tep_not_null($alt)) {
      $image .= ' title=" ' . tep_output_string($alt) . ' "';
    }

    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;
}

Once the module has been installed you will begin to see the benefits immediately, your product images will appear clearer and will no longer look pixelated. You can easily tweak the sizes of the images output by logging into the osCommerce admin and viewing the image size configuration page.

The small image section controls all products images that are displayed on your site, it’s best tonormally only enter either a required height or width and not both. This will then allow the module to mathematically calculate the required output image size. If you want to disable the module and output all images at their original size just change the height and width to 0.

Note: The module can only handle JPEG or PNG. Gif images will not be processed

Please remember that these free modules are offered without any warranty or support. If you would the module installed for you or need additional help please purchase the module from our store where you will receive all the help and support you may need to get the module working.