Jump to content
FWR Media

KissIT Image Thumnailer

Recommended Posts

@@raiwa

Rainer- first thank you for your continuing improvements - great work!

 

I have one little optional tweak that others may or may not wish to use. This adds a nice title at the bottom of the colorbox popup

 

I added

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

into this, like

<script type="text/javascript">
$(function() {
  $('#piGal').css({
    'visibility': 'hidden'
  });

  $('#piGal').photosetGrid({
    layout: '<?php echo $photoset_layout; ?>',
    width: '250px',
    highresLinks: true,
    rel: 'pigallery',
    onComplete: function() {
      $('#piGal').css({ 'visibility': 'visible'});

      $('#piGal a').colorbox({
        maxHeight: '90%',
        maxWidth: '90%',

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

        rel: 'pigallery'
      });

      $('#piGal img').each(function() {
        var imgid = $(this).attr('id').substring(9);

        if ( $('#piGalDiv_' + imgid).length ) {
          $(this).parent().colorbox({ inline: true, href: "#piGalDiv_" + imgid });
        }
      });
    }
  });
});
</script>

thx again!


-Dave

Share this post


Link to post
Share on other sites

@@raiwa

 

Not sure if you agree; however, I would prefer to leave the original image without any number appended to the title.

 

echo tep_image(DIR_WS_IMAGES . $pi['image'], addslashes($product_info['products_name']) . ($pi_counter > 1 ?  ' - ' . $pi_counter : ''), (($pi_counter > 1 )? round(KISSIT_MAIN_PRODUCT_IMAGE_WIDTH/(($pi_total <= 5)? $pi_total-1 : 5)) : KISSIT_MAIN_PRODUCT_IMAGE_WIDTH), (($pi_counter > 1 )? round(KISSIT_MAIN_PRODUCT_IMAGE_HEIGHT/(($pi_total <= 5)? $pi_total-1 : 5)) : KISSIT_MAIN_PRODUCT_IMAGE_HEIGHT), 'id="piGalImg_' . $pi_counter . '" '. preg_replace('%<img width="[0-9 ]+" height="[0-9 ]+" src="(.*)title=.+%', 'data-highres="$1', tep_image(DIR_WS_IMAGES . $pi['image'], null, $width, $height)));

 

I tested and all works great.  Nicely done.  :thumbsup:

Share this post


Link to post
Share on other sites

@raiwa

 

Rainer the image wrapper seems to be quite a bit different now in the 2.3.4BS version than what is shown in the instructions...the image wrapper code seems to have been altered to "prevent browsers from outputting the image filename as default".  Just wondering what is the best way to change this so I can add the KISS thumbnailer?  I presume that the instructions will need updating as well.

////
// The HTML image wrapper function
  function tep_image($src, $alt = '', $width = '', $height = '', $parameters = '', $responsive = true, $bootstrap_css = '') {
    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) . '" 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 = (int)($image_size[0] * $ratio);
        } elseif (tep_not_null($width) && empty($height)) {
          $ratio = $width / $image_size[0];
          $height = (int)($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) . '"';
    }
    $image .= ' class="';
    if (tep_not_null($responsive) && ($responsive === true)) {
      $image .= 'img-responsive';
    }
    if (tep_not_null($bootstrap_css)) $image .= ' ' . $bootstrap_css;
    $image .= '"';
    if (tep_not_null($parameters)) $image .= ' ' . $parameters;
    $image .= ' />';
    return $image;
  }

Dan

Share this post


Link to post
Share on other sites

@@raiwa

 

I just was testing on my dev site and noticed that when the watermark is enabled and you pull up product Microsoft IntelliMouse Pro, the watermark is the only thing visible.  I have .05 set for watermark. 

 

If I set it for .25, an image appears; however, the watermark is not transparent.  It may be due to the size of the original image.

 

I haven't backtracked your recent change to see if this was due to this or was it an issue that existed prior.

 

I'll have some time later this week to look into it more; however, if you want me to test a solution.  Let me know.

 

Thanks, M.

Edited by marcello

Share this post


Link to post
Share on other sites

@@marcello,

 

Instruction doc:

NOTE: The watermark support included in Version 14 will only work correct on jpg, indexed png and indexed gif images.
          It will not work correct (white instead transparent background) for RGB png images.

 

In any case I would recommend to do testing with jpg images in a reasonable size. The small demo images are not the size which would be used in a live store I guess.

Share this post


Link to post
Share on other sites

@@raiwa,

 

This add-on works great on my BS [edge] site except it makes my languages and card acceptance boxes act weird.

 

Before KissIT: post-186600-0-54468800-1440861903_thumb.jpg
After KissIT: post-186600-0-26328700-1440861961_thumb.jpg

 

Did I do something wrong?

 

My KissIT version is r19.  Thanks in advance for your time and help.

Share this post


Link to post
Share on other sites

Hello @@Moxamint,

 

Yes, there is an issue in the tep image legacy function which doesn't pass correct the responsive parameter.

