Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Adjusting product_info.php so image height autoscales HELP NEEDED


confusedcart

Recommended Posts

Hi there,

 

Using version 2.3.. In the admin you have the option to set the product_info.php image width.

 

I have set mine to 650..

 

When I upload a large image, the say 829x509 - the image adjusts to 650 width but the height is somewhat squashed and fixed at a certain value.

 

The correct scaled down ratio should be an image 650 x 400.. Yet my image is coming out at 650 x 250 it looks horrible.

How do I adjust this so that I can the right heights for a 650 width autoscaled.

 

My code is below, slightly customized site:

 


<?php
   if (tep_not_null($product_info['products_image'])) {
     $pi_query = tep_db_query("select image, htmlcontent from " . TABLE_PRODUCTS_IMAGES . " where products_id = '" . (int)$product_info['products_id'] . "' order by sort_order");
?> 
 <?php
         if (tep_db_num_rows($pi_query) > 0) {
   ?>

       <div id="piGal" class="hover">
         <ul>

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

             $pi_entry = '        <li class="wrapper_pic_div"><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" class="prods_pic_bg" style="width:'.(PROD_INFO_IMAGE_WIDTH + PIC_MARG_W).'px;height:'.(PROD_INFO_IMAGE_HEIGHT + PIC_MARG_H).'px;">' . tep_image(DIR_WS_IMAGES . $pi['image'], '', (PROD_INFO_IMAGE_WIDTH), (PROD_INFO_IMAGE_HEIGHT), ' style="width:'.(PROD_INFO_IMAGE_WIDTH + PIC_MARG_W2).'px;height:'.(PROD_INFO_IMAGE_HEIGHT + PIC_MARG_H2).'px;margin:'.PIC_MARG_T.'px '.PIC_MARG_R.'px '.PIC_MARG_B.'px '.PIC_MARG_L.'px;"') . ''.tep_draw_prod_pic_info_top().''.tep_draw_prod_pic_info_bottom().'</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;
           }
   ?>

         </ul>
       </div>
<?php
 if (PROD_INFO_IMAGE_WIDTH + PIC_MARG_W2 != PROD_INFO_IMAGE_HEIGHT + PIC_MARG_H2){
$coeff = ((PROD_INFO_IMAGE_HEIGHT + PIC_MARG_H2)/(PROD_INFO_IMAGE_WIDTH + PIC_MARG_W2)); 
}else{
$coeff = 1;
}
?>      
   <script type="text/javascript">
   $(function(){
var myWidth = <?php echo (($pi_counter > 1) ? '71' : '0'); ?>;
var myHeight = myWidth * <?php echo $coeff;?>;
$('#piGal ul').bxGallery({
//  maxwidth: '<?php echo (PROD_INFO_IMAGE_WIDTH + PIC_MARG_W); ?>',
//  maxheight: '<?php echo (PROD_INFO_IMAGE_HEIGHT + PIC_MARG_H); ?>',
thumbwidth: myWidth,
thumbheight: myHeight,
thumbcontainer: <?php echo (PROD_INFO_IMAGE_WIDTH + PIC_MARG_W + 10); ?>,
load_image: 'ext/jquery/bxGallery/spinner.gif'
   })
       });
   </script>

   <?php
         } else {
 //  $image_width = (PROD_INFO_IMAGE_WIDTH +(262 - PROD_INFO_IMAGE_WIDTH)); 
   ?>
   <div style="width:<?php echo (PROD_INFO_IMAGE_WIDTH + 10); ?>px;" class="hover">

         <?php echo '<div id="piGal" class="wrapper_pic_div fl_left" style="width:'.(PROD_INFO_IMAGE_WIDTH + PIC_MARG_W).'px;height:'.(PROD_INFO_IMAGE_HEIGHT + PIC_MARG_H).'px;"><a class="prods_pic_bg" 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']), (PROD_INFO_IMAGE_WIDTH), (PROD_INFO_IMAGE_HEIGHT), ' style="width:'.(PROD_INFO_IMAGE_WIDTH + PIC_MARG_W2).'px;height:'.(PROD_INFO_IMAGE_HEIGHT + PIC_MARG_H2).'px;margin:'.PIC_MARG_T.'px '.PIC_MARG_R.'px '.PIC_MARG_B.'px '.PIC_MARG_L.'px;"', '', '') . ''.tep_draw_prod_pic_info_top().''.tep_draw_prod_pic_info_bottom().'</a></div>'; ?>

   </div>
   <?php
         }
   ?>

   <script type="text/javascript">
   $("#piGal a[rel^='fancybox']").fancybox({
     cyclic: true
   });
   </script>
   <?php
       }
   ?>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...