Welcome Guest, Not a member yet? Register   Sign In
Added to Wiki: image resizing and squaring library
#1

[eluser]JoostV[/eluser]
Image resizing and cropping can take up a lot of repetitive code. I added an image library to the Wiki that I use to create thumbs and resized versions of images (square or not).

EDIT: This library has been moved to Github
https://github.com/accent-interactive/ci-lib-images


By default, images are squared from the center, but this can be offset, too.

Example usage:
Code:
function image ()
{
    $original = 'test_image.jpg';
    $new = 'test_image_altered.jpg';
    $originalPath = '/full/path/to/original/image/folder/';
    $newPath = '/full/path/to/altered/image/folder/';
    $maxSize = 150;
    $this->load->library('images');
    
    // Create square and resized image example
    $this->images->squareThumb($originalPath . $original, $newPath . $new, $maxSize);
    
    // Create resized image example
    $this->images->resize($originalPath . $original, $maxSize, $maxSize, $newPath . $new);
    
    // Create square image image
    $this->images->square($originalPath . $original, $newPath . $new);
}
#2

[eluser]JoostV[/eluser]
Deadly pointed out the lib threw an error. I had left some old code in there by accident. It has been fixed.

Thanks, Deadly!
#3

[eluser]gh0st[/eluser]
By square thumbnails and square images; do you mean a similar functionality that Facebook does to its images?
#4

[eluser]JoostV[/eluser]
I don't know how Facebook handles images.

But squaring here creates a square image, measured from the center of the picture. So, if an image is 200px wide and 100px high, squaring will chip 50 pixels off the left an 50 pixels off the right. Works for portrait images, too, of course Smile

Square thumbnails squares the image first, and then resizes it to the size you specify. Say you wish to save three sizes, a thumbnail and a square thumbnail; easy as:

Code:
// Example of resizing and squaring five images in one go, using 'images' library
$sourceimagepath = '/path/to/image/folder/';
$sourceimagename = 'test.png';
$sourcefile = $sourceimagepath . $sourceimagename;
$destinationpath = '/path/to/destination/folder/';

// Store all sizes you wish to create in an array
$image_sizes[] = array('maxwidth' => 800, 'maxheight' => 800, 'subfolder' => '800', 'square' => false);
$image_sizes[] = array('maxwidth' => 450, 'maxheight' => 450, 'subfolder' => '450', 'square' => false);
$image_sizes[] = array('maxwidth' => 300, 'maxheight' => 300, 'subfolder' => '300', 'square' => false);
$image_sizes[] = array('maxwidth' => 100, 'maxheight' => 100, 'subfolder' => 'thumbs', 'square' => false);
$image_sizes[] = array('maxwidth' => 100, 'maxheight' => 100, 'subfolder' => 'thumbs_square', 'square' => true);
$this->load->library('images');

// Resize the original image and store it
foreach ($image_sizes as $image_size) {
    
    $destinationfile = $destinationpath . $image_size['subfolder'] . '/' . $sourceimagename;
    
    if ($image_size['square'] == false) {
        $this->images->resize($sourcefile, $image_size['maxwidth'], $image_size['maxheight'], $destinationfile);
    }
    else {
        $this->images->squareThumb($sourcefile, $destinationfile, $image_size['maxwidth']);
    }
}

// You may wish to delete the original file
if (file_exists($sourcefile) && is_file($sourcefile)) {
    unlink($sourcefile);
}
#5

[eluser]packetfox[/eluser]
Hello there,

this seems to be almost exactly what i am looking for for a project i am working on; but i simply cannot figure out how to create squared thumbnails at 160x160px, not matter the size or dimensions of the source file. Is there a way i can facilitate this with your Library?

Best regards,
D
#6

[eluser]JoostV[/eluser]
Code:
$sourceimagepath = '/path/to/image/folder/';
$sourceimagename = 'test.png';
$sourcefile = $sourceimagepath . $sourceimagename;
$destinationpath = '/path/to/destination/folder/';
$this->load->library('images');

// Resize the original image and store it
$destinationfile = $destinationpath . '/sq_' . $sourceimagename;
$this->images->squareThumb($sourcefile, $destinationfile, 160);
#7

[eluser]packetfox[/eluser]
Hi there,

this is what i have:

Code:
$this->images->squareThumb($config['source_image'],$config['target_image'], 160);

The Image Library is autoloaded.

When i upload images with different dimensions i get different results:
Source - Result
600x850 - 85x120
788x1812 - 53x120
468x304 - 160x104

What id really like is all Images get a square Thumbnail of 160x160, disregarding their original Dimensions.

Best regards,
D
#8

[eluser]JoostV[/eluser]
Can you post your complete controller code?
#9

[eluser]packetfox[/eluser]
Hello there,

i went trough the whole thing before posting it to clean it out a little, and now it appears to work. :-S

Thanks for helping out!

Best regards,
D
#10

[eluser]JoostV[/eluser]
You're welcome Smile




Theme © iAndrew 2016 - Forum software by © MyBB