Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image resize constrain problem

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


    <?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 ?>">

    <!-- inset image contenthere --------------------->

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



  • #2
    Banned
    Join Date
    Oct 2012
    Posts
    81
    Thanks
    0
    Thanked 4 Times in 4 Posts
    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']  <= || 
           
    $_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);

    ?>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •