ItSolutionStuff.com

Codeigniter Resize Image and Create Thumbnail Example

By Hardik Savani • November 5, 2023
Codeigniter

In this post, i would like to share with you how to resize image and generate thumbnail image after upload in codeigniter 3 application. Here i will give you full example of image upload with resize in codeigniter 3 application. we will use "image_lib" library for resize image in codeigniter.

We may sometime need to generate thumbnail image for less load time. If you have large with image and you require just 100px width image on listing page then it would be better to create thumbnail image, that way our website will not be take longer time for loading. So if you are develop in codeigniter application then you can learn from here how to generate thumbnail image in our application.

You have to just follow few step to do this, i am going to show you from scratch so just follow bellow few step and get full example of resize image.

Step 1: Download Codeigniter 3

First of all, we should download fresh version of Codeigniter 3, so if you haven't download yet then download from here : Download Codeigniter 3.

Step 2: Create Routes

Here, we will add new routes for image upload. so open routes.php file and add code like as bellow:

application/config/routes.php

<?php

defined('BASEPATH') OR exit('No direct script access allowed');


$route['default_controller'] = 'welcome';

$route['404_override'] = '';

$route['translate_uri_dashes'] = FALSE;


$route['image-upload'] = 'ImageUpload';

$route['image-upload/post']['post'] = "ImageUpload/uploadImage";

Step 3: Create ImageUpload Controller

now, we have to create "ImageUpload" controller with index(), uploadImage() and resizeImage(). so create ImageUpload.php file in this path application/controllers/ImageUpload.php and put bellow code in this file:

application/controllers/ImageUpload.php

<?php


class ImageUpload extends CI_Controller {


/**

* Manage __construct

*

* @return Response

*/

public function __construct() {

parent::__construct();

$this->load->helper(array('form', 'url'));

}


/**

* Manage index

*

* @return Response

*/

public function index() {

$this->load->view('imageUploadForm', array('error' => '' ));

}


/**

* Manage uploadImage

*

* @return Response

*/

public function uploadImage() {


$config['upload_path'] = './uploads/';

$config['allowed_types'] = 'gif|jpg|png';

$config['max_size'] = 1024;

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


if ( ! $this->upload->do_upload('image')) {

$error = array('error' => $this->upload->display_errors());

$this->load->view('imageUploadForm', $error);

}else {


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

$this->resizeImage($uploadedImage['file_name']);


print_r('Image Uploaded Successfully.');

exit;

}

}


/**

* Manage uploadImage

*

* @return Response

*/

public function resizeImage($filename)

{

$source_path = $_SERVER['DOCUMENT_ROOT'] . '/uploads/' . $filename;

$target_path = $_SERVER['DOCUMENT_ROOT'] . '/uploads/thumbnail/';

$config_manip = array(

'image_library' => 'gd2',

'source_image' => $source_path,

'new_image' => $target_path,

'maintain_ratio' => TRUE,

'create_thumb' => TRUE,

'thumb_marker' => '_thumb',

'width' => 150,

'height' => 150

);


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

if (!$this->image_lib->resize()) {

echo $this->image_lib->display_errors();

}


$this->image_lib->clear();

}

}

?<

Step 4: Create View File

In this step we will create imageUploadForm.php view file . In this file we will write design of html form using form helper and url helper. So let's update following file:

application/views/imageUploadForm.php

<!DOCTYPE html>

<html>

<head>

<title>Codeignier 3 Image Upload with Resize Example from Scratch</title>

</head>


<body>


<?php echo $error;?>

<?php echo form_open_multipart('image-upload/post');?>

<input type="file" name="image" size="20" />

<input type="submit" value="upload" />

</form>


</body>

</html>

Now we are ready to run our example.

Now we need to create two folder. First you have to create "uploads" and inside uploads folder you have to create another new folder "thumbnail".

After you run you will get thumbnail image on thumbnail directory.

So let's run and see.

I hop it can help you...

Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

Codeigniter Ajax Pagination using JQuery Example

Read Now →

Codeigniter Multiple Database Connection Example

Read Now →

How to implement and use DataTables in CodeIgniter?

Read Now →

Codeigniter Ajax Form Validation Example

Read Now →

Codeigniter 3 - Basic CRUD application with MySQL Example with Demo

Read Now →

How to Upload and Resize Image in PHP?

Read Now →

Laravel Ajax Crop Image Before Upload using Croppie JS

Read Now →

Codeigniter Drag and Drop Multiple Image Upload Example

Read Now →

Codeigniter Dynamic Dependent Dropdown using Ajax Example

Read Now →

Codeigniter Ajax Infinite Scroll Pagination Example

Read Now →

Codeigniter Ajax CRUD Tutorial Example

Read Now →

Codeigniter Select2 Ajax Autocomplete from Database Example

Read Now →

PHP Crop Image Before Upload using Croppie JS Example

Read Now →

Crop, Resize, Frames etc on Selected Image in PHP using Aviary

Read Now →