Product listing

[♥raiwa]

@@vampirehunter,

 

Last uploaded r24 here:

http://addons.oscommerce.com/info/9206

 

Next version is still in develop and test phase. Coming soon, but update will be very easy if you install now the actual version r24.

[♥raiwa]

Hello @@marcello,

 

 

I did notice that in the code PNG compression could be tweaked if you agree. This allows the default compression of 75 for jpg to equate to a 9 for png.  Considering 9 provides the best compression (smallest files) but takes a longer time to compress (quality doesn't change).  For the record, I think we should set PNG compression to 9 by default as the 0-99 quality range of jpg into the 0-9 range of png have opposite relevance.  Note that for jpg 99 is minimum compression (maximum quality) while for png 9 is maximum compression.

         case self::IMAGETYPE_PNG :
           $quality = is_null ( $quality ) ? 1 : $quality;
           $quality = ($quality > 9) ? $quality=floor($quality / 10) : $quality;

to

        case self::IMAGETYPE_PNG :
          $quality = is_null ( $quality ) ? 1 : ceil($quality * 1.1);
          $quality = ($quality > 9) ? 9 : $quality;

or

        case self::IMAGETYPE_PNG :
          $quality = 9;

 

 

I do not know too much about png compression, but I just compared this with 2 sample images.

 

Image 1         
Size:  250px × 250px
Original code:  99,14 KB (101.521 bytes)

Your second example code:
Quality 9  98,86 KB (101.231 bytes)
Quality 1  102,01 KB (104.463 bytes)


Image 2
Size:  250px × 250px
Original code: 110,76 KB (113.415 bytes)

Your second example code:
Quality 9  110,53 KB (113.183 bytes)
Quality 1 116,17 KB (118.957 bytes)

 

There are no noticeable visual differences comparing thumbs in Photoshop.

 

I wouold say it's not worth to change anything there with such a small differences.

Or do I miss something?
 

 

rgds

Rainer

[Guest]

@raiwa

 

It may seem insignificant; however, in my testing, I have not visually noticed any loss of quality and file sizes are smaller.  Also, considering we are using the quality setting for JPEG to set the compression for PNG, I would either separate (not worth the effort) or hard code it to 9.   So in my book, it's easiest to configure for max compression.  

 

But I do understand what you are getting at regarding the differences being very insignificant.  So leaving it as it is fine as well.

Edited March 23, 2016 by marcello

[♥raiwa]

Hello @@marcello @@vampirehunter,

 

Just uploaded the new r25.

 

Marcello, I included your png compression. :)

 

rgds

Rainer

[Guest]

@raiwa

 

Always happy to help.  Thank you for doing all that you do to support this addon. 

 

An update to the compression testing.  I was able to reduce thumbnails further using an external tool in a Linux environment.  I feel a bit dirty as I wasn't able to find a solution with GD.  This solution would output png file for a gif source file.  None of this is production or one I am recommending.  Just trying to find a way that we can eliminate complaints regarding lossless compression and to overall reduce the page size without compromising on quality.

 

Original image size: 55937

Original image format: gif

Thumbnail size: 300x200

Result: 35% reduction from original gif thumbnail with no lossless compression complaint

 

imagecreate

24204 test.gif
23788 test.png (converted to png without external compression)
14766 test.png (converted to png with external compression)

 

imagecreatetruecolor (original thumb method)

22863 test.gif

67170 test.png (converted to png without external compression)

18748 test.png (converted to png with external compression)

 

Original image size: 55937

Original image format: gif

Thumbnail size: 100x80

Result: 37% reduction from original gif thumbnail with no lossless compression complaint

 

imagecreatetruecolor (original thumb method)

5589 test.gif

 

imagecreate
5510 test.png (converted to png without external compression)
3516 test.png (converted to png with external compression)

[Guest]

Unable to edit above message.  Just wanted to state that a category page with 13 products listed was reduced overall by 22kb (not all images were gifs, a few jpg in there as well) with the external compression.  That was a reduction of approximately 10% from the original page size.  Again, this is just testing and I'm still scratching my head as how to do this within GD; however, it appears your code already does all that GD has to offer.

