Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Scaled image resizing for thumbnails


garindan

Recommended Posts

Hi,

 

All my product images get squashed when they get reduced into a thumbnail. Is there a contribution that would create a scaled thumbnail for images that have a larger height than width etc....?

 

Thanks,

Andrew

Link to comment
Share on other sites

Yes, an example is my Automatic Thumbnail Creator http://www.oscommerce.com/community/contributions,841

which will fill the space around your image with background colour to fit it within a standard sized rectangle and maintain its proportions. There are other contribution too which may handle things differently.

Link to comment
Share on other sites

  • 4 weeks later...

I tried the suggestion of editting the PHP file, but it isn't doing anything differently.

 

Here is my file:

 

<?php

/*

$Id: html_output.php,v 1.56 2003/07/09 01:15:48 hpdl Exp $

 

osCommerce, Open Source E-Commerce Solutions

http://www.oscommerce.com

 

Copyright © 2003 osCommerce

 

Released under the GNU General Public License

*/

 

////

// The HTML href link wrapper function

function tep_href_link($page = '', $parameters = '', $connection = 'NONSSL', $add_session_id = true, $search_engine_safe = true) {

global $request_type, $session_started, $SID;

 

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

} elseif ($connection == 'SSL') {

if (ENABLE_SSL == true) {

$link = HTTPS_SERVER . DIR_WS_HTTPS_CATALOG;

} else {

$link = HTTP_SERVER . DIR_WS_HTTP_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 . '?' . tep_output_string($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 different HTTP and HTTPS servers, or when SID is defined

if ( ($add_session_id == true) && ($session_started == true) && (SESSION_FORCE_COOKIE_USE == 'False') ) {

if (tep_not_null($SID)) {

$_sid = $SID;

} elseif ( ( ($request_type == 'NONSSL') && ($connection == 'SSL') && (ENABLE_SSL == true) ) || ( ($request_type == 'SSL') && ($connection == 'NONSSL') ) ) {

if (HTTP_COOKIE_DOMAIN != HTTPS_COOKIE_DOMAIN) {

$_sid = tep_session_name() . '=' . tep_session_id();

}

}

}

 

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 ( (empty($src) || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'false') ) {

return false;

}

 

// begin radders added

$src = tep_image_resample($src,$width,$height);

//end radders added

 

// 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 = $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];

}

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

}

 

////

// 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_output_string(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image) . '" border="0" alt="' . tep_output_string($alt) . '"';

 

if (tep_not_null($alt)) $image_submit .= ' title=" ' . tep_output_string($alt) . ' "';

 

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_output_string($name) . '" action="' . tep_output_string($action) . '" method="' . tep_output_string($method) . '"';

 

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_output_string($type) . '" name="' . tep_output_string($name) . '"';

 

if ( (isset($GLOBALS[$name])) && ($reinsert_value == true) ) {

$field .= ' value="' . tep_output_string(stripslashes($GLOBALS[$name])) . '"';

} elseif (tep_not_null($value)) {

$field .= ' value="' . tep_output_string($value) . '"';

}

 

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_output_string($type) . '" name="' . tep_output_string($name) . '"';

 

if (tep_not_null($value)) $selection .= ' value="' . tep_output_string($value) . '"';

 

if ( ($checked == true) || ( isset($GLOBALS[$name]) && is_string($GLOBALS[$name]) && ( ($GLOBALS[$name] == 'on') || (isset($value) && (stripslashes($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_output_string($name) . '" wrap="' . tep_output_string($wrap) . '" cols="' . tep_output_string($width) . '" rows="' . tep_output_string($height) . '"';

 

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

 

$field .= '>';

 

if ( (isset($GLOBALS[$name])) && ($reinsert_value == true) ) {

$field .= stripslashes($GLOBALS[$name]);

} elseif (tep_not_null($text)) {

$field .= $text;

}

 

$field .= '</text>';

 

return $field;

}

 

////

// Output a form hidden field

function tep_draw_hidden_field($name, $value = '', $parameters = '') {

$field = '<input type="hidden" name="' . tep_output_string($name) . '"';

 

if (tep_not_null($value)) {

$field .= ' value="' . tep_output_string($value) . '"';

} elseif (isset($GLOBALS[$name])) {

$field .= ' value="' . tep_output_string(stripslashes($GLOBALS[$name])) . '"';

}

 

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

 

$field .= '>';

 

return $field;

}

 

////

// Hide form elements

function tep_hide_session_id() {

global $session_started, $SID;

 

if (($session_started == true) && 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_output_string($name) . '"';

 

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

 

$field .= '>';

 

if (empty($default) && isset($GLOBALS[$name])) $default = stripslashes($GLOBALS[$name]);

 

for ($i=0, $n=sizeof($values); $i<$n; $i++) {

$field .= '<option value="' . tep_output_string($values[$i]['id']) . '"';

if ($default == $values[$i]['id']) {

$field .= ' SELECTED';

}

 

$field .= '>' . tep_output_string($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, $n=sizeof($countries); $i<$n; $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);

}

 

// begin radders added

function tep_image_resample($src,$width,$height) {

 

define(JPEGQUALITY, 90);

define(ALLOWSQUASH,0);

if ($src=='') {

return $src;

}

$i = @getimagesize( $src ); // 1-gif (ignore), 2-jpeg, 3-png

 

if (!(($width == SMALL_IMAGE_WIDTH) && ($height == SMALL_IMAGE_HEIGHT))) {

return $src; // can amend to work with other images

}

if (!( ($i[2] == 3) || ($i[2] ==2))) {

return $src;

}

 

$file = eregi_replace( '.([a-z]{3,4})$', "-{$width}x{$height}.1", $src ); // name of resampled image

if (is_file( $file ) ) {

return $file;

}

 

$scr_w = $i[0];

$scr_h = $i[1];

if (($scr_w * $scr_h * $width * $height) == 0) {

return $src;

}

 

$howsquashed = ($width / $height * $scr_h / $scr_w);

if (((1 / (1 + ALLOWSQUASH)) < $howsquashed) && ($howsquashed < (1 + ALLOWSQUASH))) $simpleway='true';

$scalefactor = min($width/$scr_w, $height/$scr_h);

$scaled_w = (int)($scr_w * $scalefactor);

$scaled_h = (int)($scr_h * $scalefactor);

$offset_w = max(0,round(($width - $scaled_w) / 2,0));

$offset_h = max(0,round(($height - $scaled_h) / 2));

$dst = DIR_FS_CATALOG . '/' . $file;

$dstim = @imagecreatetruecolor ($width, $height);

$background_color = imagecolorallocate ($dstim, 255, 255, 255);

imagefilledrectangle($dstim, 0, 0, $width, $height, $background_color);

if ( $i[2] == 2) {

$srcim = @ImageCreateFromJPEG ($src); // open

}

elseif ( $i[2] == 3) {

$srcim = @ImageCreateFromPNG ($src);

}

if ($simpleway == 'true') {

imagecopyresampled ($dstim, $srcim, 0, 0, 0, 0, $width, $height, $scr_w, $scr_h);

}

else {

$intim = @imagecreatetruecolor ($width, $height);

imagecopyresampled ($intim, $srcim, $offset_w, $offset_h, 0, 0, $scaled_w, $scaled_h, $scr_w, $scr_h);

imagecopy ( $dstim, $intim, $offset_w, $offset_h, $offset_w, $offset_h, $scaled_w, $scaled_h);

imagedestroy ($intim);

}

if ( $i[2] == 2) {

imagejpeg ($dstim , $dst , JPEGQUALITY);

}

elseif ( $i[2] == 3) {

imagepng ($dstim , $dst);

}

imagedestroy ($srcim);

imagedestroy ($dstim);

return $file; // Use the newly resampled image

}

// end radders added

 

?>

Link to comment
Share on other sites

  • 5 months later...

Just a quick question about Radder's Auto Thumbnail creator, how do you set it to create thumbnails for gifs also? Mine works fine with jpgs, just not gifs....

 

is it possible?

Link to comment
Share on other sites

I tried installing this on another site and I get a weird error message with no pictures shown:

 

Warning: imagejpeg(): open_basedir restriction in effect. File(/httpdocs/catalog/images/PIC376foun-175x175.JPG) is not within the allowed path(s): (/usr/local/psa/home/vhosts/bronzegalor.com/httpdocs:/tmp) in /usr/local/psa/home/vhosts/bronzegalor.com/httpdocs/catalog/includes/functions/html_output.php on line 357

 

Can anyone help?

Edited by dimports
Link to comment
Share on other sites

Can these changes also be made for the product_info page? The list of products shows the products scaled porportionally properly, but when clicking on a product for description and stuff, the picture in the product page isn't scalled properly.

anybody know? How does product_info.php get its picture? I thought it would use the HTMLoutput.php file.

Link to comment
Share on other sites

Susie,

It doen't work with GIFs because the copyright owners do not allow it to. Maybe once the copyright expires GD Library will put GIF support back in. The last version of GD to support GIF was 1.6 I think, which is too early to be used in this application.

 

 

Dimports,

product_info.php uses the same functions but maybe you have a different sized image there. If that is the case all you have to do is to modify the code in the contribution to allow it to also process images of that size (there is an exapmle included)

Link to comment
Share on other sites

  • 1 month later...

Hi,

I have just installed the Automatic Thumbnail Creator. My questions are

 

1. How do I know the automatic thumbnail creator is creating the thumbnails? and

2. Where can I locate the thumbnails generated? (as I cannot locate the thumbnails anywhere)

 

Thanks in advance for your precious time. :D

Link to comment
Share on other sites

There are located in lour images directory and have the same name as the main product image followed by a size eg -80 x 100. You will see this if you check the image information of your thumbnails

Link to comment
Share on other sites

There are located in lour images directory and have the same name as the main product image followed by a size eg -80 x 100. You will see this if you check the image information of your thumbnails

Hi David,

 

Currently I am testing osC using windows xp & apache v2 and my images are under the directory C:\Program Files\Apache Group\Apache2\htdocs \catalog\images\hewlett_packard and other sub directories under images directory. I cannot find any thumbnails the main product image generated that followed by a size eg -80 x 100.

 

Do I need to change the path of the images directory in the code? & May I know where to locate the code?

 

Thanks in advance for you help. :D

Link to comment
Share on other sites

It should work with the subdirectory to. Make sure you installed GD.

Hi David,

 

I have managed to make it worked. Thanks for this great contribution, it makes my life easier. After testing for a while, I found out one minor problem.

 

My product images are under one of the following directories:

 

=> catalog\images\gift\box.jpg

 

After running the osC 2.2 MS2, I noticed that one thumbnail and one identical image file "box.jpg" are generated under the following directory:

 

=> catalog\images\box.jpg (exact duplicate)

=> catalog\images\box-100x80.jpg (thumbnail)

 

How to solve this minor problem. Do I need to put all the image files under catalog\images directory? Can I put my image files under different directories?

 

Thank you for your time.

 

Regards

:D

Link to comment
Share on other sites

I have a question, does the Automatic Thumbnail contrib redeuce the file size aswell?

 

If not is there a contrib that will allow me to place my own thumbnails in the required boxes?

 

Pompeylad.

PHP?!? Long live HTML!!!! But then again we never stop learning.

Link to comment
Share on other sites

Hi Shelly,

I haven't seen that happen before. I don't think there is any routine in it that saves the full-sized image anywhere (unless this has been added by someone recently. I would have expected both images to be in the same subdirectory (but then it depends on how you have set up your configuration as to how exactly the locations are used.

Link to comment
Share on other sites

  • 4 weeks later...

Hi David -

 

When do the images get resized? Is it when they're initially uploaded, or when they're first viewed?

 

I've installed your contribution & am finding the same old thumbnails in my image lists. I want to trace my steps & see what's gone wrong...

 

Thanks

 

Michael

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...