Image resize constrain problem

googlit · 11-18-2012, 02:51 PM

Hi all,

hopefully i can seek some assistance here, this may sound like a simple issue but i cant seem to get it right.

here goes....

i have a e-commerce site that is based on virtuemart, i am building a template for a category page that lists all the products in the desired category, the problem i am having is getting the image in the product box right.

what i want it to do is resize the image to an maximum off 200px height and width but maintain the image constraint. the problem have is that all the product images vary in dimension so if i resize by width only the height will overflow and vice versa.

hope this makes sense, an example of mycode is bellow,not sure if i might have to use a java querry etc.......

Quote:

<?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' );

<?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' );
mm_showMyFileName(__FILE__);
?>

<div style="width:290px; height: 366px; padding: 0px 3px 3px 3px; background-image:url(http://www.easyfireplace.co.uk/compo...s/PB-BG1.jpg); background-repeat: no-repeat;">
<div align="center">

<div style="width: 270px; height: 50px; padding-left: 10px; padding-top: 10px; text-align:center; font-family:Verdana, Geneva, sans-serif; font-size:14px; font-weight: bold; text-decoration:none;">
<a href="<?php echo $product_flypage ?>"><?php echo $product_name ?></a>
</div>

<div class="iwd_prod_hol">
<div style="float:left;width:290px; height: auto; " >
<a href="<?php echo $product_flypage ?>">



<div style="width: 270px; padding-left: 10px;">
<?php echo ps_product::image_tag( $product_thumb_image, 'class="browseProductImage" border="0" title="'.$product_name.'" Width="270px" alt="'.$product_name .'"' ) ?></div>
</a>
</div>

<div style="float:left; width:250px; height:40px; color: #EF531F; padding-left: 30px; padding-top: 10px; text-align:center; font-family:Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold;"><?php echo $product_s_desc ?></div></div>

<div style="width: 270px; height: 56px; padding-left: 10px;">

<div style="float:left;width:100px; height:55px;">
<div style="Width: 100px; height: 20px; ">
<img src="http://www.domain.co.uk/components/com_virtuemart/themes/default/images/ourprice.png" width="100" height="20">
</div>

<div style="Width: 100px; height: 35px; ">
<h3> <?php echo " $product_price" ?></h3>
</div>

</div>
</div>

<div style="width: 70px; height:55px; float: left;"></div>

<div style="float: left; width: 100px; height:55px;">
<?php //echo $form_addtocart ?><div align="right">
<a href="<?php echo $product_flypage ?>"><img src="http://www.easyfireplace.co.uk/components/com_virtuemart/themes/default/images/moreInfoIcon.png" width="100" height="55"></a></div>
</div>

</div>
</div>
</div>

minder · 11-19-2012, 07:42 AM

This script resizes an image to fit within a box with user defined length and width while maintaining the image's original aspect ratio.

I wouldn't recommend resizing the image using javascript because it won't work in browsers where js is turned off for some reason. But if you must resize using js you can convert the logic to js code.

PHP Code:


			
<?php
    /*************************************************************************
    This script resizes an image so that it fits within a user specified
    max_width and max_height.
    
    The script automatically detects jpg, png and gif image format files.
    
    Input Parameters:
    -----------------    
    pic         = path to image to be resized.
    maxWidth     = maximum width.
    maxHeight     = maximum height.
    *************************************************************************/
    
    //get the passed data, validate it and assign it to variables
    
    $image = $_GET['pic'];
    
    if(!isset($_GET['maxWidth'])        || !isset($_GET['maxHeight']) ||
       !is_numeric($_GET['maxWidth'])     || empty($_GET['maxWidth'])   || 
       !is_numeric($_GET['maxHeight']) || empty($_GET['maxHeight'])  || 
       $_GET['maxWidth']  <= 0 || 
       $_GET['maxHeight'] <= 0)
    {
        $max_width = 70;        //default value
        $max_height = 70;        //default value
    }
    else
    {
        $max_width  = $_GET['maxWidth'];
        $max_height = $_GET['maxHeight'];
    }

    //get the original image attributes
    $size         = GetImageSize($image);
    $width         = $size[0];
    $height     = $size[1];
    $imageType     = $size[2];
    
    //scaling factors
    $xRatio = $max_width / $width;        
    $yRatio = $max_height / $height;
    
    //calculate the new width and height
    if($width <= $max_width && $height <= $max_height)    //image does not need resizing
    {
        $toWidth     = $width;
        $toHeight     = $height;
    }
    else if($xRatio * $height < $max_height)
    {
        $toHeight = round($xRatio * $height);
        $toWidth  = $max_width;        
    }
    else
    {
        $toWidth = round($yRatio * $width);
        $toHeight  = $max_height;
    }
    
    //create the resized image
    //Type of image  1=GIF  2=JPG 3=PNG 4=SWF 5=PSD 6=BMP 7=TIFF(intel byte order) 8=TIFF(motorola byte order) 9=JPC 10=JP2 11=JPX 12=JB2 13=SWC 14=IFF 15=WBMP 16=XBM
    
    $newImage = ImageCreateTrueColor($toWidth,$toHeight);    //create the new image canvas
    
    switch ($imageType)
    {       
        case 1:        //gif file
            $oldImage = ImageCreateFromGif($image);
            break;
        
        case 3:        //png file
            $oldImage = ImageCreateFromPng($image);
            break; 
            
        default:    //jpg file
            $oldImage = ImageCreateFromJpeg($image);
            break;      
    }
   
    ImageCopyResampled($newImage,$oldImage,0,0,0,0,$toWidth,$toHeight,$width,$height);    //resize the new image
    
    //output the new resized image
    
    switch ($imageType)
    {       
        case 1:        //gif file
            header('Content-type: image/gif');
            ImageGif($newImage);
            break; 
            break;
        
        case 3:        //png file
            header('Content-type: image/png');
            ImagePng($newImage);
            break; 
        
        default:    //jpg file
            header('Content-type: image/jpeg');
            ImageJpeg($newImage);
            //ImageJpeg($newImage,'newImage.jpg', -1);
            break;      
    }
 
     //clean up resources
    ImageDestroy($oldImage);
    ImageDestroy($newImage);

?>