how to open image in modal window in list view? #1416
Replies: 2 comments
-
|
Backpack’s default behavior for the image column is to open the image in a new tab when clicked. There is no built-in option to open the image in a modal window directly from the column definition. This has been discussed in the Backpack community, and the maintainers have decided not to complicate the image column with modal logic by default, preferring the simplicity of opening in a new tab instead. However, it is technically possible to implement this yourself with some custom code and JavaScript, but you would need to override the default column view and add your own modal logic. A recommended approach from the Backpack team is to create a custom column or button that triggers a modal. The modal code should be pushed to the after_scripts stack so that it is rendered directly under the
For example, your custom column could look like this (simplified): <a href="javascript:void(0);" onclick="openImageModal('{{ asset('storage/' . $entry->image) }}')">
<img src="{{ asset('storage/' . $entry->image) }}" style="height: 40px;">
</a>And in your after_scripts stack (or a custom widget): @push('after_scripts')
<div class="modal fade" id="imageModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<img id="modalImage" src="" style="width: 100%;">
</div>
</div>
</div>
</div>
<script>
function openImageModal(src) {
$('#modalImage').attr('src', src);
$('#imageModal').modal('show');
}
</script>
@endpushImportant notes:
If you need more details or a step-by-step guide, let me know! ℹ️ Please note our AI Bot does not reply to follow-ups, this will be the only AI answer in this thread. If the AI helped you find the answer, please mark it as answered or write details below so it can learn. Then close the conversation. If not, please give more information for when a human reads this. ℹ️ Relevant sources: Github Issue (closed): [Bug] ListOperation modal no longer showing when ellipsis is clicked |
Beta Was this translation helpful? Give feedback.
-
|
Then maybe there is a way to change column width in order to make image bigger? |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
in setupListOperation I have image field
CRUD::column('image')->type('image')->label('Изображение')->disk('public');When click on the image it opens in a new page.
How to do it opens in modal window?
Beta Was this translation helpful? Give feedback.
All reactions