Open picture on DetailView::widget on a popup, in Yii2

Question

I want to open image in a popup after clicking, in Yii2, DetailView::widget I already have:

<?= DetailView::widget( [
        'model'      => $user,
        'attributes' => [
            'identity_number',
            [
                'attribute'=>'identity_file',
                'value'=>$user->identity_file,
                'format' => ['image',['width'=>'120','height'=>'120']],
            ],
        ],
    ] ) ?>

It shows the picture, now I want to open in a popup after clicking, I tried following:

<?php
    \yii\bootstrap\Modal::begin([ 'id' => 'identity_file', 'footer' => '<a href="#" class="btn btn-sm btn-primary" data-dismiss="modal">Close</a>', ]);
    \yii\bootstrap\Modal::end();
    ?>

But this is very messy, and I think there should be a cleaner way to do this using DetailView options.

Muhammad Omer Aslam · Answer 1 · 2019-10-10T18:13:55.137

An easier approach will be providing the default img tag inside the modal and providing the source on clicking the image inside DetailView which will load the image inside the modal.

Also, the image can be of any size and so can be your modal window, which can be configured to any size small or large using class .modal-lg or .modal-sm classes, so add the img-responsive class to the default img tag inside the modal window and the images will be responsive relative to the size of the modal window.

So, the first thing to do is add an image tag inside the modal with class img-responsive and src='//:0', you can Read Here why use ://0 for empty image tag

\yii\bootstrap\Modal::begin(['id' => 'identity_file', 'footer' => '<a href="#" class="btn btn-sm btn-primary" data-dismiss="modal">Close</a>']);
echo "<img src='//:0' class='img-responsive'>";
\yii\bootstrap\Modal::end();

Add a class to the image inside the DetailView code, I assume the $user->identity_file has the full path of the file.

<?php echo DetailView::widget(
    [
        'model' => $user,
        'attributes' => [
            'id',
            [
                'attribute' => 'identity_file',
                'value' => $user->identity_file,
                'format' => [
                    'image',
                    ['width' => '120', 'height' => '120', 'class' => 'popup-image'],
                ],
            ],
        ],
    ]
)
?>

Then add the following javascript on top of your view where you are using the DetailView widget.

$js = <<<JS
    $(".popup-image").on('click',function(){
        $("#identity_file img").attr('src', $(this).attr('src'))
        $("#identity_file").modal('show');
    });
JS;
    $this->registerJs($js, View::POS_READY);

now click on the image and you will see a responsive image contained inside the modal window with responsive dimensions.

score 1 · Accepted Answer · answered Oct 09 '19 at 11:17

You can use jquery to open a modal popup and to show image in it.

if ' $user->identity_file ' gives exact image path, then use the below code

<div class="detail_view">
    <?= DetailView::widget( [
        'model' => $user,
        'attributes' => [
            'identity_number',
            [
                'attribute'=>'identity_file',
                'value'=>$user->identity_file,
                'format' => ['image',['width'=>'40','height'=>'40']],
            ],
        ],
    ]) ?>
</div>

<div id="imageModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Image</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <div id="image_holder"></div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).on('click','.detail_view img',function (e) {
        $('#imageModal').modal('show');
        $('#image_holder').html('<img src="'+$(this).attr('src')+'" width="120" height="120">');
    })
</script>

he is using the bootstrap modal already via Widget, and the image needs to be displayed relative to the modal window with aspect ratio, you are using hardcoded `120` width and height which isn't a neat approach (which is what the OP asked for) as the image dimensions can be different and the rendered image will be stretched or pixelated. And you are binding the click to every image inside the `DetailView` not just the desired image — Muhammad Omer Aslam, Oct 09 '19 at 14:25

score 0 · Answer 3 · answered Oct 10 '19 at 07:11

I try something that make my code look better:

<?= DetailView::widget( [
    'model'      => $user,
    'attributes' => [
        'identity_number',
        [
            'attribute'=>'identity_file',
            'format'    => 'raw',
            'value'     => function ( $model ) {
                return $this->render( '_image', [
                    'src'   => $model->identity_file,
                    'title' => $model->title
                ] );
            }
        ],
    ],
] ) ?>

then I added a partial view _image.php like this:

<a href="<?= $src; ?>" data-popup="lightbox"><img src="<?= $src; ?>" style="width: 200px;" class="img-rounded" alt="<?= $title; ?>"></a>

So, It looks better; however, I wonder if it is the right approach to do this or not.

if you want to use `format=>"raw"` then you can simply return the html from inside the closure for the `value` rather than adding a separate view for a single line of code, i thought you want to still use the `format=>"image"` for the column and on clicking on the image you want the popup. — Muhammad Omer Aslam, Oct 10 '19 at 10:09
@MuhammadOmerAslam My view have 3 picture so I used the partial view. but, if there is a good way to use format=>"image" for this matter without using dirty code, it would be better. — Arash Rabiee, Oct 10 '19 at 10:18

Open picture on DetailView::widget on a popup, in Yii2

3 Answers3