How do I make multiple thumbails for the same image with image_lib?

[eluser]KeyStroke[/eluser]
Hi,

I have a site where users upload an image to their profile as their profile image. The problem is that I need to make multiple thumbails for the user image, not just one. Because the size of their image thumbnail depends on the page it's displayed in (sometimes it's small, sometimes it's medium).

So can this be done in image_lib? and how?


Your help is much appreciated

[eluser]Bramme[/eluser]

Code:

function process_uploaded_image($filename){
    
    $large_path = $this->config->item('portfolio_path').$filename;
    $thumb_path = $this->config->item('thumbs_path').$filename;
    
    //get image size
    $img_size = getimagesize($large_path);
    $orig_width = $img_size[0];
    $orig_height = $img_size[1];
    
    if($orig_width > $orig_height) {
    //horizontal picture
        $res_width = 450;
        $res_height = 10;
        $set_master_dim = 'width';
    } else {
    //vertical picture
        $res_width = 10;
        $res_height = 400;
        $set_master_dim = 'height';
    }
    
    //resizing the uploaded image
    $resize_config['image_library'] = 'gd2';
    $resize_config['source_image'] = $large_path;
    $resize_config['maintain_ratio'] = TRUE;
    $resize_config['width'] = $res_width;
    $resize_config['height'] = $res_height;
    $resize_config['master_dim'] = $set_master_dim;
    
    $this->load->library('image_lib', $resize_config);
    
    if (!$this->image_lib->resize()) {
        echo "fout bij eerste resize";
        echo $this->image_lib->display_errors();
        return false;
    }
    
    //making a thumbnail
    $this->image_lib->clear();
    
    //get image size
    $img_size = getimagesize($large_path);
    $orig_width = $img_size[0];
    $orig_height = $img_size[1];
    
    //calculate offset
    if($orig_width > $orig_height) {
    //horizontal picture
        $diff = $orig_width - $orig_height;
        $cropsize = $orig_height - 1;
        $x_axis = round($diff / 2);
        $y_axis = 0;
    } else {
    //vertical picture
        $cropsize = $orig_width - 1;
        $diff = $orig_height - $orig_width;
        $x_axis = 0;
        $y_axis = round($diff / 2);
    }
    
    //actual cropping
    $crop_config['image_library'] = 'gd2';
    $crop_config['source_image'] = $large_path;
    $crop_config['maintain_ratio'] = FALSE;
    $crop_config['new_image'] = $thumb_path;
    $crop_config['x_axis'] = $x_axis;
    $crop_config['y_axis'] = $y_axis;
    $crop_config['width'] = $cropsize;
    $crop_config['height'] = $cropsize;
        
    $this->image_lib->initialize($crop_config);

    if (!$this->image_lib->crop()) {
        echo "fout bij crop";
        echo $this->image_lib->display_errors();
        return false;
    }
    
    
    //resize the cropped image to a thumbnail
    $this->image_lib->clear();
    
    $thumb_config['image_library'] = 'gd2';
    $thumb_config['source_image'] = $thumb_path;
    $thumb_config['maintain_ratio'] = TRUE;
    $thumb_config['width'] = 100;
    $thumb_config['height'] = 100;
    
    $this->image_lib->initialize($thumb_config);
    
    if (!$this->image_lib->resize()) {
        echo "fout bij resizen crop";
        echo $this->image_lib->display_errors();
        return false;
    }
    
    //watermark the resized image
    $this->image_lib->clear();
    
    $wm_config['source_image'] = $large_path;
    $wm_config['wm_type'] = 'overlay';
    $wm_config['wm_vrt_alignment'] = 'middle';
    $wm_config['wm_hor_alignment'] = 'center';
    $wm_config['wm_overlay_path'] = './images/shutter_watermark.png';
    
    $this->image_lib->initialize($wm_config);
    
    if (!$this->image_lib->watermark()) {
        echo "fout bij watermarken";
        echo $this->image_lib->display_errors();
        return false;
    }
    
    return true;    
    
}

Here's a method from a model of mine. It does several things after each other... There's resizing, cropping, more resizing and more cropping. If you have a look at it, you should understand the process.

How do you use it? Just put $this->my_model->process_uploaded_image('image.jpg'); in your controller. (ignore the dutch error messages)

