Yii 1.1: Displaying image in a CGridView column.

14 followers

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',
    'id'=>'expenses-grid',
    'dataProvider'=>$model->search(),
    'template'=>"{items}",
    'columns'=>array(
 
                  array(
            'name'=>'image',
            'type'=>'html',
            'value'=>'(!empty($data->image))?CHtml::image(Yii::app()->assetManager->publish('.$assetsDir.'$data->image),"",array("style"=>"width:25px;height:25px;")):"no image"',
 
        ),
        array(
            'class'=>'bootstrap.widgets.BootButtonColumn',
            'template' => '{update} {delete}',
            'buttons' => array(
                'update' => array(
                    'label'=> 'Update',
                    'options'=>array(
                        'class'=>'btn btn-small update'
                    )
                ),
                'delete' => array(
                    'label'=> 'Delete',
                    'options'=>array(
                        'class'=>'btn btn-small delete'
                    )
                )
            ),
            'htmlOptions'=>array('style'=>'width: 80px'),
        )
    ),
)); ?>

-Sirin k

Total 5 comments

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

@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
Fine.

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: 45,118 times
  • Created on: May 15, 2012
  • Last updated: May 15, 2012
  • Tags: CGridView, image