Added to Wiki: image resizing and squaring library

[eluser]GlynnPhillips[/eluser]
Hi this seems to do exactly what I want, the only problem is its not resizing the square thumbnails for me.

It is just setting the height and width to whatever the shortest dimension is, so these are the results i get with uploads.

1000 width by 500 height = 500px by 500px

600width by 2000 height = 600px by 600px

I tried changing the size in both the function and within the images lib.

Here is my function code

Code:

$this->gallery_path = realpath(APPPATH . '../../plot_images');
        $this->gallery_path_url = base_url().'plot_images/';

        $originalPath = $image_data['full_path'];
        $newPath = $this->gallery_path . '/thumbs';
        $this->load->library('images');
      
        $this->images->squareThumb($originalPath, $newPath, 85);

Thanks
Glynn

[eluser]JoostV[/eluser]
@GlynnPhillips Are you sure it is even creating a new image with this code? Both $originalPath and $newPath should include the filename. It seems like $newPath does not.

[eluser]GlynnPhillips[/eluser]
Hi JoostV

Yeah it is creating both images, I am using your script with another one which uploads them and adds them to a database. When it adds them to the database it only saves the file name once and then when I pull them out if I want the thumb I just put the thumb/ before the image.

here you can see the two images which have been created using the script.

http://ridden.it/plot_images/thumbs/rooney.jpg

http://ridden.it/plot_images/rooney.jpg

As you can see it hasn't resized the image thumb down to 85x85.

Thanks

[eluser]JoostV[/eluser]
Hi Glynn,

Tested the code locally and it worked fine for me. This is the code I used in my controller:

Code:

public function square(){

        $this->gallery_path = realpath(APPPATH . '../public_html/files/gfx/articles');

        $originalPath = $this->gallery_path . '/rooney.jpg';
        $newPath = $this->gallery_path . '/thumbs/rooney.jpg';

        $this->load->library('images');
        $this->images->squareThumb($originalPath, $newPath, 85);  
    }

[eluser]JoostV[/eluser]
Hi Glynn,

Oops!

That is probably a bug. I checked the latest version I use and see that I've rewritten the method you're referring to.

I'll post the lib to github. Much easier to store updated versions.

Code:

function squareThumb ($originalFile, $newFile, $newSize = 120, $enlarge = FALSE, $offset = 0)
{
    // Square the original file and store it as a new file
    $this->square($originalFile, $newFile, $offset);
    
    // Resize the new file
    $this->resize($newFile, $newFile, $newSize, $newSize, $enlarge);
}

[eluser]JoostV[/eluser]
Hi Glynn,

The lib is currently available on Github.
https://github.com/accent-interactive/ci-lib-images. I added a controller with some example code.

I advise you to use this version.

I the squareThumb() method will not resize, try to feed it the absolute path. (use only forward slashes, as the CI image library does not play well with backward slashes, see this thread).

See if this fixes your problem.

[eluser]PEN Vannak[/eluser]
Hi Research Assistant,

I am currently using CI 1.7.x.

Is it possible to use with CI 1.7.x? And how to configure that?

Thanks in advance,

[eluser]JoostV[/eluser]
@PEN Vannak,

yep, it is. Configuration is in the README on Github. Make sure to set the correct paths to javascript files, like tiny_mce.

[eluser]GDmac - expocom[/eluser]
It looks like SquareThumb first crops and then resizes.
Am i correct that this might cause a bit overhead for large images?
(e.g. it first crops and saves 1920x1024 to 1024x1024 and then resizes and saves to 120x120).

Suggestion: resize first with smallest side set as "master_dim" setting.

Resize and crop
If you want fixed-size thumbs (not necessarily squared) here is a resize_and_crop() method.
First, change the resize method to include master_dim

Code:

function resize ($originalFile, $newFile = '', $newWidth = 120, $newHeight = 120, $enlarge = FALSE, $master_dim='auto')
....
$config['master_dim'] = $master_dim;

And here is resize_and_crop:

Code:

function resize_and_crop($originalFile, $newFile = '', $newWidth = 120, $newHeight = 120)
    {

        // Abort if image does not exist
        if (! file_exists($originalFile) || ! is_file($originalFile)) {
            return FALSE;
        }

        // Get original image data
        $imgData = $this->getSize($originalFile);

        $source_ratio = $imgData['width'] / $imgData['height'];
        $wanted_ratio = $newWidth / $newHeight;
        
        // resize acordding to smallest side
        $this->resize($originalFile, $newFile, $newWidth, $newHeight, TRUE, ( $source_ratio > $wanted_ratio ? 'height' : 'width') );

        // crop newFile
        $config['image_library'] = 'GD2';
        $config['library_path'] = null;
        $config['source_image'] = $newFile;
        $config['maintain_ratio'] = FALSE;
        $config['quality'] = 95;

        // get dimensions after resize
        $imgData = $this->getSize($newFile);

        if ($imgData['width']>=$newWidth || $imgData['height']>=$newHeight)
        {
            $config['width'] = $newWidth;
            $config['x_axis'] = ( $imgData['width'] - $newWidth ) / 2;
        
            $config['height'] = $newHeight;
            $config['y_axis'] = ( $imgData['height'] - $newHeight ) / 2;
        
            // Crop image
            $this->_ci->image_lib->initialize($config);
            
            if (! $this->_ci->image_lib->crop() )
            {
                show_error($this->_ci->image_lib->display_errors());
            }
            
            // Clear lib so we can perform another image action
            $this->_ci->image_lib->clear();
        }
    }

[eluser]Mody[/eluser]
Thanks for this cool lib,
I was in a serious rush and your lib saved me lot of time!