Yii 1.1: Displaying image in a CGridView column.


This is a simple example of how we can display images in CGridviews.Imagine that you have an image field in your table ie either a location field or a blob type field used to store the images.

$assetsDir = dirname(__FILE__).'/../assets'; /*Assume that you have a folder named assets inside the protected folder used to store the images */
<?php $this->widget('bootstrap.widgets.CGridView', array(
    'type'=>'striped bordered condensed',
            'value'=>'(!empty($data->image))?CHtml::image(Yii::app()->assetManager->publish('.$assetsDir.'$data->image),"",array("style"=>"width:25px;height:25px;")):"no image"',
            'template' => '{update} {delete}',
            'buttons' => array(
                'update' => array(
                    'label'=> 'Update',
                        'class'=>'btn btn-small update'
                'delete' => array(
                    'label'=> 'Delete',
                        'class'=>'btn btn-small delete'
            'htmlOptions'=>array('style'=>'width: 80px'),
)); ?>

-Sirin k

Yii developer

Total 5 comments

#10624 report it
cgsmith at 2012/11/08 02:55pm

@sirin k: another excellent example. I love it and it works great. How would I go about displaying a button with a modal pop-up of the image?

I am using bootstrap if that helps.

#8439 report it
sirin k at 2012/06/03 11:25am

thanks for the extension.

#8435 report it
Boaz at 2012/06/03 06:54am
can be achieved also using this extension

I've just released http://www.yiiframework.com/extension/pclinkbutton/, which does very similar to what you needed to.

#8184 report it
sirin k at 2012/05/15 07:05am
No need of bootstrap

Its not necessary yout to use the bootstrap but just used it my example.thats all.

#8182 report it
smarteng at 2012/05/15 06:16am
need bootstrap

need bootstrap :http://www.yiiframework.com/extension/bootstrap/ ?

Leave a comment

Please to leave your comment.

Write new article
  • Written by: sirin k
  • Category: How-tos
  • Yii Version: 1.1
  • Votes: +13 / -1
  • Viewed: 55,044 times
  • Created on: May 15, 2012
  • Last updated: Feb 28, 2015
  • Tags: CGridView, image