Upload and Create Image Thumbnails using CodeIgniter

The capability of uploading and create image thumbnails is one of the most important requirements for most web application developers and Codeigniter provides file upload and file resize feature. The Codeigniter Library for image Upload and Resize Image is very easy to use. Here are step-by-step instructions on how to upload and create thumbnails using CodeIgniter. I will show you with this article how to upload and create image thumbnails using CodeIgniter.

Table of Contents

Advantages of Upload and Create Image Thumbnails using CodeIgniter:

The thumbnail is a small version of the image that used to appear on the web page as a smaller copy.
Thumbnail helps to save bandwidth
Reduce page load time

The Image Manipulation class of CodeIgniter helps to resize the image and build thumbnails before uploading. Remember the file structure before you start implementing the image upload feature in CodeIgniter.

ALSO SEE: Reduce Image Size Before Upload Using PHP


codeigniter_upload_create_image_thumbnail/
├── application/
│   ├── Config/
│   │   └── autoload.php  
|   ├── controllers/
│   │   └── Upload.php
│   └── views/
│       └── upload/
│           └── index.php
└── uploads/
    └── images/
        └── thumb/

codeigniter_upload_create_image_thumbnail/

├── application/

│ ├── Config/

│ │ └── autoload.php

| ├── controllers/

│ │ └── Upload.php

│ └── views/

│ └── upload/

│ └── index.php

└── uploads/

└── images/

└── thumb/

Config

In the config / autoload.php file, define which helper you want to automatically load on each request. For this example CodeIgniter image upload script, specify automatic loading of the URL helper.


$autoload['helper'] = array('url');

$autoload['helper'] = array('url');

Controller (Upload.php)

Copy and Paste below code in the Upload.php file. The Upload controller handles the image upload and resizes functionality.


<?php 
defined('BASEPATH') OR exit('No direct script access allowed'); 
 
class Upload extends CI_Controller{ 
     
    function index(){ 
        $thumb_msg = $status = $status_msg = $thumbnail = $org_image_size = $thumb_image_size = ''; 
        $data = array(); 
 $uploadPath = 'uploads/images/'; 
        // If the file upload form submitted 
        if($this->input->post('submit')){ 
            if(!empty($_FILES['image']['name'])){ 
                // File upload config 
                $config['upload_path']   = $uploadPath; 
                $config['allowed_types'] = 'jpg|jpeg|png'; 
                 
                // Load and initialize upload library 
                $this->load->library('upload', $config); 
                 
                // Upload file to server 
                if($this->upload->do_upload('image')){ 
                    $uploadData = $this->upload->data(); 
                    $uploadedImage = $uploadData['file_name']; 
                    $org_image_size = $uploadData['image_width'].'x'.$uploadData['image_height']; 
                     
                    $source_path = $uploadPath.$uploadedImage; 
                    $thumb_path = $uploadPath.'thumb/'; 
                    $thumb_width = 280; 
                    $thumb_height = 175; 
                     
                    // Image resize config 
                    $config['image_library']    = 'gd2'; 
                    $config['source_image']     = $source_path; 
                    $config['new_image']         = $thumb_path; 
                    $config['maintain_ratio']     = FALSE; 
                    $config['width']            = $thumb_width; 
                    $config['height']           = $thumb_height; 
                     
                    // Load and initialize image_lib library 
                    $this->load->library('image_lib', $config); 
                     
                    // Resize image and create thumbnail 
                    if($this->image_lib->resize()){ 
                        $thumbnail = $thumb_path.$uploadedImage; 
                        $thumb_image_size = $thumb_width.'x'.$thumb_height; 
                        $thumb_msg = '<br/>Thumbnail created!'; 
                    }else{ 
                        $thumb_msg = '<br/>'.$this->image_lib->display_errors(); 
                    } 
                     
                    $status = 'success'; 
                    $status_msg = 'Image has been uploaded successfully.'.$thumb_msg; 
                }else{ 
                    $status = 'error'; 
                    $status_msg = 'The image upload has failed!<br/>'.$this->upload->display_errors('',''); 
                } 
            }else{ 
                $status = 'error'; 
                $status_msg = 'Please select a image file to upload.';  
            } 
        } 
         
        // File upload status 
        $data['status'] = $status; 
        $data['status_msg'] = $status_msg; 
        $data['thumbnail'] = $thumbnail; 
        $data['org_image_size'] = $org_image_size; 
        $data['thumb_image_size'] = $thumb_image_size; 
         
        // Load form view and pass upload status 
        $this->load->view('upload/index', $data); 
    } 
}

