Image Resize... or Do I really need to recreate 500 pictures

[ladykeetes]

Hi all,

I'm hopefully entering the final stage of this project. My snapshot was downloaded on Nov-19-2002. I've tried various mods posted in the forums and contributions to solve this, but they haven't seemed to work. Perhaps, I'm missing some important step, like changing the settings in admin? I assume the mod's would override those, but perhaps i'm incorrect.

The site in question is a jewelry site with a ton of unique products and each images height and width are different, cropped by the client. Expecting them to create exactly the right sized images to not goof the design is probably expecting too much. They will be adding new products regularly, which is why we went with oscommerce to begin with.

I'm uploading the full-sized images and counting on the script to scale them to size, granted this is not the best option for really sharp looking thumbs, but it will work if I can get them to be proportional and not distorted like they currently are.

My html_output.php code is below.

Thank you for your help,

Diana

<?php
/*
  $Id: html_output.php,v 1.47 2002/11/18 21:15:13 dgw_ Exp $

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2002 osCommerce

  Released under the GNU General Public License
*/

////
// Parse the data used in the html tags to ensure the tags will not break
  function tep_parse_input_field_data($data, $parse) {
    return strtr(trim($data), $parse);
  }
 
////
// The HTML href link wrapper function
  function tep_href_link($page = '', $parameters = '', $connection = 'NONSSL', $add_session_id = true, $search_engine_safe = true) {
    if (!tep_not_null($page)) {
      die('</td></tr></table></td></tr></table><br><br><font color="#ff0000"><b>Error!</b></font><br><br><b>Unable to determine the page link!<br><br>');
    }

    if ($connection == 'NONSSL') {
      $link = HTTP_SERVER . DIR_WS_CATALOG;
    } elseif ($connection == 'SSL') {
      if (ENABLE_SSL == true) {
        $link = HTTPS_SERVER . DIR_WS_CATALOG;
      } else {
        $link = HTTP_SERVER . DIR_WS_CATALOG;
      }
    } else {
      die('</td></tr></table></td></tr></table><br><br><font color="#ff0000"><b>Error!</b></font><br><br><b>Unable to determine connection method on a link!<br><br>Known methods: NONSSL SSL</b><br><br>');
    }

    if (tep_not_null($parameters)) {
      $link .= $page . '?' . $parameters;
      $separator = '&';
    } else {
      $link .= $page;
      $separator = '?';
    }

    while ( (substr($link, -1) == '&') || (substr($link, -1) == '?') ) $link = substr($link, 0, -1);

// Add the session ID when moving from HTTP and HTTPS servers or when SID is defined
    if ( (ENABLE_SSL == true ) && ($connection == 'SSL') && ($add_session_id == true) ) {
      $sid = tep_session_name() . '=' . tep_session_id();
    } elseif ( ($add_session_id == true) && (tep_not_null(SID)) ) {
      $sid = SID;
    }

    if ( (SEARCH_ENGINE_FRIENDLY_URLS == 'true') && ($search_engine_safe == true) ) {
      while (strstr($link, '&&')) $link = str_replace('&&', '&', $link);

      $link = str_replace('?', '/', $link);
      $link = str_replace('&', '/', $link);
      $link = str_replace('=', '/', $link);

      $separator = '?';
    }
    
    if (isset($sid)) {
      $link .= $separator . $sid;
    }

    return $link;
  }

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

////
// The HTML form submit button wrapper function
// Outputs a button in the selected language
  function tep_image_submit($image, $alt = '', $parameters = '') {
    global $language;

    $image_submit = '<input type="image" src="' . tep_parse_input_field_data(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image, array('"' => '"')) . '" border="0" alt="' . tep_parse_input_field_data($alt, array('"' => '"')) . '"';

    if (tep_not_null($alt)) $image_submit .= ' title=" ' . tep_parse_input_field_data($alt, array('"' => '"')) . ' "';

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

    $image_submit .= '>';

    return $image_submit;
  }

////
// Output a function button in the selected language
  function tep_image_button($image, $alt = '', $parameters = '') {
    global $language;

    return tep_image(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image, $alt, '', '', $parameters);
  }

////
// Output a separator either through whitespace, or with an image
  function tep_draw_separator($image = 'pixel_black.gif', $width = '100%', $height = '1') {
    return tep_image(DIR_WS_IMAGES . $image, '', $width, $height);
  }

////
// Output a form
  function tep_draw_form($name, $action, $method = 'post', $parameters = '') {
    $form = '<form name="' . tep_parse_input_field_data($name, array('"' => '"')) . '" action="' . tep_parse_input_field_data($action, array('"' => '"')) . '" method="' . tep_parse_input_field_data($method, array('"' => '"')) . '"';

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

    $form .= '>';

    return $form;
  }

////
// Output a form input field
  function tep_draw_input_field($name, $value = '', $parameters = '', $type = 'text', $reinsert_value = true) {
    $field = '<input type="' . tep_parse_input_field_data($type, array('"' => '"')) . '" name="' . tep_parse_input_field_data($name, array('"' => '"')) . '"';

    if ( (isset($GLOBALS[$name])) && ($reinsert_value == true) ) {
      $field .= ' value="' . tep_parse_input_field_data($GLOBALS[$name], array('"' => '"')) . '"';
    } elseif (tep_not_null($value)) {
      $field .= ' value="' . tep_parse_input_field_data($value, array('"' => '"')) . '"';
    }

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

    $field .= '>';

    return $field;
  }

////
// Output a form password field
  function tep_draw_password_field($name, $value = '', $parameters = 'maxlength="40"') {
    return tep_draw_input_field($name, $value, $parameters, 'password', false);
  }

