Yii 2.0: yii2-fotorama-widget

fotorama image gallery yii2 widget

Fotorama Yii2 widget

This yii2 extension is a wrapper for the powerful jQuery gallery Fotorama




Install this extension using composer.


php composer.phar require metalguardian/yii2-fotorama-widget "*"

or add

"metalguardian/yii2-fotorama-widget": "*"

to the require section of the composer.json file.


First way:

    $fotorama = \metalguardian\fotorama\Fotorama::begin(
            'options' => [
                'loop' => true,
                'hash' => true,
                'ratio' => 800/600,
            'spinner' => [
                'lines' => 20,
            'tagName' => 'span',
            'useHtmlData' => false,
            'htmlOptions' => [
                'class' => 'custom-class',
                'id' => 'custom-id',
        <img src="http://s.fotorama.io/1.jpg">    
        <img src="http://s.fotorama.io/2.jpg">
        <img src="http://s.fotorama.io/3.jpg">
        <img src="http://s.fotorama.io/4.jpg">
        <img src="http://s.fotorama.io/5.jpg">
    <?php $fotorama->end(); ?>

Second way:

    echo \metalguardian\fotorama\Fotorama::widget(
            'items' => [
                ['img' => 'http://s.fotorama.io/1.jpg', 'id' => 'id-one',],
                ['img' => 'http://s.fotorama.io/2.jpg',],
                ['img' => 'http://s.fotorama.io/3.jpg',],
                ['img' => 'http://s.fotorama.io/4.jpg',],
            'options' => [
                'nav' => 'thumbs',

To use CDNJS put this before run widget, will be used current version:

<?php \metalguardian\fotorama\Fotorama::$useCDN = true; ?>

Or select custom version:

<?php \metalguardian\fotorama\Fotorama::$useCDN = '4.5.0'; ?>

To setup default Fotorama widget options to all galleries on page:

            'nav' => 'thumbs',
            'spinner' => [
                'lines' => 20,
            'loop' => true,
            'hash' => true,

For complete documentation of Fotorama and all widget options please refer to the official Fotorama page


yii2-fotorama-widget is released under the MIT License. See the bundled LICENSE.md for details.


Total 9 comments

#19565 report it
metalguardian at 2015/09/09 06:28am

You need to run in console (terminal) in project root directory:

php composer.phar require metalguardian/yii2-fotorama-widget "*"

or if you already add line "metalguardian/yii2-fotorama-widget": "*" in composer.json you need to run:

php composer.phar update metalguardian/yii2-fotorama-widget

Read about composer https://getcomposer.org/ . This is very useful thing

#19564 report it
vijay p s at 2015/09/09 06:19am
Thank You

@@metalguardian. Thank You so much for the quick reply..

Am new to use the composer.

Where I use this line

composer update metalguardian/yii2-fotorama-widget.


#19563 report it
metalguardian at 2015/09/09 05:14am

Oh! If you try to install using second method you need to run

composer update metalguardian/yii2-fotorama-widget

This will update autoloading files

You shouldn't put files manually, this is responsibility of composer

#19562 report it
vijay p s at 2015/09/09 04:46am

Thanks for the reply..This is the error @metalguardian.

  1. Am add this line in the composer as ""metalguardian/yii2-fotorama-widget": "*"".
  2. I placed the folders in the vendor folder as: \vendor\metalguardian\yii2-fotorama-widget. 3 and I use this code It shows error.
PHP Fatal Erroryii\base\ErrorException
Undefined constant 'metalguardian\fotorama'
#19560 report it
metalguardian at 2015/09/08 02:00pm
what error?

Hi! Can you attach a screenshot with error?

#19559 report it
vijay p s at 2015/09/08 01:04am

Hye all,

I got the error in this line

$fotorama = \metalguardian\fotorama\Fotorama::begin(

how can I solve it. the path stucture also right but it shows me.

#18854 report it
Stefano Mtangoo at 2015/01/23 04:03pm

Thanks for the plugin. A demo will be great!

#18481 report it
Alain L at 2014/11/04 09:24pm
Very good.

This is much, much better than the default bootstrap widget. Nice job.

#17393 report it
Raoul at 2014/06/03 05:21am
great !

Great widget ! Thanks for sharing ....

Leave a comment

Please to leave your comment.

Create extension
No downloadable files yet