[SpicyGirl]

Hola Rainer,

 

how to disable watermark on the categorie images?

 

 

gracias

[♥raiwa]

@@SpicyGirl,

 

can't be disabled separate, only for all images below certain size, see instructions.

[SpicyGirl]

my category images are bigger than 50.

 

Its alright Rainer. Got fixed

 

gracias

Edited April 1, 2016 by SpicyGirl

[dculley]

@@raiwa

 

I had some time today, and wanted to update my package,  My last update was r22.  I have worked all my way up to r25r1.  You mentioned a change for the html_output.php.  But you do not give what it is.  The update doc is the same as the r25.  

 

What is it that I need to change?

 

I'm going to upload all the changes at one time.

 

On more question, can I delete all the thumb images and will the package recreate them still?  I need to clean up my pic's.

 

Thanks

Dean

[♥raiwa]

Hello Dean @@dculley,

 

There was an error in the tep image function of r25 for BS.

It was wrong in the installation instructions. I do not remember the detail, is this important?

Just follow the update instructions. If you jump from older versions the error is not present in yours.

 

Otherwise if you wish to ensure you have all the right one, just copy the whole function again from the latest installation instructions.

 

There is a thumbnail reset option in Admin => Configuration => Images which will clear all thumbs.

 

Please check the instructions. Yes, I spent time to write instructions which should be read :)

 

rgds

Rainer

Edited April 11, 2016 by raiwa

[♥raiwa]

@@dculley,
 
Just had a look,  'thumb_background_rgb' was wrong hardcoded in r25 like in older versions.
Now there is support for the background configuration entry included.

Edited April 11, 2016 by raiwa

[dculley]

@@raiwa

 

I'm going to use the r25r1 2.3.4 BS installation, step 2 cat/includes/functions/html_output.php and replace my data with that one.  There where a few differences.  I hope that is correct thing to do.

 

You mentioned " There is a thumbnail reset option in Admin => Configuration => Images which will clear all thumbs."  I haven't used it before, is all I need to do is click on "edit" then "reset"?  And that will delete all the current thumb pic's and create new ones?

[♥raiwa]

Hello Dean @@dculley,

 

I'm going to use the r25r1 2.3.4 BS installation, step 2 cat/includes/functions/html_output.php and replace my data with that one.  There where a few differences.  I hope that is correct thing to do.

 

Yes, just do it. :)

 

 

You mentioned " There is a thumbnail reset option in Admin => Configuration => Images which will clear all thumbs."  I haven't used it before, is all I need to do is click on "edit" then "reset"?  And that will delete all the current thumb pic's and create new ones?

 

It will delete all thumbs and thumb directories. New thumbs and directories will be created on demand. This is when a store page is loaded where images thumbs are required.

Meanwhile you can also delete thumbs and directories by hand, no problem. If a thumb is not found it will always be created new. Don't worry.

 

rgds

Rainer

[vampirehunter]

nevermind, i found the settings!

Edited April 14, 2016 by vampirehunter

[vampirehunter]

Wanted to ask.

 

The kissit thumbnailer is also thumbnailing the carousel images.

How would be the best way to disable it on the carousel images which are being loaded from the banner manager?

 

thanks

[vampirehunter]

Hello Dean @@dculley,

 

 

Yes, just do it. :)

 

 

 

It will delete all thumbs and thumb directories. New thumbs and directories will be created on demand. This is when a store page is loaded where images thumbs are required.

Meanwhile you can also delete thumbs and directories by hand, no problem. If a thumb is not found it will always be created new. Don't worry.

 

rgds

Rainer

 

hi

ive noticed that my bootstrap carousel module images are also being thumbnailed which i don't want to, as the thumbnailed images are cutting off the sides of the large carousel images and look lower quality.

is there a way to disable it for the carousel which is using the banner manager images?

 

here is the carousel module code:

