Resize Image And Generate Thumbnail Using Codeigniter 3

Read Time:3 Minute, 27 Second

In this post, I would like to share with you how to resize the image and generate a thumbnail image after upload in Codeigniter 3 application. Here I will give you a full example of image upload with resizing in Codeigniter 3 application. we will use the “image_lib” library to resize the image in Codeigniter 3.

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

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

Step 1: Download Codeignitor 3

First of all, You should download the latest version of Codeigniter 3, so if you haven’t download yet then download from here :

CodeIgniter-3.1.11.Zip

FREE DOWNLOAD

Send download link to:

Step 2: Creating Route (optional)

Here, we’ll add new image upload routes. So open the file routes.php and add the code as follows:

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: Creating ImageUpload Controller

now, you will have to create “ImageUpload” controller with function index(), uploadImage() and resizeImage(). so create ImageUpload.php file in this path application/controllers/ImageUpload.phpand put bellow code in this file:

<?php


class ImageUpload extends CI_Controller {


   public function __construct() { 
      parent::__construct(); 
      $this->load->helper(array('form', 'url')); 
   }

   public function index() { 
      $this->load->view('imageUploadForm', array('error' => '' )); 
   } 

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


   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: Creating a View File

Now you will create an imageUploadForm.php view file. In this file, we will write the design of the Html form using form helper and URL helper. So let’s update the following file:

application/views/imageUploadForm.php

<!DOCTYPE html>
<html> 
<head> 
  <title>Resize Image And Generate Thumbnail Using Codeigniter 3</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 folders. First, you have to create “uploads” and inside the uploads folder, you have to create another new folder “thumbnail”.

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

If You Have Any Problem Or Doubts,
Please Do Ask Or Suggest In Comment.

Do Follow Us on:

Facebook.com

Twitter.com

Also Read: Redirect HTTP To HTTPS Using htaccess File

Happy

100 %

Sad

0 %

Excited

0 %

Sleepy

0 %

Angry

0 %

Surprise

0 %

Akash Kothari

I am passionate about my work. Because I love what I do, I have a steady source of motivation that drives me to do my best. In my last job, this passion led me to challenge myself daily and learn new skills that helped me to do better work