CODEWITHSUNDEEP
yii2detailview
Arash Rabiee
Arash Rabiee

Reputation: 1099

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

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.

Upvotes: 0

Views: 1139

Answers (3)

Muhammad Omer Aslam
Muhammad Omer Aslam

Reputation: 23788

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.

Upvotes: 1

Arash Rabiee
Arash Rabiee

Reputation: 1099

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.

Upvotes: 0

Ajil MV
Ajil MV

Reputation: 58

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>

Upvotes: 1

Related Questions