Resize Image on the Fly to Fit in a Square Box

This simple image class will allow you to get an image from your server or an external one to dynamically resize it and center it top/bottom and left/right in a square box. If you have some images that are all good kb size but are a bit random in their dimensions, you can use this class to make them fit dynamically in a box. It will make images that are larger than the bounds of the box smaller, but will not adjust the size of images that are smaller than then bounds. That would make them blurry, so instead it just makes them centered in the box. I am using this in a scenario where there are images that have been uploaded to the server that are very small 200x200 and rather large 1000x1200. The size of my display box in this example is 400x400. Here is a demo: http://www.matthewaprice.com/image-resize-demo/ Here is how you implement the class.
// this first line relies on the GD Image Library to get the image's dimensions
$size = getimagesize('/path/to/your/image.jpg'); // can be from root of server or http://...
$new_image = new ImageResizer('400'); // Set the size of the box that will house the images
$new_image->setOriginalImageWidth($size[0]); // Input the original image's height
$new_image->setOriginalImageHeight($size[1]);
// Output the new dimensions as an array.  The "margin-top" argument says that you also want to center the image top/bottom.  This dynamically creates a "margin-top" css rule based on the new height of the image. Without it, your image will just be centered left/right
$new_dimensions = $new_image->outputNewDimensions('margin-top');
Here is the HTML
<div style="width: 400px; height: 400px;">
<!-- You can create a css rule for this, but for the demo it is easier to show inline -->
        <!-- This div will center the image "left/right" and "top/bottom" -->
        <div style="text-align: center; margin-top: <?php echo $new_dimensions['margin_top']; ?>px;">
                <!-- The style rules here are the new computed width and height of the image -->
                <img src="/path/to/your/image.jpg" style="width: <?php echo $new_dimensions['width']; ?>px; height: <?php echo $new_dimensions['height']; ?>px;">
        </div>
</div>

And here is the class. I have used this with WordPress to access images not imported by WordPress that are on a different server. So in this case it is a plugin. You can definitely take just the class and use in your app as necessary.
<?php
/*
Plugin Name: Image Resizer
Plugin URI: http://www.matthewaprice.com/resize-image-on-the-fly-to-fit-in-a-square-box/
Description: This plugin give you the ability to resize images on the fly to fit in a square fixed width/height box
Version: 1.0
Author: Matthew Price
Author URI: http://www.matthewaprice.com
License: GPL2
*/      

class ImageResizer {
        
        private $bounds;

        public function __construct($bounds) {

                $this->bounds = $bounds;
        
        }
        
        public function setOriginalImageWidth($width) {
                
                $this->original_width = $width;
        
        }       

        public function setOriginalImageHeight($height) {
                
                $this->original_height = $height;
        
        }       

        public function outputNewDimensions($margin = '') {
        
                if ( ($this->original_width < $this->bounds) && ($this->original_height < $this->bounds) ) { 
                        // keep the original dimensions as the image is by default smaller than bounds
                        $new_width = $this->original_width;
                        $new_height = $this->original_height;
                        $margin_top = ($this->bounds - $new_height) / 2;                                                                             
                } else if ( ($this->original_width > $this->bounds) && ($this->original_width == $this->original_height) ) {
                        // square image larger than bounds
                        $ratio = $this->original_width / $this->bounds;
                        $new_width = $this->bounds;
                        $new_height = round($this->original_height / $ratio);
                        $margin_top = ($this->bounds - $new_height) / 2;
                } else {
                        // start resizing image to get new width and height
                        if ($this->original_width > $this->original_height) {
                                // width is bigger than height
                                $ratio = $this->original_width / $this->bounds;
                                $new_width = $this->bounds;
                                $new_height = round($this->original_height / $ratio);
                                $margin_top = ($this->bounds - $new_height) / 2;
                        } else if ($this->original_height > $this->original_width) {
                                // height is bigger than width
                                $ratio = $this->original_height / $this->bounds;
                                $new_height = $this->bounds;
                                $new_width = round($this->original_width / $ratio);
                                $margin_top = ($this->bounds - $new_height) / 2;                                                                                     
                        }                                                                               
                }
                
                $new_image_dimensions['width'] = $new_width;            
                $new_image_dimensions['height'] = $new_height;
                if ($margin) { $new_image_dimensions['margin_top'] = $margin_top; }     
                
                return $new_image_dimensions;   
                
        }               

}       
?>

Post a comment
  1. Sebastien Vellut

    Hi Matthew, Your system is exactly what I'm looking for a bunch of logos with, of course many size ratio. The problem is that I don't understand how to use it in my wordpress website. So I've upload and activate the class in my wordpress plugin panel but I dont understand how (and if it's possible) to apply it on my set of logos. Do you have any instructions for a non pro-PHP like me ? Thanks

    • Matthew Price

      Hi So here is a page with some example code. http://matthewaprice.com/resize-image-class-in-on-a-custom-wordpress-page/ You might also be able to use add_image_size(); to add a custom thumbnail size. that will fit the image into the "square div" for example... add_theme_support( 'post-thumbnails' ); add_image_size( 'custom-size', 125, 125, true ); then in your template... the_post_thumbnail( 'custom-size' );

      • Sebastien Vellut

        And the last one :-) Sorry for crapping up your comments list ! Just give the page's ID instead of "$post->ID". Everything resolved thanks to your help !!! Best regards ;-)

        • Matthew Price

          Glad you figured it out. The post ID that i was using was actually being used on a page. you could use this code either in or out of a loop. If outside it will use the page's or single's $post->ID Matt

      • Sebastien Vellut

        Asking too quickly for the ordering problem, found the solution by myself ("orderby" => menu_order). ;-) Will look further for the other problem

      • Sebastien Vellut

        Sorry for the delay but I was glue to another project :-) I'm nearly good with my logo gallery (and I thank you 10.000 for this !!!) but need your help for the finishing touch. I use your "resize image class" inside the content of my page after installing the Exec-PHP plugin. Certainly a crappy way, but I do what I can :-) Everything is good except 2 things. - I had to change your code to this one (got 13 logos) if not it takes logos from other pages: $args = array("post_type" => "attachment", "numberposts" => 13, "post_parent" => $post->ID); - It doesn't use the WP-gallery order and stay stuck with a alphabetical order. Do you have any tips to resolve this ? I suppose that everything is related with the "$args" line but don't know how to adapt it. Have a nice week-end !

  2. Kiran Singh

    Can I use this plugin in OSClass classified software?

    • Matthew Price

      Hi Kiran So if you are just asking to use it on your own, go right ahead. If you are asking for help integrating let me know Matt






Real Time Web Analytics ^