Create Image Thumbnails

This tutorial will help you to create “Thumbnail image”. When you upload the images using Yii Framework, You can create thumbnail image. Here i explained step by step.

Step 1: First Create one simple extension for image thumbnail. Add the thumbnail_images.php file into extensions/ThumbnailImages folder.

Step 2: Configure the model for files. Here i just created simple model “Files” for images

class Files extends CFormModel
public function rules()
return array(array('images', 'required'),);
public function attributeLabels(){
return array('images' => 'Images',   );

Step 3: Create the “FilesController” and it contains the all functions for thumbnail images like imagesave, thumbnail creation etc. Filescontroller have two functions. They are create, createimage.

class FilesController extends Controller
public $layout='//layouts/column2'; 
public function actionCreate($id)
$model=new Files;
              foreach($filelist as $thefile)
// pass destination path without letters and image format

public function createimage($width,$height,$destination,$thumb,$type){
$obj_imgl = new thumbnail_images;
$obj_imgl->PathImgOld = $destination.".".$type;
$obj_imgl->PathImgNew = $destination."$thumb.".$type;
$obj_imgl->NewWidth = $width;
$obj_imgl->NewHeight = $height;
if (!$obj_imgl->create_thumbnail_images()) 
echo "error"; 

Step 4: Function “create” will help you to save the uploaded images with timestamp and function “createimage” will help you to create thumbnail images.

Step 5: Thumbnail image sizes are small, medium, large.

Small-s- 100px(width)

Medum-m- 240px(width)

Large-l- 600px(width)

Here i am using the letters s,m,l with image name to differentiate the images. You can configure this value.

Step 6: Using “create” function, We have to save the original images using yii “saveAs” function. Using the saved path (original image) we will create thumbnail images.

Image names based on timestamp and image type.Sample image names:

Timestamp: 123456789

Type: jpg

Original – 123456789.jpg


Medum -123456789m.jpg


After saved the original image, Call the “createimage” function to create thumnail image.

Step 7: “createimage” function will handle the thumbnail image creation. It needs five arguments. They are image width, height, original image saved path till timestampvalue (images/123456789), thumbnail image identifier letter and image type. Using “$destination+”.”+$type”  We can get original image path. Using “$destination+$thumb+”.”+$type” We can create thumbnail images.

Step 8: Create form for this action

/* @var $this FilesController */
/* @var $model Files */
/* @var $form CActiveForm */
<div class="form">
<?php $form=$this->beginWidget('CActiveForm', array(
    'htmlOptions'=>array('enctype' => 'multipart/form-data'),
)); ?>

<p class="note">Fields with <span class="required">*</span> are required.</p>
<?php echo $form->errorSummary($model); ?>

<?php echo $form->labelEx($model,'images'); ?>
<?php $filetype='jpg|jpeg|png|gif';
'name' => 'images',
'duplicate'=>'Duplicate file!',
'denied' => 'Invalid file type', )
echo $form->error($model,'images');
<?php echo CHtml::submitButton('Save',array('name'=>'Files')); ?>
<?php $this->endWidget(); >


This is very simple way to create thumbnail images in yii framework

Leave a Reply

Your email address will not be published. Required fields are marked *