<?php
/*
  $Id: banner_rotator.php v1.1.2 20110108 Kymation $

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2010 osCommerce

  Released under the GNU General Public License
*/

class cm_carousel {

    var $code;
    var $group;
    var $title;
    var $description;
    var $sort_order;
    var $enabled = false;

    function cm_carousel() {
      $this->code = get_class($this);
      $this->group = basename(dirname(__FILE__));
      
      $this->title = MODULE_FRONT_PAGE_BANNER_ROTATOR_TITLE;
      $this->description = MODULE_FRONT_PAGE_BANNER_ROTATOR_DESCRIPTION;

      if (defined('MODULE_FRONT_PAGE_BANNER_ROTATOR_STATUS')) {
        $this->sort_order = MODULE_FRONT_PAGE_BANNER_ROTATOR_SORT_ORDER;
        $this->enabled = (MODULE_FRONT_PAGE_BANNER_ROTATOR_STATUS == 'True');
      }
    }



    function execute() {
    
     global $PHP_SELF, $oscTemplate, $cPath;
      
      $content_width = (int)MODULE_FRONT_PAGE_BANNER_ROTATOR_CONTENT_WIDTH;
      

      if ($PHP_SELF == 'index.php' && $cPath == '') {
        // Set the Javascript to go in the header
        $footer_scripts = '<script>' . '$(\'#carousel-example-generic.carousel\').carousel({ interval: ' . ( int ) MODULE_FRONT_PAGE_BANNER_ROTATOR_HOLD_TIME . '})' . "\n" .'</script>';
 
        $oscTemplate->addBlock($footer_scripts, 'footer_scripts');


// Set the banner rotator code to display on the front page
        $banner_query_raw = "
                  select
                    banners_id,
                    banners_url,
                    banners_image,
                    banners_html_text
                  from
                    " . TABLE_BANNERS . "
                  where
                    banners_group = '" . MODULE_FRONT_PAGE_BANNER_ROTATOR_GROUP . "'
                    and status
                  order by banners_id " . MODULE_FRONT_PAGE_BANNER_ROTATOR_BANNER_ORDER . "
                  limit
                    " . MODULE_FRONT_PAGE_BANNER_ROTATOR_MAX_DISPLAY;


        $banner_query = tep_db_query($banner_query_raw);
        
        if (tep_db_num_rows($banner_query) > 0) {
          $body_text = '<!-- Banner Rotator BOF -->' . "\n";
          $body_text .= '  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">' . "\n";

          $indicators = '<!-- Indicators -->
          <ol class="carousel-indicators">';
          $wrapper_slides = '<!-- Wrapper for slides -->' . "\n" .
          '<div class="carousel-inner">';

          $background = $this->createImage(1140, 342, 118, 115, 115);

          $counter = 0;
          while ($banner = tep_db_fetch_array($banner_query)) {
            $indicators .= '  <li data-target="#carousel-example-generic" data-slide-to="' . $counter . '"' . ($counter == 0 ? 'class="active"' : '') . '></li>';

            $wrapper_slides .= '      <div class="item' . ($counter == 0 ? ' active' : '') . '">';
            if ($banner['banners_url'] != '') {
              $wrapper_slides .= '<a href="' . tep_href_link('redirect.php', 'action=banner&goto=' . $banner['banners_id']) . '">';
            }

              //$wrapper_slides .= tep_image(DIR_WS_IMAGES . $banner['banners_image'], $banner['banners_html_text']);


            if ($banner['banners_image'] !== '') {
              //$wrapper_slides .= tep_image(DIR_WS_IMAGES . $banner['banners_image'], $banner['banners_html_text']);
              $wrapper_slides .= tep_image(DIR_WS_IMAGES . $banner['banners_image'], 'alt text', 1140, 342);
              $wrapper_slides .= '<div class="carousel-caption"> </div>';
            } else {
              //$wrapper_slides .= tep_image(DIR_WS_IMAGES . 'pixel_silver.gif', 'alt', 544, 172 );
              $wrapper_slides .= '<img class="img-responsive" alt="544x172" src="' . $background . '" />';
              $wrapper_slides .= '<div class="carousel-caption">' . $banner['banners_html_text'] . '</div>';
            }

            if ($banner['banners_url'] != '') {
              $wrapper_slides .= '</a>';
            }

            $wrapper_slides .= ' </div>' . "\n";
            $counter++;
          }

          $indicators .= '</ol>';  // close indicator

          $wrapper_slides .= '</div>';  // wrapper close

          $controls = '  <!-- Controls -->
          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
          </a>';

          // öszefuzés
          $body_text .= $indicators . $wrapper_slides . $controls;
 
          $body_text .= '  </div>' . "\n";
          $body_text .= '  <div class="clearfix"></div>' . "\n";
          $body_text .= '<!-- Banner Rotator EOF -->' . "\n";
          
          $carousel = $body_text;

        }
 

      ob_start();
      include(DIR_WS_MODULES . 'content/' . $this->group . '/templates/carousel.php');
      $template = ob_get_clean();

      $oscTemplate->addContent($template, $this->group);
      
      
    }

}

