Jump to content
FWR Media

KissIT Image Thumnailer

Recommended Posts

Hopefully this can get fixed for the next version but I was having an issue with upscaling images (outputting with a black background and the image came out far too large).

 

Modified the Image.php file on line 270 to 

 imagecopyresampled ( $new_image, $this->_image, ($max_width-$this->_width)/3, ($max_height-$this->_height)/3, 0, 0, $max_width, $max_height, $this->_width, $this->_height);

Originally it was $this->_width*2 and the same for height. I'm guessing this was some left over testing code  :)

Thank you @@kenners, I'll check it and include it in the next update.

Share this post


Link to post
Share on other sites

Hello Kenneth @@kenners,

 

Image upsize works for me in bootstrap version.

 

Could you please tell me which exact version you are referring to and which is the original code you replaced.

I have in BS version:

      if (  KISS_DISABLE_UPSIZE == 'true' && ($this->_width < $max_width || $this->_height < $max_height) ) {
        imagecopyresampled ( $new_image, $this->_image, ($max_width-$this->_width)/3, ($max_height-$this->_height)/3, 0, 0, $this->_width*2, $this->_height*2, $this->_width, $this->_height);
      } else {
        imagecopyresampled ( $new_image, $this->_image, 0, 0, 0, 0, $max_width, $max_height, $this->_width, $this->_height );
      }

line 270 is there:

} else {

regards

Rainer

Share this post


Link to post
Share on other sites

Hello @@kenners,

 

I checked again and , yes there is an error.

I got it to work correct with this modification:

      if (  KISS_DISABLE_UPSIZE == 'true' && ($this->_width < $max_width || $this->_height < $max_height) ) {
        imagecopyresampled ( $new_image, $this->_image, (($max_width-$this->_width)/2), (($max_height-$this->_height)/2), 0, 0, $this->_width, $this->_height, $this->_width, $this->_height);
      } else {
        imagecopyresampled ( $new_image, $this->_image, 0, 0, 0, 0, $max_width, $max_height, $this->_width, $this->_height );
      }

If you get a black background, check the color you have defined in the tep_image function:

                                      'thumb_background_rgb' => array( 'red'   => 255,
                                                                       'green' => 255,
                                                                       'blue'  => 255 ) ) );

Please confirm and I'll upload the fix.

 

regards

Rainer

Share this post


Link to post
Share on other sites

This is what comes up on a "Inspect Element" in chrome.

 

<img src="images/2014062219105.jpg" border="0" alt="blah" title="blah " width="162" height="250" hspace="5" vspace="5">

 

 

The "162" is dynamic (I have a 0 in the code) and the "250" is the number I set it to be. 

 

The original size of the image is: width="229" height="353"

Share this post


Link to post
Share on other sites

@,

 

Please, I referred to the html source code of the page (image) not "Inspect Element".

 

However, the problem is as assumed: you pass only one size (height), you need to define both, height AND width as a fix numeric value to get kissit to work.

 

 

If you can't get it, please post you entire product_info.php and I'll try.

Share this post


Link to post
Share on other sites

Kenneth @@kenners,

 

If you still get black background, it may be that you are using transparent images:

 

There is no support for transparencies as most usage is for non transparent.

Edited by raiwa

Share this post


Link to post
Share on other sites

Hi - this may be a bug for running under BS.  I upgraded from r11 to r12.  It first error out under the new line code for html_output.php.  So I restored the one from the backup and thought all was fine.  Nope .... The main page looked different, Best Sellers from the right was missing.  Checked admin/modules/boxes and all was okay there.  So I deleted the kiss image thumbnailer folder and restored the old one.  All came back.

 

Not sure what happened.  Not able to run r12.

 

Dean

Share this post


Link to post
Share on other sites

Hello Dean @@dculley,

 

It would be very helpful if you could explain what you mean with:

It first error out under the new line code for html_output.php.

and in which way your main page looked different??

If the best seller box didn't show, could this be due to a php error (message) that prevent the box code to be rendered??

Could you please post the error message(s).

If you have error reporting disabled, could you check the server error log.

 

Did you follow all update instructions, specifically did you move the thumb folder from kissit folder to the image folder??

 

Thank you and kind regards

Rainer

Share this post


Link to post
Share on other sites

@@raiwa

 

Rainer

 

I will later on today try and reinstall the update.  Will copy down any errors and let you know how it is working.

 

Thanks for getting back to me.

Dean

Share this post


Link to post
Share on other sites

@@raiwa

Rainer

 

My bad.  I went by "Version 12 BS update for OsC 2.3.1 Bootstrap+"  Thanking that because I was using BS and it said "update".  The other part that confused me was that I saw "upgrade", but no reference to BS. 

 

This time I went and took a chance on the "upgrade" installed it.  No errors.  Seems to be working. 

 

1 Question,  do I need to install standard thumbnailing  product page images?  If so what does it bring to the table?  I did not install it on the first go around. 

 

