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

[eluser]-sek[/eluser]
Thanks. That worked. For reference, this is the code.

Code:

/**
             * Create thumbnail and original image. Rename to
             * format specifying user identity.
             */

            $data = array('upload_data' => $this->upload->data());
                
            $img = $this->upload->data();

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

            // create profile icon image
            $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();
            }

            // create original image
            $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->image_lib->initialize($config);

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

                $this->load->view('picture_upload_success', $data);
            }

            // delete uploaded image
            unlink($img['full_path']);

[eluser]SitesByJoe[/eluser]
[quote author="Bramme" date="1216576255"]

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';
    }
    ....

[/quote]

Bramme (or anyone else),

Would you be so kind as to explain the calculations you use to figure our your resizing? I have some weird sizes to make my thumbnails into (squares AND rectangles) and understanding the math would free me to finish my scripts.

Sizes I need right now from the original:

582 x 350
100 x 75
50 x 50

Of course I'll never know what size image I'm starting with...

Thanks!

[eluser]Bramme[/eluser]
I'm going to assume that you'll need those exact sizes without aspect ratio distortion. This means that you'll have to resize first and then crop.

Here's how I approach it (logic only, no code, only for the first size, you should be able to figure out the rest):

- Upload the image and get it's width and height. Say it's 1024 by 786, so it's ar is 1.3 : 1
- The intended size is 582 x 350, ar (aspect ratio) 1.66 : 1
- Now you need to figure out if you'll need to crop horizontally or vertically, seeing as the original's aspect ratio is smaller than the inteded size, you'll need to crop vertically. A higher AR (which means it's more of a panorama image) will need horizontal cropping.
In php you can do this with simple math!
- We need to crop vertically, so we'll want to resize based on width. Resize your image to a width of 582, keep the aspect ratio and use create_thumb, making sure you got a copy and don't waste your original (you'll probably want to keep that...).
- Now you should have an image with a size of about 582*447 pixels.
- All that's left to do is crop now. Time to calculate the x_axis, y_axis, width and height. We know the x_axis has to be 0 and the width 582 (as thats' what we ended up with our resize). Our height has to be 350, so all that's left now is to ($orig_height - 350) / 2 which will give you your y_axis. Now crop.

I hope that's about clear enough. The only thing I can do to make it more clear is to give you the actual code...

[eluser]SitesByJoe[/eluser]
Thank you very much for setting me on the right path to bust this out!

[eluser]reyntjensw[/eluser]
What will happen with the original file (when a file is being uploaded)? Is it being used or being removed?
I'm trying to remove the original file, because I'm not going to use it.
All of the resizing is going fine, but the removal of the original file is a pain in the ***.

Does the upload library has some magic function not to create an original file?

Code:

$config['upload_path'] = realpath(APPPATH . "../images/photoalbum/");
        $config['allowed_types'] = 'gif|jpg|png';
        $config['max_size']    = '10000';

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

        $this->upload->do_upload();
        $file_data = $this->upload->data();

        $data = array(
                'photoalbum_category_id' => $this->input->post("photoalbum_category_id"),
                'description' => $this->input->post("description"),
                'file_name'      => $file_data['file_name']
        );
        $this->photoalbum_model->insert($data);

        $dbArr['cat'] = $this->photoalbum_category_model->get_all();

        $maxID = $this->photoalbum_model->getMax();
        foreach ($maxID->result() as $row) {
            $highestID= $row->id;
        }


        $thumb_name = $highestID.$file_data['raw_name']."-thumb".$file_data['file_ext'];
        $big_name = $highestID.$file_data['raw_name'].$file_data['file_ext'];


        $echt = $file_data['full_path'];
        $config = array(
                'image_library' => 'gd2',
                'source_image' => $file_data['full_path'],
                'new_image' => realpath(APPPATH . "../images/photoalbum/"),
                'maintain_ration' => true,
                'width' => 450,
                'height' => 500,
                'new_image' => $big_name

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

        echo $this->image_lib->display_errors();
        $config = array(
                'image_library' => 'gd2',
                'source_image' => $file_data['full_path'],
                'new_image' => realpath(APPPATH . "../images/photoalbum/thumbs/"),
                'maintain_ration' => true,
                'width' => 150,
                'height' => 100,
                'new_image' => $thumb_name
        );

        $this->image_lib->initialize($config);
        $this->image_lib->resize();
        $this->image_lib->clear();

Thanks

[eluser]SitesByJoe[/eluser]
I don't know of any function to "not" use the original image, but it'd be easy enough to add something like this to your code to remove the original:

Code:

unlink($file_data['your_file_path']);

Truthfully, I don't even use the upload component (a habit I started in CI 1.4!) as I had path trouble and instead did this, well this is a snippet anyway:

Code:

if ($file['name'] > '')
{
        $uploadDir = 'uploads/my_folder/';
        $filename = $id . '-' . $file['name'];
        $path = $uploadDir . $filename;        
        
        // overwrite any pre-existing files                
        unlink($path);
        
        // if we can now save our new file    
        if (move_uploaded_file($_FILES['userfile']['tmp_name'], $path)) // MY NON-CI UPLOAD
        {        
                $data = array(
                        'portfolio_id' => $id,
                        'image_path' => $path,
                        'caption' => $this->input->post('caption'),
                        'sort_order' => 99
                );
                
                // if so save the path
                $this->load->model('Photos_model');
                $this->Photos_model->insert_photo($data);

                // make a thumbnail of our photo
                $this->load->library('image_lib');                        
                $config['image_library'] = 'GD2';
                $config['source_image'] = $path;
                $config['create_thumb'] = TRUE;
                $config['thumb_marker'] = '_tmb';
                $config['quality'] = '100%';
                $config['width'] = 100;
                $config['height'] = 100;                
                $this->image_lib->initialize($config);
                $this->image_lib->resize();                
        }    
}

[eluser]Unknown[/eluser]
Hi All

Noob Developer here, just want to say thanks...

Your posts have answered all my questions...