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;
}
}
?>
Matthew A Price
^