Thanks for your help, 

Dean

Share this post


Link to post
Share on other sites

Hello Dean @@dculley,

 

the colorbox/photogrid support in product_info.php will produce correct sized thumbs for the small images, regardless the amount of images, and will still pop up the full image size. So I would recommend to add it.

 

regards

Rainer

Share this post


Link to post
Share on other sites

First I wanted to say thinks for the great contrib!

 

I just noticed the images on the products page do not have "alt" definitions.  Is it possible I did something wrong?  I'd like to make sure all my images have alt tags for SEO purposes.  Thanks!

Share this post


Link to post
Share on other sites

Hello Bill @@phi148,

 

Nothing to do with KissIt Thumbnailer.

If the main product image is used (no big product image added) there is the alt text.  If big images are added, there is no alt text for them.

See on the BS Gold demo:

http://www.template.me.uk/234bs3/product_info.php?products_id=28

 

regards

Rainer

Share this post


Link to post
Share on other sites

@@phi148, you'll have always the main product image tagged with itemprop="image":

<img src="images/thumbs/my_product_image.jpg" alt="" class="img-responsive" itemprop="image" style="display:none;" />

Share this post


Link to post
Share on other sites

i installed the lastest version on a BS gold site.i  am getting black border around  thumbnales.There are Jpg images not png.

 

i have folowed what has been mentioned earlier  and check to make sure right edit has been added.

 

I have setup the images to be 450x 450 in admin.

 

Some images are small so a black border appears.if i cut down  the size of the thunbnails then    it doesn't .

 

But i need the images to be atleast 450.I didn't had this issue when i was using  the non BS  version of oscommerce.

Share this post


Link to post
Share on other sites

Hello @@nafri,

 

Did you change the background color in the tep_image function?? it should be like this for white background:

                                      'thumb_background_rgb' => array( 'red'   => 255,
                                                                       'green' => 255,
                                                                       'blue'  => 255 ) ) );

If this is correct, could you please pm your store URL to have a look.

 

regards

Rainer

Share this post


Link to post
Share on other sites

Hello @@nafri,

 

Did you change the background color in the tep_image function?? it should be like this for white background:

                                      'thumb_background_rgb' => array( 'red'   => 255,
                                                                       'green' => 255,
                                                                       'blue'  => 255 ) ) );

If this is correct, could you please pm your store URL to have a look.

 

regards

Rainer

 

 

i did check this as mentioned   in one of your previous post..

 

i will pm you the store url  now..

Share this post


Link to post
Share on other sites

Hello @@nafri,

 

Oh yes, there is a bug for jpg images when smaller than the required thumb size.

 

Please apply this update to includes/modules/kiss_image_thumbnailer/classes/Image.php:

 

Find:

      if (  KISS_DISABLE_UPSIZE == 'true' && ($this->_width < $max_width || $this->_height < $max_height) ) {
        imagecopyresampled ( $new_image, $this->_image, (($max_width-$this->_width)/2), (($max_height-$this->_height)/2), 0, 0, $this->_width, $this->_height, $this->_width, $this->_height);
      } else {
        imagecopyresampled ( $new_image, $this->_image, 0, 0, 0, 0, $max_width, $max_height, $this->_width, $this->_height );
      }
      $this->_image = $new_image;
      if ( $this->_take_resize_dimensions_as_absolute ) {
        // the image has scaled badly we need to add a background
        $info = pathinfo($this->_filename);
        $image_name = $info['basename'];
        if ( ($max_width < $this->_requested_thumbnail_width || $max_height < $this->_requested_thumbnail_height) ) {
          $thumb_background = imagecreatetruecolor ( $this->_requested_thumbnail_width, $this->_requested_thumbnail_height );
          $background_color = imagecolorallocate ( $thumb_background, $this->_thumb_background_rgb['red'], $this->_thumb_background_rgb['green'], $this->_thumb_background_rgb['blue'] );
          imagefill ( $thumb_background, 0, 0, $background_color );
          $dst_x = 0;
          $dst_y = 0;
          $new_image_width = imagesx ( $new_image );
          $new_image_height = imagesy ( $new_image );
          if ( $this->_requested_thumbnail_width > $new_image_width ) {
            $dst_x = floor( ( $this->_requested_thumbnail_width - $new_image_width ) /2 );
          } elseif( $this->_requested_thumbnail_height > $new_image_height ) {
            $dst_y = floor( ( $this->_requested_thumbnail_height - $new_image_height ) /2 );
          }
          imagecopyresampled ( $thumb_background, $new_image, $dst_x, $dst_y, 0, 0, $new_image_width, $new_image_height, $new_image_width, $new_image_height );
          $this->_image = $thumb_background;
        }
      } // end need a background