[eluser]KeyStroke[/eluser]
Thanks for your reply.

I also just noticed the 'thumb_marker' option that allows me to change the "_thumb" at the end of the image. This will help me get over the problem of having only one thumbnail per image.

[eluser]nmweb[/eluser]
Is it not possible to simply create a new instance of the image library? clear() isn't the neatest of solutions.

[eluser]Bramme[/eluser]
[quote author="nmweb" date="1216581969"]Is it not possible to simply create a new instance of the image library? clear() isn't the neatest of solutions.[/quote]

Haven't really got an opinion about the "neatness" off it, but it think the imglib would be handier if clear() got called before every initialize automatically.

[eluser]Rick Jolly[/eluser]
Absolutely Bramme. Why wouldn't the image lib call clear() before initialize()? The current implementation is awkward and results in this same question every week. I don't think allowing multiple instances is a good idea since libraries in CI are singletons for good reason and making one exception is an ugly hack.

[eluser]nmweb[/eluser]
Calling clear() before initialize() makes sense but is imho the ugly hack. You could as well do away with the whole class all the methods just functions stuck in a file, together with a bunch of variables in the global namespace. You probably gain performance and the functionality wouldn't differ from what's available now, only difference would be the pseudo-namespace achieved by using a class. An image or an email for that matter is a perfect example of a place where not to implement a singleton, after all, one might use more than one image in an application. Reusing the same object but clearing its data whenever you need a new image is awkward. I have argued before to allow loading without instantiation and in these cases that would be better code. Two images, two objects of the same Image class. A class should represent an objects characteristics (properties such as width, height etc.) and the stuff you can do with the object (the methods, resize, crop etc) Images are the perfect place to implement oop for and not stick to procedural code with oop syntax.

From my reading of the code (can't test it here right now), new instances are possible after the first loading of the class and I would strongly recommend that.

[eluser]KeyStroke[/eluser]
So shall I use multiple instances of the class to create multiple thumbnails of an image (and use clear() after each image), or is there another way around this?

I'm kind of confused 8-/

[eluser]-sek[/eluser]
I am confused by the image library as well. This evening I have not had much luck using the image library to upload a file and generate multiple resized versions from it.

I need to let the user upload an image of their choosing, which must be resized to a maximum dimension and then saved with a new name (either the image must be renamed or a copy created with the new name and the old file deleted) that fits a naming pattern.

* The uploaded file must be resized to our maximum dimensions and renamed according to our specific pattern: picture-[userid]-o.jpg for the "original" and a second image created at 48px wide named picture-[userid]-i.jpg for a square icon image.

I do not necessarily want to use the built in thumbnail since I cannot use the naming I want and apparently cannot create more than one image. Here is the code I'm using...it works if I comment one of the images out.

Code:

$img = $this->upload->data();
$id = $this->db_session->userdata('id');

$config['new_image'] = $img['file_path'] .'picture-profile-'. $id .'-i'. $img['file_ext'];
$config['image_library'] = 'gd2';
$config['source_image'] = $img['full_path'];
$config['create_thumb'] = FALSE;
$config['maintain_ratio'] = TRUE;
$config['width'] = 48;
$config['height'] = 48;

$this->load->library('image_lib', $config);

if ( ! $this->image_lib->resize())
{
    echo $this->image_lib->display_errors();
}

$this->image_lib->clear();

$config['new_image'] = $img['file_path'] .'picture-profile-'. $id .'-o'. $img['file_ext'];
$config['image_library'] = 'gd2';
$config['source_image'] = $img['full_path'];
$config['create_thumb'] = FALSE;
//$config['thumb_marker'] = 't';
$config['maintain_ratio'] = TRUE;
$config['width'] = 320;
$config['height'] = 200;

$this->load->library('image_lib', $config);

if ( ! $this->image_lib->resize())
{
    echo $this->image_lib->display_errors();
}

Sorry, it's getting late and I may be a little incoherent...

[eluser]Rick Jolly[/eluser]
-sek, substitute the second $this->load->library('image_lib', $config) with $this->image_lib->initialize();. CI won't create another instance because it maintains one singleton instance of all library classes. You can create another instance by writing $image_lib = new Image_lib();, but only after it has been loaded.