Yii 1.1: How to use YiiBooster Bootstrap Gallery



Since version 1.0.4, Yii developers can make use of the image gallery provided by Sebastian Tshan, a great javascript developer that has created some true gems like the jquery file upload plugin.

I couldn't yet include a proper API documentation to the YiiBooster site, I hope that with this simple tutorial I could solve the issues regarding the use of the bootstrap gallery on your projects.



In order to use it, we need to first prepare our views. This tutorial assumes that you are using YiiBooster and that bootstrap.css has been already included.

Register Bootstrap Gallery Image CSS

We register bootstrap css assets via the registerAssetCss method:


Render Provided View

In order to easy the job of fellow developers, we have included the required template for the gallery to display correctly. You can change it at will by following the instructions provided at the plugin docs.

// assuming we are on a view

Register Required Scripts

As with the css assets, we have also provided registerAssetJs to register Bootstrap javascript assets.



Initialize the Image Gallery widget by adding the following data-attributes to a container element containing a set of links to image files with the attribute rel="gallery":

<div id="gallery" data-toggle="modal-gallery" data-target="#modal-gallery" data-filter="*" >
  <a href="http://placekitten.com/500/500" title="kitten" rel="gallery">
      <img src="http://placekitten.com/250/250" rel="list-gallery" />


Final Notes

I truly hope to have the proper API documentation as soon as possible, in order to solve all the doubts that arise about the widgets provided with YiiBooster.

Total 4 comments

#19103 report it
Trejder at 2015/03/17 05:04am
@Louis Gac

YiiBooster is now based on Twitter Bootstrap 3, and this tutorial is about earlier version of YiiBooster, which is based on Twitter Bootstram 2.3.x. And what you see outdated?

If new version of any kind of software is published, should we throw away all docs and tutorials to all earlier versions.

Twitter Bootstrap 3 brings a lot of cool new stuff, but it also reorganizes many things and for really large projects, migriation Twitter Bootstrap 2 --> Twitter Bootstrap 3 isn't simply an option.

There are many developers and projects still using Twitter Bootstrap 2, believe me.

#17633 report it
Louis Gac at 2014/07/09 10:51am
Old version of YiiBooster

YiiBooster is now base on boostrap 3. So, this tutorial is outdated.

#13832 report it
Stefano Mtangoo at 2013/06/29 02:31pm
Cannot display correctly

See Image below for more reference. But dialog is hidden up the browser window. Is there setting to tell dialog not to hide itself?

The Detailed info Here

#10916 report it
yasen at 2012/12/03 02:10am

Thanks for sharing your knowledge with the community, Antonio.

Leave a comment

Please to leave your comment.

Write new article