////
// Output a selection field - alias function for tep_draw_checkbox_field() and tep_draw_radio_field()
  function tep_draw_selection_field($name, $type, $value = '', $checked = false, $parameters = '') {
    $selection = '<input type="' . tep_parse_input_field_data($type, array('"' => '"')) . '" name="' . tep_parse_input_field_data($name, array('"' => '"')) . '"';

    if (tep_not_null($value)) $selection .= ' value="' . tep_parse_input_field_data($value, array('"' => '"')) . '"';

    if ( ($checked == true) || ($GLOBALS[$name] == 'on') || ( (isset($value)) && ($GLOBALS[$name] == $value) ) ) {
      $selection .= ' CHECKED';
    }

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

    $selection .= '>';

    return $selection;
  }

////
// Output a form checkbox field
  function tep_draw_checkbox_field($name, $value = '', $checked = false, $parameters = '') {
    return tep_draw_selection_field($name, 'checkbox', $value, $checked, $parameters);
  }

////
// Output a form radio field
  function tep_draw_radio_field($name, $value = '', $checked = false, $parameters = '') {
    return tep_draw_selection_field($name, 'radio', $value, $checked, $parameters);
  }

////
// Output a form textarea field
  function tep_draw_textarea_field($name, $wrap, $width, $height, $text = '', $parameters = '', $reinsert_value = true) {
    $field = '<textarea name="' . tep_parse_input_field_data($name, array('"' => '"')) . '" wrap="' . tep_parse_input_field_data($wrap, array('"' => '"')) . '" cols="' . tep_parse_input_field_data($width, array('"' => '"')) . '" rows="' . tep_parse_input_field_data($height, array('"' => '"')) . '"';

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

    $field .= '>';

    if ( (isset($GLOBALS[$name])) && ($reinsert_value == true) ) {
      $field .= $GLOBALS[$name];
    } elseif (tep_not_null($text)) {
      $field .= $text;
    }

    $field .= '</textarea>';

    return $field;
  }

////
// Output a form hidden field
  function tep_draw_hidden_field($name, $value = '', $parameters = '') {
    $field = '<input type="hidden" name="' . tep_parse_input_field_data($name, array('"' => '"')) . '" value="';

    if (tep_not_null($value)) {
      $field .= tep_parse_input_field_data($value, array('"' => '"'));
    } else {
      $field .= tep_parse_input_field_data($GLOBALS[$name], array('"' => '"'));
    }

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

    $field .= '">';

    return $field;
  }

////
// Hide form elements
  function tep_hide_session_id() {
    if (tep_not_null(SID)) return tep_draw_hidden_field(tep_session_name(), tep_session_id());
  }

////
// Output a form pull down menu
  function tep_draw_pull_down_menu($name, $values, $default = '', $parameters = '', $required = false) {
    $field = '<select name="' . tep_parse_input_field_data($name, array('"' => '"')) . '"';

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

    $field .= '>';

    if ($default == '') $default = $GLOBALS[$name];

    for ($i=0; $i<sizeof($values); $i++) {
      $field .= '<option value="' . tep_parse_input_field_data($values[$i]['id'], array('"' => '"')) . '"';
      if ($default == $values[$i]['id']) {
        $field .= ' SELECTED';
      }

      $field .= '>' . tep_parse_input_field_data($values[$i]['text'], array('"' => '"', '\'' => ''', '<' => '<', '>' => '>')) . '</option>';
    }
    $field .= '</select>';

    if ($required == true) $field .= TEXT_FIELD_REQUIRED;

    return $field;
  }

////
// Creates a pull-down list of countries
  function tep_get_country_list($name, $selected = '', $parameters = '') {
    $countries_array = array(array('id' => '', 'text' => PULL_DOWN_DEFAULT));
    $countries = tep_get_countries();
    for ($i=0; $i<sizeof($countries); $i++) {
      $countries_array[] = array('id' => $countries[$i]['countries_id'], 'text' => $countries[$i]['countries_name']);
    }

    return tep_draw_pull_down_menu($name, $countries_array, $selected, $parameters);
  }
?>

[modom]

Dear Diana,

Can you post a url to look at?

Also, exactly what is the problem? If you could explain that a little more we could help you more.

Thanks.

[michael_s]

To stop any distortion, just set one dimension in the admin configuration, either width or height, but not both. This is all done via the admin, no need to mess with your php file.

There is a nice contribution over at oscommerce.com that uses NETPBM to resize the pictures instead of the browser, and the quality is much better. But, you need netpbm installed on your server.

[ladykeetes]

The url to view the site at is:

http://sculptedgoldwirejewelry.com/catalog (not live, but I'll be happy to let you know when it is, if you really must order )


The problem is some of the images (and pieces) are very 'tall' others are very 'wide', thus the pictures when reduced are squished in one direction or another. The looking at the full sized image the distortion is revealed.

http://sculptedgoldwirejewelry.com/c...5a346998fe3c8d

This piece is being squished vertically and looks much more oval than it actually is.

It just occurred to me that we just did a server change 2 days ago, so the site may not be viewable via domain, depending on your ISP. The IP url is : http://209.120.132.241/~sculpted/catalog

Thanks,

Diana

[modom]

Diana,

The only way to solve your problem is to take each image, put it in your graphics program, and add space equal to the largest dimension.

I usually try to put a background color for the space the same as the picture.

[michael_s]

OR:

If you only set ONE dimension in the admin, the other will fall to the correct ratio, and although your images may have different heights, they will not be distorted.

If you absolutely must have them all perfect squares, then you will have to do as Melinda states. If you can live with slight variation in height or width, do as I suggest, and all distortion problems will be solved.

[stasha]

Very Cool, I wasn't quite looking for that answer yet but it surely worked and thank ya very much!
Christy