Thumbnails OSC 2.3.1

[blr044]

At product_info page the thumbnails are overlapping. Did check product_info.php around lines 103

 

<script type="text/javascript">
$('#piGal ul').bxGallery({
 maxwidth: 300,
 maxheight: 200,
 thumbwidth: <?php echo (($pi_counter > 1) ? '75' : '0'); ?>,
 thumbcontainer: 300,
 load_image: 'ext/jquery/bxGallery/spinner.gif'
});
</script>

but that did not anything to do with it. Any suggestions on where I might look so as to correct this issue. Settings in admin for small images is 125-W and 110-H.

 

Thanks in advance.

[burt]

thumbwidth: <?php echo (($pi_counter > 1) ? '75' : '0'); ?>,

 

The 75 should not be hardcoded. It needs to be SMALL_IMAGE_WIDTH as far as I recall, could be wrong though.

 

thumbwidth: <?php echo (($pi_counter > 1) ? SMALL_IMAGE_WIDTH : '0'); ?>,

 

Also see this comment; http://www.clubosc.com/oscommerce-2-3-core-multiple-images.html#comment-4603

[blr044]

thumbwidth: <?php echo (($pi_counter > 1) ? '75' : '0'); ?>,

 

thumbwidth: <?php echo (($pi_counter > 1) ? SMALL_IMAGE_WIDTH : '0'); ?>,

 

 

It did not change it. Even looked through the core comments to see if I could see anything that would help.

 

Here is a snapshot:

 

Also the images have jagged edges. i was under the assumption this was solved in 2.3.1. If i am wrong, I probably need to leave a comment there.

[multimixer]

From your page source right now

<script type="text/javascript">

$('#piGal ul').bxGallery({

maxwidth: 300,

maxheight: 200,

thumbwidth: 75,

thumbcontainer: 300,

load_image: 'ext/jquery/bxGallery/spinner.gif'

});

</script>

 

Try in following order

1) set number 75 to 150 to see if something change

2,1) If no remove any condition and type in thumbwidth: 150,

2.2) if yes do again as burt said, and make sure you have a setting in admin for SMALL_IMAGE_WIDTH

 

Then post what happens

[blr044]

From your page source right now

 

 

Try in following order

2,1) If no remove any condition and type in thumbwidth: 150,

 

Then post what happens

 

The first step failed to any improvement, except or one issue. it increased image to 150 x 150 but still overlapped. But what do you mean by condition?

[blr044]

From your page source right now

 

 

Try in following order

1) set number 75 to 150 to see if something change

2,1) If no remove any condition and type in thumbwidth: 150,

2.2) if yes do again as burt said, and make sure you have a setting in admin for SMALL_IMAGE_WIDTH

 

Then post what happens

 

Got it to work on localhost. Soon as server is back up again, I will upload work to server.

[blr044]

I got the previous post working fine. Not sure what went wrong, so just downloaded files from local host. But am looking through Google search for a way so that my images do not have the jagged look. They are not sharp and clear. Found a few of them but could not get them incorporated into ver 2.3.1. if any ideas where I may look, it would be very much appreciated. Thanks.

[blr044]

I got the previous post working fine. Not sure what went wrong, so just downloaded files from local host. But am looking through Google search for a way so that my images do not have the jagged look. They are not sharp and clear. Found a few of them but could not get them incorporated into ver 2.3.1. if any ideas where I may look, it would be very much appreciated. Thanks.

Not able to edit now, so I need to add that I have image set for the width at 125 and height is blank in adim -> images. Even tried height set as 0. Did not make a difference.

[multimixer]

Not able to edit now, so I need to add that I have image set for the width at 125 and height is blank in adim -> images. Even tried height set as 0. Did not make a difference.

 

What images are you talking about and what setting do you change in admin?

 

If you talk about the thumbnails on the product info page, the setting is in the file product_info.php itself

  thumbwidth: <?php echo (($pi_counter > 1) ? '75' : '0'); ?>,

[blr044]

What images are you talking about and what setting do you change in admin?

 

If you talk about the thumbnails on the product info page, the setting is in the file product_info.php itself

  thumbwidth: <?php echo (($pi_counter > 1) ? '75' : '0'); ?>,

Very sorry about that, that part I understand. Settings in admin:

 

Small Image Width  	       120  	 
Small Image Height 	               blank 
Heading Image Width 	               57 	
Heading Image Height 	               40 	 
Subcategory Image Width 	       80 	 
Subcategory Image Height 	       blank	 
Calculate Image Size 	               true 	 
Image Required                         true

 

But am trying to get where the images have smooth edges. As they are now, I am not really happy with them. I did try to incorporate OscThumb but it did not work. I do realize that it will be a while before the previous contributions is edited by the authors so as to work with 2.3. But was hoping something could of been done to smooth out the edges. As one may notice here at www dot greatdiscounts4u dot com

[beerbee]

Hi,

i think i just managed to get oscthumb working with 2.31 yesterday, but as seeing myself as dilletantee regarding php i don't know if this is the most elegant way.

Anyway heres what i did maybe someone with a more profund knowlege of php can comment on this.

 

One thing first i did'nt manage to get it work with cryptetd images.

I dont know what it does to video/htmlcontent right now but shouldnot interfere.

 

I installed oscthumb normally after that it worked for thumbs - category pictures product listing, and resized product image thumbs on product_info.php where single pics were used.

 

For the fancy overlay full size pics and fancy gallery thumbs this is what i did:

 

file catalog/includes/functions/html_output.php

 