For now you could use this fast fix:

in: includes/html_output.php find:

  function tep_image_legacy($src, $alt = '', $width = '', $height = '', $parameters = '', $responsive = true, $bootstrap_css = '') {

and change to:

  function tep_image_legacy($src, $alt = '', $width = '', $height = '', $parameters = '', $responsive = 'true', $bootstrap_css = '') {

This is not definitive, I'll have a deeper look when I'll have a time.

 

Thanks for the report and kindest regards

Rainer

Share this post


Link to post
Share on other sites

Hello Eddy @@Moxamint,

 

Please undo the before fix.

The correct fix is:

in: includes/html_output.php find:

    if ( !is_numeric ( $width ) || !is_numeric ( $height ) ) return tep_image_legacy( $src, $alt, $width, $height, $parameters );

and change to:

    if ( !is_numeric ( $width ) || !is_numeric ( $height ) ) return tep_image_legacy( $src, $alt, $width, $height, $parameters, $responsive, $bootstrap_css );

Please confirm, I'll upload then the update.

 

Thanks again and kind regards

Rainer

Share this post


Link to post
Share on other sites

Help.  I deleted everything in my thumb directory to clean up old pictures not needed.  Now I'm getting;

Warning: getimagesize(images/no_image_available_150_150.gif): failed to open stream: No such file or directory in /home/ladyxxxxxxxxx/public_html/includes/modules/kiss_image_thumbnailer/classes/Image_Helper.php on line 79

 

What do I need to do?

Share this post


Link to post
Share on other sites

I see Gergely code for reset button is in the installation of R20, but I don't see where I missed the SQL script to run. Is that supposed to be apart of the db_install.php

INSERT INTO `configuration` (`configuration_title`, `configuration_key`, `configuration_value`, `configuration_description`, `configuration_group_id`, `sort_order`, `last_modified`, `date_added`, `use_function`, `set_function`) VALUES
('Reset thumbs', 'RESET_IMAGE_THUMBS', 'false', 'Reset thumbs cache', 4, 9, '2013-02-20 19:36:26', '2013-01-29 17:11:10', 'tep_cfg_reset_thumbs_cache', 'tep_cfg_select_option(array(''reset'', ''false''),');

Share this post


Link to post
Share on other sites

@@newburns,

 

It is included in includes/modules/kiss_image_thumbnailer/db_install.php

Lines 61-66

Share this post


Link to post
Share on other sites

@@raiwa

 

I just got a custom coded module similar to Also Purchased. I have Kissit for 2.3.4 BS installed. How do I resize the images to KISSit with watermark? 

 

Now I have SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT to make the images thumbnails.

 

Thanks

Edited by discxpress

Share this post


Link to post
Share on other sites

@@discxpress,

 

There are 2 requirements to generate thumbs (with or without watermark):

1. tep_image function must be used

2. width and height values must be included in the function

 

regards

Rainer

Share this post


Link to post
Share on other sites

Thanks, @@raiwa

 

I used KISSIT_MAIN_PRODUCT_WATERMARK_MIN_IMAGE_WIDTH, KISSIT_MAIN_PRODUCT_WATERMARK_MIN_IMAGE_HEIGHT. It appears to work but the watermark doesn't appear.

 

What should I put at the end of the tep_image line?

Share this post


Link to post
Share on other sites

@@discxpress,

 

KISSIT_MAIN_PRODUCT_WATERMARK_MIN_IMAGE_WIDTH and HEIGHT are the configuration values for the minimum image size from which on the watermark should be applied. So it shouldn't be used to define any image size.

You should use SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT like it was.

Now in admin configuration images, Small Image Width and Height must be bigger than KissIT min image width to apply Watermark.

 

The easiest way is to have a look on a standard module and use the same settings for the tep_image function (except the image name and path of course).

 

If you still have troubles, please post your tep_image function.

 

regards

Rainer

Share this post


Link to post
Share on other sites

Any possibility to get this working in the admin side?

Using the same catalog thumbs folder if possible? So all thumbs are kind of shared...

Share this post


Link to post
Share on other sites

@@newburns,

 

apply the modification of the tep_image function in admin/includes/functions/html_output.php

that's the first step, then there maybe some mods needed for the paths to the kissit files.

Share this post


Link to post
Share on other sites

@@Moxamint,
 
In a user addressable configuration setting, no.
It should be possible in the watermark function. Try in: includes/modules/kiss_image_thumbnailer/classes/image.php
within the watermark function:

		$transparent = imagecolorallocatealpha($new_image, 255, 255, 255, 127);
		imagefilledrectangle($new_stamp, 0, 0, $new_sx, $new_sy, $transparent);	
		imagecopyresampled ( $new_stamp, $stamp, 0,0,0,0, $new_sx, $new_sy, $sx, $sy);

Try to modify the value "127" in the first line. Values can be 0-127, where "0" is 100% opaque and "127" is 100% transparent.

Edited by raiwa

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

×