Resize And Create Thumbnails in The File Upload Process

Posted on May 12, 2011

0


CodeIgniter framework which is quite popular and widely used (including me also), although the release of each version is quite long: D Here I will try to share knowledge about upload, resize, and create a thumbnail use the existing library in CI. Often when we create a website / web application that uses an image must first define its size (eg 300 × 300), then if there is a need to create new thumbnails for all of us thumbnailnya. However, users are usually reluctant to adjust image sizes have been defined earlier, be a developer who should be bothered .. hehehehe .. But luckily in the CI has provided a simple library used to manipulate this image file. How does it work?

1. Create a file view.php

View.php file is a file that is used to upload images. Approximately example code like this:

1 <form action="fileupload/add" enctype="multipart/form-data" method="post">
2 File : <input type="file" name="userfile" /><br/>
3 <input type="submit" name="submit" value="upload" />

2. Copy the file libraries / Image_lib.php then paste in the folder application / library and rename it to MY_Image_lib.php. After that we change the name of the class:

1 class CI_Image_lib {

be

class MY_Image_lib extends CI_Image_lib {

Then we look at line 37, we edit its value to var $ thumb_maker to “(blank).

3. We create a file controller uploadfile.php

01 Class Uploadfile extends Controller {
02
03  function __construct() {
04  parent::Controller();
05  }
06
07  function add() {
08  /* validasi dan pengecekan saya skip*/
09  ...
10  $config['upload_path'] = $_SERVER['DOCUMENT_ROOT'].'app/image/';
11  $config['allowed_types'] = 'gif|jpg|png|doc|pdf|ppt';
12  $config['max_size']    = '500';
13  $config['max_width']  = '1024';
14  $config['max_height']  = '768';
15  $this->load->library('upload', $config);
16
17  if ( ! $this->upload->do_upload()) {
18  echo 'gagal upload';
19  }
20  else {
21  /* apabila file yang diupload terlalu besar, kita resize ke ukuran yang diinginkan */
22  $config['image_library'] = 'gd2';
23  $config['source_image'] = $_SERVER['DOCUMENT_ROOT'].'app/image/'.$_FILES['userfile']['name'];
24  $config['maintain_ratio'] = FALSE;
25  $config['width'] = 320;
26  $config['height'] = 288;
27
28  $this->load->library('image_lib', $config);
29  $this->image_lib->resize();
30
31  /* setelah diresize kita buat thumbnailnya */
32  $conf['image_library'] = 'gd2';
33  $conf['source_image'] = $_SERVER['DOCUMENT_ROOT'].'app/image/'.$_FILES['userfile']['name'];
34  $conf['new_image'] = $_SERVER['DOCUMENT_ROOT'].'app/thumb/'.$_FILES['userfile']['name'];
35  $conf['create_thumb'] = TRUE;
36  $conf['maintain_ratio'] = FALSE;
37  $conf['width'] = 120;
38  $conf['height'] = 108;
39
40  $this->load->library('image_lib', $conf);
41  $this->image_lib->initialize($conf);
42  $this->image_lib->resize();
43  }
44  }
45 }

4. Run the web browser, try to insert a file with large size. If the file was successfully resized and thumbnails created in the folder thumb / then you have successfully run this tutorial. Please be creative with other cases that you are facing.

Hopefully this simple tutorial useful.

Advertisements
Posted in: CodeIgniter(CI), PHP