kuvia/resources/views/gallery/images.blade.php

@extends('layout/template')

@section('content')
    <div class="row" style="margin-top: 20px;">
        <div class="col-md-12">
            @foreach($images as $image)
                <div class="card col-md-2 editImage" x-id="{{ $image->id }}" x-name="{{ $image->filename }}" x-image-url="/{{ $tenant->url }}/{{ $gallery->url }}/{{ $image->id }}/file?size=medium" style="float:left;cursor: pointer;" >

                    <div class="card-body" style="text-align: center;">
                        <img class="card-img-top" src="/{{ $tenant->url }}/{{ $gallery->url }}/{{ $image->id }}/file?size=small" style="height: 200px;width: auto; max-width: 100%;">
                        <h5 class="card-title">
                            {{ $image->filename }}

                        </h5>

                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <!-- Button trigger modal -->


    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Bild bearbeiten</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <img src="" id="imagePreview" style="width: 100%;">
                    <input style="display: none;" name="name" id="edit-name" placeholder="Name" class="form-control">
                    <input style="display: none;" name="edit-id" id="edit-id" placeholder="ID" class="form-control">
                </div>
                <div class="modal-footer">
                    <button type="button" id="deleteImage" class="btn btn-danger">Delete</button>
                    <button type="button" id="makeGalleryDefault" class="btn btn-warning">Make Galery Preview</button>

                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <!--<button type="button" class="btn btn-primary">Save changes</button>!-->

                </div>
            </div>
        </div>
    </div>

@endsection
@section('js')
    <script>
        $(".editImage").click(function () {
            $("#imagePreview").attr("src", $(this).attr("x-image-url"));
            $("#edit-name").val($(this).attr("x-name"));
            $("#edit-id").val($(this).attr("x-id"));
            $('#exampleModal').modal('show')
        });
        $("#makeGalleryDefault").click(function () {
            $.ajax("/g/{{ $gallery->url }}/setDefault?id="+$("#edit-id").val()).done(function () {
                alert("Set as Main Image");
            });
        });
        $("#deleteImage").click(function () {
            $.ajax("/g/{{ $gallery->url }}/delete?id="+$("#edit-id").val()).done(function () {
                alert("Image deleted");
            });
        });


    </script>
@endsection