Bootstrap Thumbnails

Yii 1.1 Extensions
1

Hi,

Can anyone point a newbie to an example that may help me out?

I’m trying to use the bootstrap.widgets.TbThumbnails widget in conjunction with images that have been uploaded using the redactor widget to display thumbnails of the uploaded images within a view.

Is there anyone out there that could supply me an example or at least point me in the right direction?

I’ve trawled the docs and cant figure it.

BTW awesome extension!

2

Hi Davos,

I’m new on Yii framework as well and also experienced some problems to understand how this component works.

It’s pretty simple and I’ll explain how it is working on my project.

I have a table called "images" with 3 fields (id, image_name, image_tooltip). The images are stored in a folder called "example" inside "images" folder (images/example) and the table is just to keep the name of the images that I have into this folder (image1.jpg).

I also have a view called "store.php", (protected/views/store/store.php).

the content of this view is:

<div class="form">

<?php $form=$this->beginWidget(‘CActiveForm’, array(

'id'=&gt;'store-form',


'enableAjaxValidation'=&gt;false,

));

&#036;dataProvider = new CActiveDataProvider('store'); // that's the table





&#036;this-&gt;widget('bootstrap.widgets.TbThumbnails', array(


	//'dataProvider'=&gt;&#036;thumbDataProvider,


	'dataProvider'=&gt;&#036;dataProvider,


	'template'=&gt;&quot;{items}&#092;n{pager}&quot;,


	'itemView'=&gt;'_formTemplate2',


));





?&gt;

<?php $this->endWidget(); ?>

</div><!-- form -->

As you can notice, I have another view called "_formTemplate2" (protected/views/store/_formTemplate2.php) where the component will render my images.

The content of this file is:

<li>

<a href="#" class=“thumbnail” rel=“tooltip” data-title="<?=$data[‘image_tooltip’]?>" data-original-title="" title="">

 &lt;img src=&quot;&lt;?php echo Yii::app()-&gt;getBaseUrl() .'/&#46;&#46;/images/example/'. &#036;data['image_name'] ?&gt;&quot; alt=&quot;&quot;&gt;

</a>

</li>

That’s pretty much what I’ve done to make it work.

If you have any doubts feel free to contact me and I’ll try to help u :).

I hope I could help you to solve you doubts.

3

look here for more informations.

http://www.cniska.net/yii-bootstrap/index.html#tbThumbnails

4

Hey,

Not sure if this thread is still watched upon. How can I do the same by returning images from the folder? I tried to return an array of image urls. But that doesn’t work.

$this->widget(‘bootstrap.widgets.TbThumbnails’, array(

            'dataProvider'=&gt;new CArrayDataProvider(array('images'=&gt;array('1'=&gt;'/&#46;&#46;/images/carousel/1.jpg','2'=&gt;'/&#46;&#46;/images/carousel/ground-2.jpg'))),


            'template'=&gt;&quot;{items}&#092;n{pager}&quot;,


            'itemView'=&gt;'_thumbs',


        ));

And my _thumbs.php is:

&lt;li class=&quot;span3&quot;&gt;


    &lt;?php var_dump(&#036;data); ?&gt;


    &lt;img src=&quot;&lt;?php echo &#036;data['images'] ?&gt;&quot; alt=&quot;&lt;?php echo &#036;data ?&gt;&quot;&gt;


&lt;/li&gt;

My error is:

Undefined index: images

How do I access the image urls here?

5

Hi Mate,

you can access the image urls using the numbered index, just like that:

<img src="<?php echo $data[1] ?>" alt="<?php echo $data[1] ?>">

You gonna need some kind of control to change the index number in the iteration but I’m not sure how to do that…