A bigger image should be loaded in a dialog box when you click on the small image.

[Krissh]

<li class="mb-10 ms-6">

    <span class="absolute flex items-center justify-center w-6 h-6 bg-blue-100 rounded-full -start-3 ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900">

        {{ substr($comment->user->name, 0, 1) }}

    </span>

    <div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-700 dark:border-gray-600">

        <div class="items-center justify-between mb-3 sm:flex">

            <time class="mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0">{{ $comment->created_at }}</time>

            <div class="text-sm font-normal text-gray-500 dark:text-gray-300">

                {{ $comment->user->name }} bild av ärendet

            </div>

        </div>

        <div id="image-read-view-{{ $comment->id }}" data-id="{{ $comment->id }}">

            <div class="flex justify-end">

                @if($user->user_role == 3)

                    <button id="image-edit-btn-{{ $comment->id }}" class="btn btn-sm btn-square btn-ghost" data-id="{{ $comment->id }}">

                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit" width="18" height="18" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24H0z" fill="none"/><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" /><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" /><path d="M16 5l3 3" /></svg>

                    </button>

                @endif

            </div>

            <div class="text-sm">

                @if(!is_null($comment->fileName))

                    @php

                        $image = 'data:image/jpg;base64,' . base64_encode(Storage::disk('local')->get('images/' . $serviceRequest->customer->image_folder . '/' . $comment->fileName));

                    @endphp

                    <div class="image-wrapper">

                        <img src="{{ $image }}" class="comment-image" data-id="{{ $comment->id }}" data-image="{{ $image }}" />

                    </div>

                @else

                    <i>Ingen bild</i>

                @endif

            </div>

        </div>



        <!-- Edit view for the image (hidden by default) -->

        <div id="image-edit-view-{{ $comment->id }}" class="hidden" data-id="{{ $comment->id }}">

            <div>

                <label class="form-control w-full">

                    <div class="label">

                        <span class="label-text">Bild</span>

                    </div>

                    <input type="file" name="imageUpdate" class="file-input file-input-bordered w-full" />

                </label>

                <span id="image_update_error-{{ $comment->id }}" class="text-error text-sm"></span>

            </div>

            <div class="flex justify-end items-center pt-6 gap-4">

                <button id="image-cancel-btn-{{ $comment->id }}" class="btn btn-ghost" data-id="{{ $comment->id }}">Avbryt</button>

                <button id="image-save-btn-{{ $comment->id }}" class="btn btn-success" data-id="{{ $comment->id }}">Spara</button>

            </div>

            <div>

                <button id="image-remove-btn-{{ $comment->id }}" class="btn btn-outline btn-error btn-xs" data-id="{{ $comment->id }}">Ta bort bilden</button>

            </div>

        </div>

    </div>

</li>



<!-- Modal for showing the bigger image -->

<dialog id="image_modal_{{ $comment->id }}" class="modal">

    <div class="modal-box max-w-full max-h-full p-0">

        <img id="modal_image_{{ $comment->id }}" src="" class="w-full h-full object-contain" />

        <div class="modal-action">

            <button class="btn" onclick="document.getElementById('image_modal_{{ $comment->id }}').close()">Close</button>

        </div>

    </div>

</dialog>