<?php

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

class Upload extends CI_Controller{

function index(){

$thumb_msg = $status = $status_msg = $thumbnail = $org_image_size = $thumb_image_size = '';

$data = array();

$uploadPath = 'uploads/images/';

// If the file upload form submitted

if($this->input->post('submit')){

if(!empty($_FILES['image']['name'])){

// File upload config

$config['upload_path'] = $uploadPath;

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

// Load and initialize upload library

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

// Upload file to server

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

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

$uploadedImage = $uploadData['file_name'];

$org_image_size = $uploadData['image_width'].'x'.$uploadData['image_height'];

$source_path = $uploadPath.$uploadedImage;

$thumb_path = $uploadPath.'thumb/';

$thumb_width = 280;

$thumb_height = 175;

// Image resize config

$config['image_library'] = 'gd2';

$config['source_image'] = $source_path;

$config['new_image'] = $thumb_path;

$config['maintain_ratio'] = FALSE;

$config['width'] = $thumb_width;

$config['height'] = $thumb_height;

// Load and initialize image_lib library

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

// Resize image and create thumbnail

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

$thumbnail = $thumb_path.$uploadedImage;

$thumb_image_size = $thumb_width.'x'.$thumb_height;

$thumb_msg = '<br/>Thumbnail created!';

}else{

$thumb_msg = '<br/>'.$this->image_lib->display_errors();

}

$status = 'success';

$status_msg = 'Image has been uploaded successfully.'.$thumb_msg;

}else{

$status = 'error';

$status_msg = 'The image upload has failed!<br/>'.$this->upload->display_errors('','');

}

}else{

$status = 'error';

$status_msg = 'Please select a image file to upload.';

}

// File upload status

$data['status'] = $status;

$data['status_msg'] = $status_msg;

$data['thumbnail'] = $thumbnail;

$data['org_image_size'] = $org_image_size;

$data['thumb_image_size'] = $thumb_image_size;

// Load form view and pass upload status

$this->load->view('upload/index', $data);

}

do_upload() function is used to perform upload operation using the Upload library.

Set preferences for Image_lib class

image_library – The image library to be used for image manipulation.
source_image – Absolute path of the source image.
new_image – Absolute path where the image copy will be saved.
maintain_ratio – Specify whether to maintain the aspect ratio of the original image.
width – Set width of the image.
height – Set height of the image.

The resize() function is used to resize the original image and create a thumbnail image using the Image_lib library.

View (`upload/index.php`)

Copy and pastes the below code to create an HTML form to upload the image files. If file upload is successful, the image thumbnail is displayed on the webpage.


<!-- File upload form -->
<form action="" method="post" enctype="multipart/form-data">
    <label>Choose Image File:</label>
    <input type="file" name="image">
    <input type="submit" name="submit" value="UPLOAD">
</form>

<!-- Display upload status -->
<div class="result">
    <?php if(!empty($status)){ ?>
        <p class="status-msg <?php echo $status; ?>"><?php echo $status_msg; ?></p>
    <?php if(!empty($thumbnail)){ ?>
    <?php if(!empty($thumbnail)){ ?>
        <div class="info">
            <p>Original Image Size: <?php echo $org_image_size; ?></p>
            <p>Created Thumbnail Size: <?php echo $thumb_image_size; ?></p>
        </div>
        <div class="thumb">
            <img src="<?php echo base_url($thumbnail); ?>"/>
        </div>
    <?php } ?>
</div>

<label>Choose Image File:</label>

</form>

<?php if(!empty($status)){ ?>

<?php if(!empty($thumbnail)){ ?>

<p>Original Image Size: <?php echo $org_image_size; ?></p>

<p>Created Thumbnail Size: <?php echo $thumb_image_size; ?></p>

</div>

</div>

<?php } ?>

</div>

jQuery to Preview and Rotate an Image Before Upload using PHP

Conclusion:

Our article script will help you integrate image uploading with resize and thumbnail features into CodeIgniter. You can use it for many purposes for which the image file is required for upload.

Are you want to get implementation help, or modify or extend the functionality of this script? Submit a paid service request

Pradeep Maurya

Pradeep Maurya is the Professional Web Developer & Designer and the Founder of “Tutorials website”. He lives in Delhi and loves to be a self-dependent person. As an owner, he is trying his best to improve this platform day by day. His passion, dedication and quick decision making ability to stand apart from others. He’s an avid blogger and writes on the publications like Dzone, e27.co