 function isEnabled() {
      return $this->enabled;
    }

    function check() {
      return defined('MODULE_FRONT_PAGE_BANNER_ROTATOR_STATUS');
    }
                
                

                                                                                                                                                                                                                                                                                                                                                                      
    function install() {
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Sort Order', 'MODULE_FRONT_PAGE_BANNER_ROTATOR_SORT_ORDER', '0', 'Sort order of display. Lowest is displayed first.', '6', '0', now())");
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Content Width', 'MODULE_FRONT_PAGE_BANNER_ROTATOR_CONTENT_WIDTH', '12', 'What width container should the content be shown in?', '6', '1', 'tep_cfg_select_option(array(\'12\', \'11\', \'10\', \'9\', \'8\', \'7\', \'6\', \'5\', \'4\', \'3\', \'2\', \'1\'), ', now())");
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Enable Banner Rotator', 'MODULE_FRONT_PAGE_BANNER_ROTATOR_STATUS', 'True', 'Do you want to show the banner rotator?', '6', '1', 'tep_cfg_select_option(array(\'True\', \'False\'), ', now())");
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Hold Time', 'MODULE_FRONT_PAGE_BANNER_ROTATOR_HOLD_TIME', '4000', 'The time each banner is shown. 1000 = 1 second', '6', '0', now())");
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Banner Order', 'MODULE_FRONT_PAGE_BANNER_ROTATOR_BANNER_ORDER', 'Desc', 'Order that the Banner Rotator uses to show the banners.', '6', '0', 'tep_cfg_select_option(array(\'Asc\', \'Desc\'), ', now())");
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Banner Rotator Group', 'MODULE_FRONT_PAGE_BANNER_ROTATOR_GROUP', 'rotator', 'Name of the banner group that the Banner Rotator uses to show the banners.', '6', '0', now())");
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Banner Rotator Max Banners', 'MODULE_FRONT_PAGE_BANNER_ROTATOR_MAX_DISPLAY', '4', 'Maximum number of banners that the Banner Rotator will show', '6', '0', now())");
    }

    function remove() {
      tep_db_query("delete from " . TABLE_CONFIGURATION . " where configuration_key in ('" . implode("', '", $this->keys()) . "')");
    }

    function keys() {
      return array (
        'MODULE_FRONT_PAGE_BANNER_ROTATOR_CONTENT_WIDTH',
        'MODULE_FRONT_PAGE_BANNER_ROTATOR_STATUS',
        'MODULE_FRONT_PAGE_BANNER_ROTATOR_SORT_ORDER',
        'MODULE_FRONT_PAGE_BANNER_ROTATOR_HOLD_TIME',
        'MODULE_FRONT_PAGE_BANNER_ROTATOR_BANNER_ORDER',
        'MODULE_FRONT_PAGE_BANNER_ROTATOR_GROUP',
        'MODULE_FRONT_PAGE_BANNER_ROTATOR_MAX_DISPLAY'
      );
    }
    
    
      function createImage($width = 900, $height = 500, $red = 255, $green = 0, $blue = 0) {
      $im = imagecreatetruecolor($width, $height);

      // sets background to red
      $color = imagecolorallocate($im, (int)$red, (int)$green, (int)$blue);
      imagefill($im, 0, 0, $color);

      //header('Content-type: image/png');
      ob_start();
      imagepng($im);
      $contents =  ob_get_contents();
      ob_end_clean();
      imagedestroy($im);

      $imgData = base64_encode($contents);
      $src = 'data: image/png;base64,'.$imgData;
      return $src;
    }







 
 
  }
 

?>

thanks

Edited April 14, 2016 by vampirehunter

[♥raiwa]

@@vampirehunter,
 
There are 3 ways to prevent the thumbs to be used:
in your carousel module:
- change in all places the "tep_image" function to "tep_image_legacy"
- Remove at least one image size value (width or height)
- hardcode the image calls with html: “img src=”….
 
the first is of course the easiest and cleanest.

 

rgds

Rainer

[vampirehunter]

@@vampirehunter,

 

There are 3 ways to prevent the thumbs to be used:

in your carousel module:

- change in all places the "tep_image" function to "tep_image_legacy"

- Remove at least one image size value (width or height)

- hardcode the image calls with html: “img src=”….

 

the first is of course the easiest and cleanest.

 

rgds

Rainer

 

Cool, thanks, will do that!

 

I think it was messing up because i was using this line

           $wrapper_slides .= tep_image(DIR_WS_IMAGES . $banner['banners_image'], 'alt text', 1140, 342);

instead of the commented out original line

  $wrapper_slides .= tep_image(DIR_WS_IMAGES . $banner['banners_image'], $banner['banners_html_text']);

I think i changed it because no Alt tag is being shown when banners html text is being used.

Not sure how the Alt tag is supposed to be forced if its not showing up.

Edited April 14, 2016 by vampirehunter

[♥raiwa]

@@vampirehunter,

 

you may also try to improve thumb image quality by changing the settings for jpeg quality and sharpen.

[♥Stephan Gebbers]

i started to change products image from jpg to transparent png, but i am not happy with the image quality. especially aliasing on skewed borders/edges. Is there a way to get good quality png thumbnails incl. transparency?

Example of png thumb http://www.mspoints.de/itunes-code-deutschland-15eur-guthaben-p-144.html

Example of jpg thumb http://www.mspoints.de/google-play-card-15eur-guthaben-code-p-214.html

 

Regards,

Stephan

[♥raiwa]

Hello Stephan @@Stephan Gebbers,

 

I'm sorry, as far as I know there is no way to improve the quality.

However if you have a white or flat color background around the images, there is no need to use transparent images. I would just use jpgs.

Transparency is only needed if you use some kind of pattern/graphic in the background.

 

rgds

Rainer

[♥Stephan Gebbers]

Ok, i changed it back from transparent png to jpg again. i guess i need to change the background color of the new products- and also bought-boxes in iOSC to white or something closer to the white image-background.

 

anyway, thanks for the contribution!

[Guest]

@@raiwa

Hi Rainer

 

Thought Id have a go at this easy installation.

Somehow, not sure how or how to correct but I get this message on the admin>configuration>images.

Ive checked and pretty sure all changes have been made correctly. I am using the latest from gburton/Responsive-osCommerce

Warning: call_user_func() expects parameter 1 to be a valid callback, function 'tep_cfg_reset_thumbs_cache' not found or invalid function name in /home/grandp/public_html/XXXXX/admin/includes/functions/general.php on line 1272

Look forward to your thoughts.

 

Many thanks

Grandpa

[Guest]

@@raiwa

 

Hi Rainer

 

Boy am I so STUPID and THICK. I managed to place the additional code  in the WRONG files. Many apologies, how embarrassing.

 

Cheers

 

Grandp