Jump to content



Photo
* * * * * 1 votes

KissIT Image Thumnailer


  • Please log in to reply
310 replies to this topic

#301   Roaddoctor

Roaddoctor
  • Members
  • 1,192 posts
  • Real Name:David Jennings
  • Gender:Not Telling
  • Location:Texas

Posted 23 August 2015 - 17:05

@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

#302 ONLINE   marcello

marcello

    Crazy_C

  • Members
  • 57 posts
  • Real Name:Marcello
  • Gender:Male
  • Location:Earth

Posted 23 August 2015 - 19:05

@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:



#303   Dan Cole

Dan Cole
  • Community Sponsor
  • 798 posts
  • Real Name:Dan Cole
  • Gender:Male
  • Location:Ontario, Canada

Posted 24 August 2015 - 17:12

@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



#304   Dan Cole

Dan Cole
  • Community Sponsor
  • 798 posts
  • Real Name:Dan Cole
  • Gender:Male
  • Location:Ontario, Canada

Posted 24 August 2015 - 18:13

@raiwa

 

Rainer...never mind.  I had another coffee and the instructions make sense to me now!

 

Dan



#305 ONLINE   marcello

marcello

    Crazy_C

  • Members
  • 57 posts
  • Real Name:Marcello
  • Gender:Male
  • Location:Earth

Posted 25 August 2015 - 19:02

@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, 25 August 2015 - 19:04.


#306 ONLINE   raiwa

raiwa
  • Community Sponsor
  • 924 posts
  • Real Name:Rainer Schmied
  • Gender:Male
  • Location:Sant Iscle de Vallalta, Barcelona, Spain

Posted 27 August 2015 - 07:39

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



#307   Moxamint

Moxamint
  • Members
  • 46 posts
  • Real Name:Ai-Teh Eddy Lin
  • Gender:Male
  • Location:Taiwan

Posted 29 August 2015 - 15:31

@raiwa,

 

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

 

Before KissIT: Attached File  snap_1.JPG   14.91KB   1 downloads
After KissIT: Attached File  snap_2.JPG   16.93KB   1 downloads

 

Did I do something wrong?

 

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



#308 ONLINE   raiwa

raiwa
  • Community Sponsor
  • 924 posts
  • Real Name:Rainer Schmied
  • Gender:Male
  • Location:Sant Iscle de Vallalta, Barcelona, Spain

Posted 29 August 2015 - 16:45

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



#309   Moxamint

Moxamint
  • Members
  • 46 posts
  • Real Name:Ai-Teh Eddy Lin
  • Gender:Male
  • Location:Taiwan

Posted 30 August 2015 - 06:17

Hi @raiwa,

 

It's working correctly now.

 

Thanks again, Eddy



#310 ONLINE   raiwa

raiwa
  • Community Sponsor
  • 924 posts
  • Real Name:Rainer Schmied
  • Gender:Male
  • Location:Sant Iscle de Vallalta, Barcelona, Spain

Posted 31 August 2015 - 12:14

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



#311   Moxamint

Moxamint
  • Members
  • 46 posts
  • Real Name:Ai-Teh Eddy Lin
  • Gender:Male
  • Location:Taiwan

Posted 31 August 2015 - 12:31

@raiwa

 

Hi Rainer,

 

This is to confirm that the new fix works.  Thanks so much!

 

Cheers, Eddy