[SOLVED] CGridView image sizing

Yii 1.1 General Discussion
1

Hiya,

I have a CGidView list displaying all my users, each of which has its own image url and I want to display a column with their image in it, I’ve found from this topic that I can just give the image url column a ‘type’ of ‘image’ when defining it when I call CGridView. This changes the url text into an image fine but some images are larger than others and I was wondering if there was a way to set the width and height of the image?

So far I have:


$this->widget('zii.widgets.grid.CGridView', array(

	'id'=>'agent-grid',

	'dataProvider'=>$model->with('postcount')->search(),

	'filter'=>$model,

	'columns'=>array(

		array(

			'name'=>'user_image_url',

			'type'=>'image',

		),

		'username',

	),

	//...

));

Thanks,

Stu

2

This is just a guess as I never tried that but you should be able to use the htmlOptions within your column configurations

http://www.yiiframework.com/doc/api/1.1/CGridColumn#htmlOptions-detail

Try this:


$this->widget('zii.widgets.grid.CGridView', array(

        'id'=>'agent-grid',

        'dataProvider'=>$model->with('postcount')->search(),

        'filter'=>$model,

        'columns'=>array(

                array(

                        'name'=>'user_image_url',

                        'type'=>'image',

                        'htmlOptions'=>array('width'=>'30px','height'=>'30px'),

                ),

                'username',

        ),

        //...

));
3

I would extend CGridColumn (similar CLinkColumn) using an image-extension to resize images

4

Hi Haensel,

Thanks for the reply, I tried that, it formats the html options of the <td> element that holds that columns info rather than the <img> tag within it.

I’ve had a little look, and from what I can tell, the CDataColumn ‘Type’ property is an instance of CFormatter, which uses the CHTML ‘Image’ property to render the image.

The CHTML ‘Image’ property has an option for ‘HTMLOptions’ of the <img> tag, but I can’t see how I can set these through the CDataColumn ‘Type’ property, you can see from here, the CDataColumn ‘Type’ property must be a string and doesn’t allow for an array of options to be declared.

Does anyone know how I can declare height and width options for a CGridView column?

Thanks,

Stu

5

Hi mbi,

Thanks for the info, I think you’re right, that’s going to be the only way forward. Damn-it, I was hoping there would be an easy way!

Any ideas on where to start with this one?

Thanks!

Stu

6

Unfortunately, it is not possible, according to the CDataColumn object of the CGridView lib components.





protected function renderDataCellContent($row,$data)

	{

		if($this->value!==null)

			$value=$this->evaluateExpression($this->value,array('data'=>$data,'row'=>$row));

		else if($this->name!==null)

			$value=CHtml::value($data,$this->name);

		

		echo $value===null ? $this->grid->nullDisplay : $this->grid->getFormatter()->format($value,$this->type);

	}

What i normally do is to create a property on the MODEL




public function getThumbnail(){

 // here i return the image

     return CHtml::image('sourtoimage'.$this->user_image_url,'alt of image',array('width'=>48,'height'=>48));

}

Then on the CGridView make sure the type is set as ‘raw’

Cheers

edit:

There is also another way, you can use the htmlOptions of the ROW (td) to set up the image size:




td.myclass img{

   width: '48px';

  height: '48px';

}

Then, as Haensel, said, do




array(

                        'name'=>'user_image_url',

                        'type'=>'image',

                        'htmlOptions'=>array('class'=>'myclass'),

                ),

You can see that htmlOptions are actually related to the TD tag, not its content.




public function renderDataCell($row)

	{

		$data=$this->grid->dataProvider->data[$row];

		$options=$this->htmlOptions;

		if($this->cssClassExpression!==null)

		{

			$class=$this->evaluateExpression($this->cssClassExpression,array('row'=>$row,'data'=>$data));

			if(isset($options['class']))

				$options['class'].=' '.$class;

			else

				$options['class']=$class;

		}

		echo CHtml::openTag('td',$options);

		$this->renderDataCellContent($row,$data);

		echo '</td>';

	}
7

Hi Antonio,

That’s genius! The class method works perfectly, and is the simplest way by far I think.

Thanks guys!

Stu

8

This should be added into the Yii TODO list