i copied the oscthumb tep_image function and took out everything regarding size as resizing of full size pics is done by fancy overlay. Oh and uops i took ou the alt tag too may be it should be put back in. (this is a dilletantee writing here remember) anyway thats what it looks now.

 

added this one just below the tep_image function:

 

function tep_image22($src, $alt = '', $width = '', $height = '', $params = '', $original = false, $thumbnail_type = 0) {
   global $oscthumb;



 $oscthumb->set_type ($src, $width, $height, $thumbnail_type); // Detect the type of image we are currently processing
 if ($oscthumb->set_size ($src, $width, $height)==false) return false; // Choose the displayed width and height of the image, and if display something

    $image22 = $oscthumb->process22($src); // Returns the beginning of the image tag, like <img src="oscthumb.php?src=... or <img src="images/logo.gif"



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


 return $image22;
 }

 

We now need to have a new function process22 in catalog/includes/classes/oscthumb.php

 

Again this is just a changed copy of the process function in this file and added just below of it.

 

 function process22($src) {
   if ($this->process) {
     // Get parameters for phpThumb.
     $src = '/'.$src;
     $params = 'src='.$this->_encrypt($src);

     // If we are going to ZoomCrop
     if( OSCTHUMB_USEZC == 'True'){
   	$params .= '&zc=1';
     }

     // if there were additional params set in the admin
     if(strlen(trim(OSCTHUMB_ADDITIONAL) ) > 0){
   	$params .= '&'.OSCTHUMB_ADDITIONAL;
     }
     $image = $this->_phpThumbURL($params);
     // die ('<pre>'.$src.'</pre>');
   } else $image = $src;
     return $image;
 }

 

In the same file the function set_type has also to be changed to get oscthumb to process multiple pics:

the complete changed function:

 

function set_type ($src, $width, $height, $thumbnail_type = 0) {
 // Try to detect what kind of image we are currently processing, so we can do what have to do with it.
 global $product_info, $pi;

 $this->thumbnail_type = $thumbnail_type;
 if ($this->thumbnail_type==0) {  // If thumbnail type is already chosen, do not try to find it again.

   if ( $width == SMALL_IMAGE_WIDTH && $height == SMALL_IMAGE_HEIGHT) $this->thumbnail_type=1;  // Small image
     elseif ($width == HEADING_IMAGE_WIDTH && $height == HEADING_IMAGE_HEIGHT) $this->thumbnail_type=2;  // Heading image
     elseif ($width == SUBCATEGORY_IMAGE_WIDTH && $height == SUBCATEGORY_IMAGE_HEIGHT) $this->thumbnail_type=3;  // Subcategory image

     // Allow for a new intermediate sized thumbnail size to be set without any changes having to be made to the product_info page itself.
     elseif (basename ($_SERVER['PHP_SELF'])== FILENAME_PRODUCT_INFO) {
       if (isset($product_info['products_image'])
         && $src == DIR_WS_IMAGES . $product_info['products_image']
         && $product_info['products_id']==(int)$_GET['products_id']) {  // Final check just to make sure that we don't interfere with other contribs.
         $this->thumbnail_type=4;  // Product info image
       }
            if (isset($pi['image'])
         && $src == DIR_WS_IMAGES . $pi['image']
        ) {
       $this->thumbnail_type=4;  //
     }
     } elseif (basename ($_SERVER['PHP_SELF'])== FILENAME_POPUP_IMAGE) {
       $this->thumbnail_type=5;  // Popup image
     }
   }
 }

 

I added global

$pi and a condition to look for it on product_info.php.

resulting in getting images to be processed by oscthum the same way as product info small image.

 

last step is changes to catalog/product_info.php

 

look for:

<?php
       $pi_counter = 0;
       while ($pi = tep_db_fetch_array($pi_query)) {
         $pi_counter++;

         $pi_entry = '        <li><a href="';

         if (tep_not_null($pi['htmlcontent'])) {
           $pi_entry .= '#piGalimg_' . $pi_counter;
         } else {
           $pi_entry .= tep_href_link(DIR_WS_IMAGES . $pi['image']);
         }

         $pi_entry .= '" target="_blank" rel="fancybox">' . tep_image(DIR_WS_IMAGES . $pi['image']) . '</a>';

         if (tep_not_null($pi['htmlcontent'])) {
           $pi_entry .= '<div style="display: none;"><div id="piGalimg_' . $pi_counter . '">' . $pi['htmlcontent'] . '</div></div>';
         }

         $pi_entry .= '</li>';

         echo $pi_entry;
       }
?>

all that ist to be changed here is

$pi_entry .= tep_href_link(DIR_WS_IMAGES . $pi['image']);

to

$pi_entry .= '<a href="' . tep_image22(DIR_WS_IMAGES . $pi['image']);

 

A little bit below the following (case for single pic)

 <?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank" rel="fancybox">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), null, null, 'hspace="5" vspace="5"') . '</a>'; ?>

 

has to be changed to

<?php echo '<a href="' . tep_image22(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank" rel="fancybox">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), null, null, 'hspace="5" vspace="5"') . '</a>'; ?>

 

these changes make use of the new tep_image22 which simply puts out the oscthumbed img path without <image src.. code just whats needed for the fancy overlay.

 

Hope this is helpful or even better gets taken up by someone more competent.

 

Best regards

beerbee

[blr044]

Hi,

i think i just managed to get oscthumb working with 2.31 yesterday, but as seeing myself as dilletantee regarding php i don't know if this is the most elegant way.

Anyway heres what i did maybe someone with a more profund knowlege of php can comment on this.

 

Possibility you have a web site up we can view as a sample to see what images look like?