How To Pass Array Of Images From Database In Carousel?

I am using the Carousel widget from Yiibooster


    $this->widget(

    'bootstrap.widgets.TbCarousel',

    array(

    'items' => array(

    array(

    'image' => bu('images/first-placeholder830x400.gif'),

    'label' => 'First Thumbnail label',

    'caption' => 'Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.'

    ),

    array(

    'image' => bu('images/second-placeholder830x400.gif'),

    'label' => 'Second Thumbnail label',

    'caption' => 'Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.'

    ),

    array(

    'image' => bu('images/third-placeholder830x400.gif'),

    'label' => 'Third Thumbnail label',

    'caption' => 'Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.'

    ),

    ),

    )

    );

My question, is how can I pass the values of image, label and caption stored from my database dynamically?

I have so far tried the following


$this->widget(

    'ext.YiiBooster.widgets.TbCarousel',

    array(

        'items' => $this->renderPartial('_CarouselContent')

        )

    );



Where _CarouselContent will have the following


array(

                'image' => '',

                'label' => <?php echo CHtml::encode($data->file_name)?>,

                'caption' => <?php echo CHtml::encode($data->name)?>,

            ),




But not sure how to make it work!

I don’t think that’s a valid approach, but you could use a sneaky array_map():




$this->widget('bootstrap.widgets.TbCarousel', array(

    'items'=>array_map(function($record){

        return array(

            'image'=>'',

            'label'=>CHtml::encode($record->file_name),

            'caption'=>CHtml::encode($record->name),

        );

    }, $images),

    ...

));



The code above assumes that $images is an array of active record objects. You’ll also need to set the image URL appropriately.

Seems to be a great trick!

I tried to create a $dataprovider object and tried to pass into the $images but i got the following error


 array_map(): Argument #2 should be an array


/Applications/XAMPP/xamppfiles/htdocs/boatapp/protected/views/vessel/DetailView.php(14)


02 

03 

04 <?php

05 echo $sql;

06 

07 $this->widget('bootstrap.widgets.TbCarousel', array(

08     'items'=>array_map(function($record){

09         return array(

10             'image'=>'',

11             'label'=>CHtml::encode($record->file_name),

12             'caption'=>CHtml::encode($record->name),

13         );

14     }, $dataProvider),

You could pass in $dataProvider->data instead.

Be aware that you’re not going to see any image unless you fill in the image attribute though.

Right, I am just trying to check if I am able to get the image captions though in the source file…

BTW I got the following error


 Trying to get property of non-object


/Applications/XAMPP/xamppfiles/htdocs/boatapp/protected/views/vessel/DetailView.php(11)


01 

02 

03 

04 <?php

05 // echo $sql;

06 

07 $this->widget('bootstrap.widgets.TbCarousel', array(

08     'items'=>array_map(function($record){

09         return array(

10             'image'=>'',

11             'label'=>CHtml::encode($record->file_name),

12             'caption'=>CHtml::encode($record->name),

13         );

14     },$dataProvider->data),

15     

16 ));

17 // $this->widget(

18 //     'ext.YiiBooster.widgets.TbCarousel',

19 //     array(

20 //         'items' => $this->renderPartial('_CarouselContent')

21 //         )

22 //     );

23 




How are you creating your data provider? Is it not a CActiveDataProvider?

In any case, you probably don’t need to use a data provider. A simple array of active record objects should be perfectly fine. Data providers tend to be used when you have a bunch of records that you need to paginate and sort dynamically.

Hi Keith

I create data provider something like this

$sql=‘SELECT * FROM tbl_user’;

$dataProvider=new CSqlDataProvider($sql);

// $dataProvider->getData() will return a list of arrays.

not sure if that is correct way to do!

Aren’t you using active record? What you’ve done above would look more like this:




$users = User::model()->findAll();



If you don’t already use it, read through the active record section of the guide. It’s a powerful utility that will make your application much more maintainable.

In any case, if you’re using a CSqlDataProvider, I suspect you would need to use the following syntax in the function:




        return array(

            'image'=>'',

            'label'=>CHtml::encode($record['file_name']), // <- $record is an array, not an object

            'caption'=>CHtml::encode($record['name']),

        );



You should definitely try to use active record if possible though.

it works!!!!! Thanks Keith

One more issue!! Now I have decided to store my images in my database table as blob objects.


$this->widget('bootstrap.widgets.TbCarousel', array(

    'items'=>array_map(function($record){

        return array(

            'image' => base64_encode($record['file_content']),

                           // 'image' => Yii::app()->baseUrl.'/pics/iphone5c_image.jpg',


         

            'label'=>CHtml::encode($record['file_content']),

            'caption'=>CHtml::encode($record['file_name']),

        );

    },$dataProvider->getdata()),

    

i know that image is passed as a url. but how can i pass it as blob?

You can’t really. What you need to do is create an action which will output the image data. You then use the URL of the action as the image URL.

You’ll need to make sure you set appropriate HTTP headers in the action.

Anyways Thanks Keith,

I got it working… now again another issue!

Bootstrap carousel shows images with different height,How can I force the carousel to stay at a fixed height