Upload Image and Create Multiple Thumbnail Sizes in CodeIgniter

upload_file_featured

Just the other day I was trying to upload an image and create multiple resized copies of that image to be used in different locations in a website. I was using the CodeIgniter Image Manipulation Class and it worked perfectly and I was able to get a resized image, however when I tried to create more than one resized image it didn’t work. At the beginning, I thought that calling the resize function twice will produce two resized images but that didn’t actually work and after doing some research I found out that I have to initialize the image_lib class every time I call the resize() function. Because of this issue, I decided to make a complete tutorial about it and show you how to create multiple resized images.

This will be a complete CodeIgniter tutorial and as the title indicates I will show you how to actually upload the image before performing any image manipulation.

For this tutorial you need a copy of CodeIgniter, a view, controller and a model file. The view file will contain a simple form with a file field and submit button.

Let’s start by creating the view page.

If you are only interested in the multiple thumbnail generation jump to step 3.

Step 1 – The View

Creating the view file (main.php) which will prompt the user for a file to upload.

<?php
	$image = array(
		'name'	=>  'userfile',
		'id'    =>  'userfile',
		);
		
	$submit = array(
		'name'  => 'submit',
		'id'    => 'submit',
		'value' => 'Upload'
		);
?>
<?php echo form_open_multipart('upload/upload_image', 'id=upload_file'); ?>
<?php echo form_upload($image); ?>
<?php echo form_submit($submit); ?>
<?php echo form_close(); ?>

Step 2 – The Controller

Creating the controller file (upload.php) which will execute the upload_image() function when the submit button is clicked.

<?php
class Upload extends CI_Controller{
    public function upload_image(){
        $this->upload_model->do_upload(); //execute the upload function
    }
}

Step 3 – The Model

Creating the model file (upload_model.php) which will handel the file upload and the multiple thumbnail generation.

<?php
class User_model extends CI_Model{
	var $original_path;
	var $resized_path;
	var $thumbs_path;

	//initialize the path where you want to save your images
	function __construct(){
		parent::__construct();
		//return the full path of the directory
		//make sure these directories have read and write permessions
		$this->original_path = realpath(APPPATH.'../uploads/original');
		$this->resized_path = realpath(APPPATH.'../uploads/resized');
		$this->thumbs_path = realpath(APPPATH.'../uploads/thumbs');
	}

	function do_upload(){
		$this->load->library('image_lib');
		$config = array(
		'allowed_types'     => 'jpg|jpeg|gif|png', //only accept these file types
		'max_size'          => 2048, //2MB max
		'upload_path'       => $this->original_path //upload directory
	);

		$this->load->library('upload', $config);
		$image_data = $this->upload->data(); //upload the image

		//your desired config for the resize() function
		$config = array(
		'source_image'      => $image_data['full_path'], //path to the uploaded image
		'new_image'         => $this->resized_path, //path to
		'maintain_ratio'    => true,
		'width'             => 128,
		'height'            => 128
		);

		//this is the magic line that enables you generate multiple thumbnails
		//you have to call the initialize() function each time you call the resize()
		//otherwise it will not work and only generate one thumbnail
		$this->image_lib->initialize($config);
		$this->image_lib->resize();

		$config = array(
		'source_image'      => $image_data['full_path'],
		'new_image'         => $this->thumbs_path,
		'maintain_ratio'    => true,
		'width'             => 36,
		'height'            => 36
		);
		//here is the second thumbnail, notice the call for the initialize() function again
		$this->image_lib->initialize($config);
		$this->image_lib->resize();
	}
}

Conclusion

The most important point for those looking to generate multiple thumbnail sizes is to call

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

before calling

$this->image_lib->resize();

Thank you for reading. If you like this post please share, tweet, +1 etc.

You can also let me know if this post was helpful to you by leaving a comment.

If you have any questions or would like me to discuss a certain topic please send me a message or simply just leave a comment below!

Upload Image and Create Multiple Thumbnail Sizes in CodeIgniter
35 votes, 4.20 avg. rating (83% score)
  • Posted in: CodeIgniter
Husamaldin Tayeh

Posted by

Husamaldin is a computer programmer, blogger, entrepreneur and an overall thinker. He is the founder and editor of Coders Mount. He loves everything about computers and programming. Find out more about him here or follow him on Twitter Google+ | LinkedIn.

  • neha

    this code in controller is not working, nor it gives any error.. please help..

    i have already included image_lib with the class name and file name as Image_lib

  • Haveno

    Nice, and how i do that with a database? =)

  • EMA

    the controller not work and didn’t give any error ….. image not load in directory Why ? please help

    • http://www.codersmount.com/ Husamaldin Tayeh

      Hi EMA,
      Please make sure the directory is writable. You need to give write permission for the directory you are uploading to. Please try and let me know if this works.

  • Biki Kundu

    how im insert to the database differnt coloum for differnt size

    • http://www.codersmount.com/ Husamaldin Tayeh

      This is how I would use a database table to hold uploaded images:
      1- Get the image file name and insert it into the appropriate column in the database table.
      2- Create as many thumbnails as you like and upload each size to a different folder.
      3- When you retrieve the data from the database just link to the correct folder name.

  • Diogo Guedes

    Hello First thanks for sharing your knowledge, for your code helped my with a problem she was having so he’s not working right away, I had to adjust, so I put here the code with small changes and working 100% and Thanks again!

    upload_model.php

    original_path = realpath(APPPATH.’../uploads/original’);

    $this->resized_path = realpath(APPPATH.’../uploads/resized’);

    $this->thumbs_path = realpath(APPPATH.’../uploads/thumbs’);

    }

    public function do_upload()

    {

    $this->load->library(‘image_lib’);

    $config = array(

    ‘allowed_types’ => ‘jpg|jpeg|png’,

    ‘max_size’ => 2048,

    ‘upload_path’ => $this->original_path //local salvo

    );

    $this->load->library(‘upload’, $config);

    $this->upload->do_upload();

    $image_data = $this->upload->data();

    $config = array(

    ‘source_image’ => $image_data[‘full_path’], //path to the uploaded image

    ‘new_image’ => $this->resized_path, //path to

    ‘maintain_ratio’ => true,

    ‘width’ => 128,

    ‘height’ => 128

    );

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

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

    $this->image_lib->resize();

    $config = array(

    ‘source_image’ => $image_data[‘full_path’],

    ‘new_image’ => $this->thumbs_path,

    ‘maintain_ratio’ => true,

    ‘width’ => 36,

    ‘height’ => 36

    );

    //here is the second thumbnail, notice the call for the initialize() function again

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

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

    $this->image_lib->resize();

    return $config;

    }

    }

  • omkar hendre

    i want to store image into mysql database i used longdb datatype give me tutorial link

  • http://cleartuts.blogspot.com Pradeep Khodke

    Nice.. tutorial…