Replace with:

      if (  KISS_DISABLE_UPSIZE == 'true' && ($this->_width < $max_width || $this->_height < $max_height) ) {
        $new_image = $this->_image;
      } else {
        imagecopyresampled ( $new_image, $this->_image, 0, 0, 0, 0, $max_width, $max_height, $this->_width, $this->_height );
      }
      $this->_image = $new_image;
      if ( $this->_take_resize_dimensions_as_absolute ) {
        // the image has scaled badly we need to add a background
        $info = pathinfo($this->_filename);
        $image_name = $info['basename'];
        if ( ($max_width < $this->_requested_thumbnail_width || $max_height < $this->_requested_thumbnail_height) ) {
          $thumb_background = imagecreatetruecolor ( $this->_requested_thumbnail_width, $this->_requested_thumbnail_height );
          $background_color = imagecolorallocate ( $thumb_background, $this->_thumb_background_rgb['red'], $this->_thumb_background_rgb['green'], $this->_thumb_background_rgb['blue'] );
          imagefill ( $thumb_background, 0, 0, $background_color );
          $dst_x = 0;
          $dst_y = 0;
          $new_image_width = imagesx ( $new_image );
          $new_image_height = imagesy ( $new_image );
          $dst_x = floor( ( $this->_requested_thumbnail_width - $new_image_width ) /2 );
          $dst_y = floor( ( $this->_requested_thumbnail_height - $new_image_height ) /2 );
          imagecopyresampled ( $thumb_background, $new_image, $dst_x, $dst_y, 0, 0, $new_image_width, $new_image_height, $new_image_width, $new_image_height );
          $this->_image = $thumb_background;
        }
      } // end need a background

Please confirm and I'll upload the update.

 

Thank you and kind regards

Rainer

Share this post


Link to post
Share on other sites

@@Rainer

 

thanks for the fix ..  black border is  now gone.

 

 what i notice now is that if a image is 150x150 in width and the backend is set to 318x318 .It leaves the  image untouched. No white border is added to make the image size go up to 318x318.

 

Before i added your  above fix it was adding black background and increasing the size to 318x318.This also centered the image

 

is this normal behaviour.

 

Thanks for the contrib

 

regards

 

naf

Edited by nafri

Share this post


Link to post
Share on other sites

Hello @@nafri,

 

OK, still an error for square images.

 

Please change this line within the changed snippet:

        if ( ($max_width < $this->_requested_thumbnail_width || $max_height < $this->_requested_thumbnail_height) ) {

To:

        if ( ($max_width < $this->_requested_thumbnail_width || $max_height < $this->_requested_thumbnail_height) || (KISS_DISABLE_UPSIZE == 'true' && ($this->_width < $max_width || $this->_height < $max_height)) ) {

Share this post


Link to post
Share on other sites

 

Hello @@nafri,

 

OK, still an error for square images.

 

Please change this line within the changed snippet:

        if ( ($max_width < $this->_requested_thumbnail_width || $max_height < $this->_requested_thumbnail_height) ) {

To:

        if ( ($max_width < $this->_requested_thumbnail_width || $max_height < $this->_requested_thumbnail_height) || (KISS_DISABLE_UPSIZE == 'true' && ($this->_width < $max_width || $this->_height < $max_height)) ) {

 

Hi Rainer

 

Its perfect now.

 

Many thanks for the contrib and your help.

 

regards

 

naf

Share this post


Link to post
Share on other sites

@@raiwa I'm not sure if you can help with this... And I'm not sure if this is a bug.

 

I've noticed the title="" and alt="" is not being populated.

 

The output is (example from my BS site);

<img width="600" height="600" src="includes/modules/kiss_image_thumbnailer/thumbs/600x600_MYIMAGE.jpg" title="" alt="" class="img-responsive" id="piGalImg_1" /><img width="600" height="600" src="includes/modules/kiss_image_thumbnailer/thumbs/600x600_MYIMAGE 2.png" title="" alt="" class="img-responsive" id="piGalImg_2" />

Looking at my 2.3.4 live store it would seem to have the same issue.... However Gary's store it outputs fine; http://www.template.me.uk/234bs3/product_info.php?cPath=1_4&products_id=1. Thinking it comes from product info ; addslashes($product_info['products_name'])?????

      <img src="images/matrox/mg200mms.gif" alt="Matrox G200 MMS" title="Matrox G200 MMS" width="100" height="80" class="img-responsive" />

It would seem to be these lines in html_output.php

// 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) . '" alt="' . tep_output_string($alt) . '"';

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

Specifically $alt is not being returned from tep_image_legacy?????

 

This all started with my trying to add a title to the ht_product_colorbox.php script (but can't seem to figure out how to add..... :( :( :( :( :( )

title: '<?php echo $product_info['products_name']; ?>',

Share this post


Link to post
Share on other sites

Hello Scott @@greasemonkey,

 

The alt and title tag is shown in product_info.php the same with and without kissit image thumbnailer.

Fact is that it shows if only one image (product image) is used.

It doesn't show if additional big images are used.

See in Gary's BS demo:

http://www.template.me.uk/234bs3/product_info.php?products_id=28

 

regards

Rainer

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×