agent_test/template/product/form_components/image.html

<!-- hinh anh -->
<div class="w-full" role="tabpanel">
    <div class="bg-white rounded-md shadow p-3">
        <b class="block text-[20px] font-[700] mb-[10px]">Cập nhật ảnh sản phẩm</b>

        <div class="overflow-y-scroll max-h-[500px]">
            <div class="item grid grid-cols-6 rounded-md shadow p-3 mt-3 gap-3">
                <div class="image">
                    <img src="{{ 'image-big.png' | asset_url }}" alt="">
                </div>
                <div class="right-image col-span-5">
                    <div class="flex justify-between gap-3">
                        <div class="flex items-center gap-3">
                            <b class="text-center block">Hình sản phẩm</b>
                            <p class="text-center block text-gray">(Ảnh chính)</p>
                        </div>
                        <div class="grid grid-cols-2 gap-3">
                            <div class="item flex items-center  gap-2">
                                <p class="whitespace-nowrap">STT</p>
                                <input type="text" class="input shadow">
                            </div>
                            <div class="item flex items-center gap-2">
                                <p class="whitespace-nowrap">ALT</p>
                                <input type="text" class="input shadow">
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <a href="" class="btn btn-sm btn-outline">
                            <i class="iconify lucide--trash-2"></i>
                            <p class="">Xoá</p>
                        </a>
                    </div>
                </div>
            </div>
            <div class="item grid grid-cols-6 rounded-md shadow p-3 mt-3 gap-3">
                <div class="image">
                    <img src="{{ 'image-big.png' | asset_url }}" alt="">
                </div>
                <div class="right-image col-span-5">
                    <div class="flex justify-between gap-3">
                        <div class="flex items-center gap-3">
                            <b class="text-center block">Hình sản phẩm</b>
                            <p class="text-center block text-gray">(Ảnh chính)</p>
                        </div>
                        <div class="grid grid-cols-2 gap-3">
                            <div class="item flex items-center  gap-2">
                                <p class="whitespace-nowrap">STT</p>
                                <input type="text" class="input shadow">
                            </div>
                            <div class="item flex items-center gap-2">
                                <p class="whitespace-nowrap">ALT</p>
                                <input type="text" class="input shadow">
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <a href="" class="btn btn-sm btn-outline">
                            <i class="iconify lucide--trash-2"></i>
                            <p class="">Xoá</p>
                        </a>
                    </div>
                </div>
            </div>
            <div class="item grid grid-cols-6 rounded-md shadow p-3 mt-3 gap-3">
                <div class="image">
                    <img src="{{ 'image-big.png' | asset_url }}" alt="">
                </div>
                <div class="right-image col-span-5">
                    <div class="flex justify-between gap-3">
                        <div class="flex items-center gap-3">
                            <b class="text-center block">Hình sản phẩm</b>
                            <p class="text-center block text-gray">(Ảnh chính)</p>
                        </div>
                        <div class="grid grid-cols-2 gap-3">
                            <div class="item flex items-center  gap-2">
                                <p class="whitespace-nowrap">STT</p>
                                <input type="text" class="input shadow">
                            </div>
                            <div class="item flex items-center gap-2">
                                <p class="whitespace-nowrap">ALT</p>
                                <input type="text" class="input shadow">
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <a href="" class="btn btn-sm btn-outline">
                            <i class="iconify lucide--trash-2"></i>
                            <p class="">Xoá</p>
                        </a>
                    </div>
                </div>
            </div>
            <div class="item grid grid-cols-6 rounded-md shadow p-3 mt-3 gap-3">
                <div class="image">
                    <img src="{{ 'image-big.png' | asset_url }}" alt="">
                </div>
                <div class="right-image col-span-5">
                    <div class="flex justify-between gap-3">
                        <div class="flex items-center gap-3">
                            <b class="text-center block">Hình sản phẩm</b>
                            <p class="text-center block text-gray">(Ảnh chính)</p>
                        </div>
                        <div class="grid grid-cols-2 gap-3">
                            <div class="item flex items-center  gap-2">
                                <p class="whitespace-nowrap">STT</p>
                                <input type="text" class="input shadow">
                            </div>
                            <div class="item flex items-center gap-2">
                                <p class="whitespace-nowrap">ALT</p>
                                <input type="text" class="input shadow">
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <a href="" class="btn btn-sm btn-outline">
                            <i class="iconify lucide--trash-2"></i>
                            <p class="">Xoá</p>
                        </a>
                    </div>
                </div>
            </div>
            <div class="item grid grid-cols-6 rounded-md shadow p-3 mt-3 gap-3">
                <div class="image">
                    <img src="{{ 'image-big.png' | asset_url }}" alt="">
                </div>
                <div class="right-image col-span-5">
                    <div class="flex justify-between gap-3">
                        <div class="flex items-center gap-3">
                            <b class="text-center block">Hình sản phẩm</b>
                            <p class="text-center block text-gray">(Ảnh chính)</p>
                        </div>
                        <div class="grid grid-cols-2 gap-3">
                            <div class="item flex items-center  gap-2">
                                <p class="whitespace-nowrap">STT</p>
                                <input type="text" class="input shadow">
                            </div>
                            <div class="item flex items-center gap-2">
                                <p class="whitespace-nowrap">ALT</p>
                                <input type="text" class="input shadow">
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <a href="" class="btn btn-sm btn-outline">
                            <i class="iconify lucide--trash-2"></i>
                            <p class="">Xoá</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-md shadow p-3 mt-5">
        <b class="text-xl block">Thêm ảnh cho sản phẩm</b>
        <p class="text-gray">Bạn có thể: Chọn ảnh có sẵn trong kho ảnh, hoặc upload ảnh từ máy tính:</p>

        <div id="image-preview-filepond" class="mt-5"></div>


        <p class="text-gray italic mt-3"><b>Chú ý:</b> Bạn có thể chọn nhiều ảnh cùng 1
            lúc:
            Chấp nhận các file ảnh: jpg,gif</p>
        <input class="btn btn-active mt-3" name="commit" type="submit" value="Cập nhật">
    </div>

    <div class="bg-white p-3 rounded-sm shadow mt-5">
        <b class="block">Chú ý:</b>
        <ul class="text-sm">
            <li>- Ảnh Sản phẩm kích thước lớn sẽ được tự động co lại thành các ảnh
                nhỏ hơn cho những vị trí liên quan. Tùy giao
                diện website của bạn mà kích thước ảnh Sản phẩm khác nhau. <a href="/system/setup"
                    class="text-primary underline">Click
                    vào đây</a> để
                quy định kích thước ảnh Sản phẩm.</li>
            <li>
                - Chỉ dùng file ảnh đuôi .jpg và .gif.
            </li>
            <li>
                - Cập nhật hình ảnh cho Sản phẩm ở nhiều góc cạnh, màu sắc để người dùng xem
                rõ nhất. Nên cập nhật ảnh có kích thước lớn
                và độ phân giải cao.
            </li>
        </ul>
    </div>
</div>