<script>

    $(document).on('click', '[id^="image-edit-btn-"]', function() {

        var id = $(this).data('id');

        $('#image-read-view-' + id).addClass('hidden');

        $('#image-edit-view-' + id).removeClass('hidden');

        $('[name="imageUpdate"]').val('');

        $('#image_update_error-' + id).html('');

    });



    $(document).on('click', '[id^="image-cancel-btn-"]', function() {

        var id = $(this).data('id');

        $('#image-edit-view-' + id).addClass('hidden');

        $('#image-read-view-' + id).removeClass('hidden');

        $('#image-edit-btn-' + id).removeClass('hidden');

        $('#image_update_error-' + id).html('');

    });



    $(document).on('click', '[id^="image-save-btn-"]', async function() {

        var id = $(this).data('id');

        var image = $('[name="imageUpdate"]');

        var token = $('meta[name="csrf-token"]').attr('content');



        var formData = new FormData();

        formData.append('image', image.get(0).files[0]);

        formData.append('_token', token);

        formData.append('_method', 'PATCH');



        const res = await fetch('/service-requests/' + id + '/partial/update/image', {

            method: 'POST',

            body: formData

        });



        const data = await res.json();



        if (res.ok) {

            $('#image-read-view-' + id).find('div:eq(1)').html('<img src="' + data + '" class="comment-image cursor-pointer" data-id="' + id + '" data-image="' + data + '" />');

            $('#image-edit-view-' + id).addClass('hidden');

            $('#image-read-view-' + id).removeClass('hidden');

            $('#image_update_error-' + id).html('');

        } else {

            $('#image_update_error-' + id).html(data.image);

        }

    });



    $(document).on('click', '[id^="image-remove-btn-"]', async function() {

        var id = $(this).data('id');

        var token = $('meta[name="csrf-token"]').attr('content');



        var formData = new FormData();

        formData.append('_token', token);

        formData.append('_method', 'DELETE');



        const res = await fetch('/service-requests/' + id + '/partial/remove/image', {

            method: 'POST',

            body: formData

        });



        if (res.ok) {

            $('#image-read-view-' + id).find('div:eq(1)').html('<i>Ingen bild</i>');

            $('#image-edit-view-' + id).addClass('hidden');

            $('#image-read-view-' + id).removeClass('hidden');

            $('#image-edit-btn-' + id).removeClass('hidden');

        }

    });



    // Show the bigger image in the modal on image click

    $(document).on('click', '.comment-image', function() {

        var imageSrc = $(this).data('image');

        var id = $(this).data('id');

        $('#modal_image_' + id).attr('src', imageSrc);

        document.getElementById('image_modal_' + id).showModal();

    });

</script>

Show a smaller image in the comment field.
A bigger image should be loaded in a dialog box when you click on the small image.

UI is using the daiseyui so use their dialog box solution. https://daisyui.com/components/modal/

[Barand]

Use code blocks when posting code (the <> button)

[Krissh]

Sure

[Krissh]

Can you help me out for the issue?

My requirement is,

Show a smaller image in comment field.
When you click on the image, a bigger image should be loaded in a dialog box.

UI is using the daiseyui so use their dialog box solution. https://daisyui.com/components/modal/

 

 

Edited August 27 by Krissh
added some points

[jodunno]

I'm trying to avoid rudeness but this post does not belong in a PHP coding thread, since it is clearly a third party reinventing the wheel css implementation problem. The third party css implementation is called Tailwind.

I have no interest in reading about Tailwind or the other thing that you mentioned. But have you tried troubleshooting?

like change object-contain to object-none or object-fill to see what happens.
<img id="modal_image_{{ $comment->id }}" src="" class="w-full h-full object-none" />
empty source tag is interesting. Are you using Javascript to set the source?
I'm old school: src="image.ext" and be done with it.

tailwindcss.com/docs/object-fit
"Use the object-contain utility to resize an element's content to stay contained within its container.
Use the object-fill utility to stretch an element's content to fit its container.
Use the object-none utility to display an element's content at its original size ignoring the container size."
<img class="object-none h-48 w-96 ...">

opinion:
css and overlays/modals are not so difficult to warrant a third party re-invent the wheel implementation.

example using JavaScript which only requires an on-click event to work. Just pass a menu option integer.

function OverlayMenusYay(cardinalOpen) {
encodeURIComponent(cardinalOpen);
switch (cardinalOpen) {
  case 1: x.style.display = "block"; x.style.width = "100%"; x.style.height = "100%"; x.style.opacity = "0.4"; break;
  case 2: y.style.display = "block"; y.style.width = "100%"; y.style.height = "100%"; y.style.opacity = "0.4"; break;
}
return;
}

function OverlayMenusNay(cardinalClose) {
encodeURIComponent(cardinalClose);
switch (cardinalClose) {
  case 1: x.style.display = "none"; x.style.width = "0%"; x.style.height = "0%"; x.style.opacity = "1"; break;
  case 2: y.style.display = "none"; y.style.width = "0%"; y.style.height = "0%"; y.style.opacity = "1"; break;
}
return;
}

style.opacity to make the background less visible. You can even use CSS3 to create tool tips on hover of the close button x.