yii2-fotorama-widget

yii2-fotorama-widget copied to clipboard

I use the widget in my project by next way:

...
echo Fotorama::widget(
    [
        'items' => $images,
        'options' => [
            'nav' => 'thumbs',
            'allowfullscreen' => 'true',
            'fit' => 'scaledown',
        ],
    ]
);
...

After that I get <div class="fotorama fotorama1534314224724">...</div> block, which contains all the data.

Now, I would like to add some extra class to the div-block. So, change my code a little:

echo Fotorama::widget(
    [
        'items' => $images,
        'options' => [
            'nav' => 'thumbs',
            'allowfullscreen' => 'true',
            'fit' => 'scaledown',
        ],
        'htmlOptions' => [
            'class' => 'pull-right-md',
        ],
    ]
);

As a result of we have <div class="pull-right-md">...</div> block. Without futurama and fotorama1534314224724. So, I can add the first one by adding it to config:

'htmlOptions' => [
    'class' => 'fotorama pull-right-md',
],

but what should I do with the last one?! As I can realize its name is generated on fly, that is why I can't just add it to config.

Just wrap the widget:

<div class="pull-right-md">
    <?= Photorama::wiget() ?>
</div>

Strange things happen here! If I wrap the code according your answer I get nothing at all.

echo '<div class="pull-right-md">';
echo Fotorama::widget(
    [
        'items' => $images,
        'options' => [
            'nav' => 'thumbs',
            'allowfullscreen' => 'true',
            'fit' => 'scaledown',
        ],
//         'htmlOptions' => [
//             'class' => 'fotorama pull-right-md',
//         ],
    ]
);
echo '</div>';

The div is rendered by the widget but it is completely empty.

<div class="pull-right-md">
    <div id="w0" data-nav="thumbs" data-allowfullscreen="true" data-fit="scaledown" data-auto="false"></div>
</div>

If I remove class="pull-right-md" it works again. Furthermore, if I add the class in DevTool, it applies as it should.

@media (min-width: 992px) {
    .pull-right-md {
        float: right;
    }
}

And the main question - can I add custom class to the widget through its options as declared in the description?