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

<?php
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.

<?php
Yii::import('application.extensions.ThumbnailImages.thumbnail_images');
class FilesController extends Controller
{
public $layout='//layouts/column2'; 
public function actionCreate($id)
{
$model=new Files;
if(isset($_POST['Files']))
{           
$filelist=CUploadedFile::getInstancesByName('fileurl');
if($filelist){
              foreach($filelist as $thefile)
{
$image=$thefile;
$imagetime=time();                    
$type=$thefile->extensionName;     
$destination=Yii::app()->basePath."/../simages/$imagetime"; 
if($image->saveAs($destination.'.'.$type)){
// pass destination path without letters and image format
                        $this->createimage(100,'',$destination,'s',$type);
$this->createimage(240,'',$destination,'m',$type);
$this->createimage(600,'',$destination,'l',$type);          
}
}                                   
}
        }
$this->render('create',array('model'=>$model,));
}

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;
if($height!=''){
$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

Small-123456789s.jpg

Medum -123456789m.jpg

Large-123456789l.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

<?php
/* @var $this FilesController */
/* @var $model Files */
/* @var $form CActiveForm */
?>
<div class="form">
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'files-form',
'enableAjaxValidation'=>false,
    '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';
$this->widget('CMultiFileUpload', 
array('model'=>$model,
'name' => 'images',
'max'=>5,
'accept'=>$filetype,
'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