Images

[Learning]

Just getting to grips with Os and cannot see where I configure both the thumbnails and larger more detailed images for each product. I can only seem to be able to use the same size image for both thumbnail and larger - which results in either a distorted thumbnail and correct size larger image or a correct thumbnail and same size for detailed??

 

I know I must be missing something but spent ages looking .....

 

Can anyone help please?

 

Jeff

[paulm2003]

I know I must be missing something but spent ages looking .....

I know about that, I spend most of my osC time at looking and searching. Can be frustrating sometimes.

 

There are several contributions for your problem. I like the one below the most, after you installed it, you just upload the large picture and a nice small file sized thumbnail is created automaticly.

 

Forgot the exact url (some where at http://www.oscommerce.com/community/contributions ), but I got the total description and code here:

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

Automatic Thumbnail Creator v1.0

 

  osCommerce, Open Source E-Commerce Solutions

  http://www.oscommerce.com

 

  Copyright © 2002 osCommerce

 

  Released under the GNU General Public License

--------------------------------------------------------------------------------------------

  Automatic Thumbnail Creator v1.0

  Creates small and medium sized images from jpg and png large images on the fly.

 

-------------------------------------------------------------------------------------------

  Automatically generates thumbnail images (under new name) to the small image size defined in admin. It can be easily modified to also handle medium images in a similar way by changing this:

 

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

 

to this:

 

        if (!(($width == SMALL_IMAGE_WIDTH) && ($height == SMALL_IMAGE_HEIGHT)) && !(($width == MEDIUM_IMAGE_WIDTH) && ($height == MEDIUM_IMAGE_HEIGHT)))

       

Gifs are simply resized in browser (a limitation of the GD library), other images are resampled. Optionally this function will maintain

  the original image proportions and centre the thumbnail on a backgound colour you set to suit your site.

  Requirements GD >= 2.00, PHP >= 4.0.6  Works with osC 2.2 MS1, MS2 and Loaded5

  Check your versions by running phpinfo.php

 

------------------------------------------------------------------------------------------

How it works - (you may skip this and go straight to installation):

 

  $dst - name of resampled image (thumb)

  $src - name of original (large) image

  $srcim, $dstim, $intim - image identifiers for original, thumbnail and intermediate images 

  $width, $height - of small image (or subcategory or heading if linked to these)

  $sampledwidth, $sampledheight - the size of the scaled down image (excluding borders)

 

  The resampled image has a suffix added to the name of the original (eg. -80x100.jpg ).

  The intermediate images are created to eliminate the black borders created by copyresample by extracting

  just the resampled image part and pasting it into a white image. Unfortunately a small loss of image quality

  seems to be the cost of eliminating the black borders, so you have the options to allow some squashing

  of image proportions before resorting to this method.

 

  Parameters that you can set:

        ALLOWSQUASH        - the degree of squash allowed before resorting to creating borders - range (0.00 - 1.00)

                1 - will create a thumbnail with no attempt to maintain original proportions but will fill small image box

                0 - will always maintain original proportions

                intermediate settings will allow some degree of lattitude rather than always maintaining image proportions

        JPEGQUALITY - suggested range between 75 (low quality) and 95 (high quality)

        If the background colour of your site is not white then set that in the middle of this function and visit

    http://www.321webmaster.com/colorconverter.php to convert hex codes on your site into rgb as used here.

(uses the idea from netpbm contribution)

 

-------------------------------------------------------------------------------------------

INSTALLATION:

-------------

 

Only one file needs to be changed:  'catalog/includes/functions/html_output.php'

 

PUT THESE LINES:

 

// begin radders added

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

//end radders added

 

AFTER THE FOLLOWING LINES

 

  // The HTML image wrapper function

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

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

      return false;

    }

 

AND ADD THE FUNCTION BELOW to the bottom of the file (before the) ?>

 

 

 

// begin radders added

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

 

        define(JPEGQUALITY, 90);

        define(ALLOWSQUASH,0.10);

        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

[Learning]

Thanks for that - I am a bit rubbish at modifying lines of code - so might get friend to do it for me.

 

Is it the case that in order to get a neat, clear thumbnail and a larger sized detail image you have to use external code and that the os commerce program itself in the configuration process will not give you this?

 

I have sized my larger images to be 400 x 400 (used blank canvas) and pasted image into middle - looks great - set the thumbnail size to be 100 x 100 - but it still looks 'not good'.

 

I find it a little bit hard to understand why programs make it so fiddly to get what I consider a basic function done 'easily' - perhaps its just me.

[mpiscopo]

I took the same approach as you did. I reduced my images to 400 pixels on the largest size, then I increased the canvas size on the shorter side to 400 also (Photoshop). If you have your image large enough to fill in as much space as possible in the 400x400 area, it does turn out nicely. Having a single image works nicely because you don't have to worry about maintaining multiple images for the same product. I just don't know if it is slow on a dial-up.