サンプル画像

機能

・画像追加(複数OK)
・サムネイルの順序変更(ドラッグ&ドロップ)
・画像削除

edit.blade.php

edit.php

<x-app-layout>
  <x-slot name="header">
      <h2 class="font-semibold text-xl text-gray-800 leading-tight">
          ポートフォリオ編集
      </h2>
  </x-slot>

  <div class="py-12">
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
          <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
              <div class="p-6 text-gray-900">
                <section class="text-gray-600 body-font relative">

                    {{-- フォーム --}}
                    <form id="editForm" action="{{ route('collections.update', ['collection' => $collection->id ]) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                    <div class="container px-5 mx-auto">
                      <div class="lg:w-1/2 md:w-2/3 mx-auto">
                        <div class="flex flex-wrap -m-2">
                          <div class="p-2 w-full">
                            <div class="relative">
                              <x-input-error :messages="$errors->get('title')" class="mt-2" />
                              <label for="title" class="leading-7 text-sm text-gray-600">タイトル</label>
                              <input type="text" id="title" name="title" value="{{ $collection->title }}" class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
                            </div>
                          </div>
                          <div class="p-2 w-full">
                            <div class="relative">
                              <x-input-error :messages="$errors->get('description')" class="mt-2" />
                              <label for="description" class="leading-7 text-sm text-gray-600">アプリ解説</label>
                              <textarea id="description" name="description" class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out">{{ $collection->description }}</textarea>
                            </div>
                          </div>
                          <div class="p-2 w-full">
                            <div class="relative">
                              <x-input-error :messages="$errors->get('url_qiita')" class="mt-2" />
                              <label for="url_qiita" class="leading-7 text-sm text-gray-600">Qiita URL</label>
                              <input type="url" id="url_qiita" name="url_qiita" value="{{ $collection->url_qiita }}" class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
                            </div>
                          </div>
                          <div class="p-2 w-full">
                            <div class="relative">
                              <x-input-error :messages="$errors->get('url_webapp')" class="mt-2" />
                              <label for="url_webapp" class="leading-7 text-sm text-gray-600">WebApp URL</label>
                              <input type="url" id="url_webapp" name="url_webapp" value="{{ $collection->url_webapp }}" class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
                            </div>
                          </div>
                          <div class="p-2 w-full">
                            <div class="relative">
                              <x-input-error :messages="$errors->get('url_github')" class="mt-2" />
                              <label for="url_github" class="leading-7 text-sm text-gray-600">GitHub URL</label>
                              <input type="url" id="url_github" name="url_github" value="{{ $collection->github }}" class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
                            </div>
                          </div>
                          <div class="p-2 w-full">
                            <div class="relative">
                              <x-input-error :messages="$errors->get('is_public')" class="mt-2" />
                              <label for="is_public" class="leading-7 text-sm text-gray-600">公開種別</label>
                              <input type="radio" name="is_public" value="0" @if($collection->is_public === 0) checked @endif>非公開
                              <input type="radio" name="is_public" value="1" @if($collection->is_public === 1) checked @endif>一般公開
                            </div>
                          </div>
                          <div class="p-2 w-full">
                            <div class="relative">
                              <x-input-error :messages="$errors->get('position')" class="mt-2" />
                              <label for="position" class="leading-7 text-sm text-gray-600">表示優先度</label>
                              <select name="position" id="position" class="rounded-md">
                                <option value="">選択してください</option>
                                <option value="0" @if($collection->position === 0) selected @endif>デフォルト</option>
                                <option value="1" @if($collection->position === 1) selected @endif>1ページ目</option>
                                <option value="2" @if($collection->position === 2) selected @endif>topページ</option>
                              </select>
                            </div>
                          </div>
                          {{-- 画像 --}}
                          <div class="p-2 w-full">
                            <div class="relative">
                                <label class="leading-7 text-sm text-gray-600">画像</label>
                                {{-- 大きなプレビュー画像 --}}
                                <div id="mainImageContainer" class="flex justify-center mt-4 {{ $collection->collection_image->isNotEmpty() ? '' : 'hidden' }}">
                                    <img id="mainImage" class="w-4/5 lg:w-3/5 h-auto object-cover border rounded-lg"
                                         src="{{ $collection->collection_image->isNotEmpty() ? asset('storage/collection_images/' . $collection->collection_image->first()->image_path) : asset('storage/collection_images/noImage.jpg') }}"
                                         alt="メイン画像">
                                </div>
                                {{-- サムネイル一覧 --}}
                                <div class="relative mt-4">
                                    <label class="leading-7 text-sm text-gray-600">サムネイル一覧：</label>
                                    <div id="imagePreviewContainer" class="grid grid-cols-3 gap-3 md:grid-cols-4 lg:grid-cols-5 md:gap-4 w-full place-items-center">
                                        @foreach ($collection->collection_image as $image)
                                            <div class="relative w-24 h-24" data-image-id="{{ $image->id }}">
                                                <img src="{{ asset('storage/collection_images/' . $image->image_path) }}"
                                                     class="w-full h-full object-cover cursor-pointer border border-gray-300 rounded-lg hover:border-indigo-500 transition">
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                {{-- 新しい画像アップロード --}}
                                <div class="relative mt-4">
                                    <label class="leading-7 text-sm text-gray-600">新しい画像を追加：</label>
                                    <input multiple type="file" id="image_path" name="image_path[]" class="hidden" accept="image/*">
                                    <br>
                                    <label for="image_path" class="file-upload-btn inline-block px-4 py-1 text-sm text-gray-800 bg-gray-100 border border-gray-300 rounded-md shadow-sm cursor-pointer hover:bg-gray-200 active:bg-gray-300 transition">
                                        ファイルを選択
                                    </label>
                                </div>
                            </div>
                          </div>
                        

                          <div class="w-full mt-8">
                            <button class="flex mx-auto text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg">更新</button>
                          </div>
                        </div>
                      </div>
                    </div>
                    </form>

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

{{----------- グローバル関数として定義(2つのscriptタグで使用するため) -----------}}
<script>
function generateUUID() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = Math.random() * 16 | 0,
        v = c === 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
      });
}
</script>

{{----------- 画像プレビューの追加、削除、アップロード -----------}}
<script>
document.addEventListener("DOMContentLoaded", function () { // DOMContentLoaded = イベントを監視して処理を実行 | JavaScriptの実行が早すぎてimagePreviewContainerがnullになるのを防ぐ(JavaScriptはデフォルトでHTMLの読み込み中に実行される→まだHTMLのimagePreviewContainerが読み込まれていない場合、nullになってしまう)
    // --- 変数の初期化
    let selectedFiles = [];
    const mainImageContainer = document.getElementById("mainImageContainer");
    const mainImage = document.getElementById("mainImage");
    const imageInput = document.getElementById("image_path");
    const imagePreviewContainer = document.getElementById("imagePreviewContainer");
    const noImageSrc = "/storage/collection_images/noImage.jpg";

    // --- 既存画像の設定(クリックイベント & 削除ボタン追加)
    function setupExistingImages() {
        document.querySelectorAll("#imagePreviewContainer div").forEach(imageWrapper => { // imagePreviewContainer内のすべての<div>を取得
            const imageId = imageWrapper.dataset.imageId; // dataset.imageId → data-image-id属性の値を取得
            const img = imageWrapper.querySelector("img"); // imageWrapper内の<img>要素を取得
            const imageSrc = img.src;

            // メイン画像を変更するときに使用
            img.addEventListener("click", function () {
                changeMainImage(imageSrc);
            });

            // 削除ボタン追記
            if (!imageWrapper.querySelector("button")) {
                const removeButton = createDeleteButton(() => { // createDeleteButton関数 = 削除ボタン生成
                    removeExistingImage(imageWrapper, imageId, imageSrc); // removeExistingImage関数 = 既存画像の削除
                });
                imageWrapper.appendChild(removeButton);
            }
        });
    }

    // --- 画像プレビュー表示(新規アップロード時)
    function previewImages(event) {
        console.log("画像選択イベント発火");
        const input = event.target; // どの要素(input type="file")でイベントが発生したかを取得
        const files = input.files; // 選択されたファイルリストを取得。FileListは、input type="file"でユーザーが選択したファイルの一覧を表すオブジェクト。input.filesを取得すると、その中にFileListが入っている。

        if (!files || files.length === 0) {
            console.log("ファイルが選択されていません");
            return;
        }

        // 複数ファイルをinput.filesに保持するための特別なオブジェクト。
        // → DataTransferを使うと「選択済みのファイルに、新しいファイルを追加OK」「削除したいファイルを除外してinput.filesを更新OK」
        // → 通常のinput type="file"では「新しいファイルを選択すると、以前のファイルが上書きされてしまう」「複数のファイルを選択した状態を保持できない」
        let dataTransfer = new DataTransfer();
        // すでに選択されているファイルを`DataTransfer`に追加
        // → 初回は、previewImages()が実行された時点ではselectedFiles(=過去に選択された画像のリスト)は空
        // → 2回目以降のpreviewImages()実行時には、すでに選択されたファイルがselectedFilesに入っている(下にあるselectedFiles.pushで入る)
        selectedFiles.forEach(fileObj => dataTransfer.items.add(fileObj.file)); // fileObj = selectedFilesの各要素(オブジェクト) | fileObj.file = fileObjの中にあるファイル情報(input.files に入れるデータ) | dataTransfer.items.add(fileObj.file) = dataTransferにfileObj.fileを追加

        // 選択されたファイルを配列に変換し、1つずつ処理
        Array.from(files).forEach((file, index) => { // filesは配列のようなオブジェクト(FileList)なので、直接forEach()やmap()を使えないことがある。Array.from(files)を使うとfilesを本物の配列に変換 できる。 | index = 現在の要素が何番目か(0 から始まるインデックス番号)が入る。
            const reader = new FileReader(); // FileReader = ファイルの内容を読み取る
            reader.onload = function(e) { // onload = ファイルの読み込みが完了したときに実行される | e =「イベントオブジェクト」 | e.target.resultにBase64形式のデータが格納される
                const imageId = "new_" + Date.now();
                const fileName = file.name.trim(); // 空白削除(uniqueIdを生成時、無駄なスペースが混ざらないように)
                const uniqueId = fileName + '_' + generateUUID(); // UUID
                selectedFiles.push({ id: imageId, file: file, src: e.target.result }); // e.target.result = 読み込んだファイルのデータが入る{今回は、画像のデータURL(reader.readAsDataURL(file);で作る)} | e =「イベントオブジェクト」 | reader.onload = 「ファイルの読み込みが完了したら実行する関数」
                dataTransfer.items.add(file);

                // サムネイルを表示する要素を作成
                const imageWrapper = document.createElement("div");
                imageWrapper.classList.add("relative", "w-24", "h-24");

                // <img> タグを作成し、画像を設定する
                const img = document.createElement("img");
                img.src = e.target.result; // e.target.result = 読み込んだファイルのデータが入る{画像のデータURL(reader.readAsDataURL(file);で作る)}
                img.classList.add("w-full", "h-full", "object-cover", "object-center", "rounded", "cursor-pointer");
                img.onclick = function () {
                    changeMainImage(e.target.result); // メイン画像を変更するときに使用
                };

                // 削除ボタン(×)生成
                const removeButton = createDeleteButton(() => {
                    removeNewImage(imageId, imageWrapper);// 新規アップロード画像の削除
                });

                // サムネイル画像作成
                imageWrapper.appendChild(img);
                imageWrapper.appendChild(removeButton);
                imagePreviewContainer.appendChild(imageWrapper);
                // 追加画像をsaveImageOrder()へ送る準備
                imageWrapper.dataset.fileName = fileName;
                imageWrapper.dataset.uniqueId = uniqueId;
                imageWrapper.dataset.imageId = null; // 新規画像なので`null`

                if (selectedFiles.length === 1 || index === 0) { // selectedFiles.length === 1 → 最初の画像 | index === 0 → このループで処理されている最初の画像
                    changeMainImage(e.target.result);
                    mainImageContainer.classList.remove("hidden");
                }

                saveImageOrder(); // 画像が追加された時に `image_order` を更新
            };
            // readAsDataURL(file) → 画像データをBase64(URL)に変換
            reader.readAsDataURL(file); // これにより、ファイルをサーバーにアップロードせずにブラウザ上でプレビューできる
        });

        input.files = dataTransfer.files;
    }

    // --- 削除ボタン生成(共通)
    function createDeleteButton(removeFunction) {
        const removeButton = document.createElement("button");
        removeButton.textContent = "×";
        removeButton.classList.add("absolute", "top-0", "right-0", "bg-black", "bg-opacity-50", "text-white", "px-2", "py-1", "text-xs", "rounded-full", "hover:bg-opacity-70");
        removeButton.onclick = removeFunction; // removeFunction = 「関数を引数として受け取るための変数」 | removeNewImage()やremoveExistingImage()を入れる箱
        return removeButton;
    }

    // --- 新規アップロード画像の削除
    function removeNewImage(imageId, imageWrapper) {
        console.log(`削除する画像 ID: ${imageId}`);
        // `selectedFiles`から対象の画像以外で再構成(=対象画像を削除)
        selectedFiles = selectedFiles.filter(image => image.id !== imageId); // filter() = 配列の中身を条件で絞り込むメソッド | selectedFilesをimageに代入して、selectedFilesのidを取得しているイメージ

        // `DataTransfer`を作成し、削除後のリストをセット
        let dataTransfer = new DataTransfer();
        selectedFiles.forEach(image => dataTransfer.items.add(image.file));
        imageInput.files = dataTransfer.files;

        imageWrapper.remove(); // imageWrapper = サムネイルと削除ボタンを含むHTML要素
        resetMainImage();
    }

    // --- 既存画像の削除
    function removeExistingImage(imageWrapper, imageId, imageSrc) {
        console.log(`既存画像 ID ${imageId} を削除`);
        imageWrapper.remove();

        // `<form>` を正しく取得
        const form = imageInput.closest("form"); // closest("form") = imageInputから一番近いformを取得 | document.querySelector("form")だと、上から順に見てあったものを取得してしまうため
        if (!form) {
            console.error("❌ フォームが見つかりません！");
            return;
        }

        // 削除する画像のIDが既にhidden input(<input type="hidden">)があるかチェック
        let existingInput = form.querySelector(`input[name="delete_images[]"][value="${imageId}"]`); // querySelector(`input[name="delete_images[]"][value="${imageId}"]`) = 条件に合うもの限定で取得
        if (!existingInput) {
            // hidden inputを追加
            const deleteInput = document.createElement("input");
            deleteInput.type = "hidden";
            deleteInput.name = "delete_images[]";
            deleteInput.value = imageId;

            // `setTimeout()`で確実に追加(フォームの更新タイミングによってはhidden inputが消えてしまう → タイミングを固定させる = 「0ミリ秒後に実行」= 「今の処理(removeExistingImage関数)が終わったらすぐに実行」)
            setTimeout(() => form.appendChild(deleteInput), 0); // setTimeout(…, 0) = 指定した時間後に処理を実行する
            console.log("✅ Hidden input を追加:", deleteInput);
        } else {
            console.log("⚠️ 既にhidden inputがあるため追加しませんでした");
        }

        // 削除した画像がメイン画像ならリセット
        if (mainImage.src === imageSrc) {
            resetMainImage();
        }
    }

    // --- メイン画像のリセット
    function resetMainImage() {
        const allImages = document.querySelectorAll("#imagePreviewContainer img"); // #imagePreviewContainer内にあるすべてのimgタグを取得
        if (allImages.length > 0) { // allImages.length > 0 → サムネイル画像が1つ以上ある場合
            changeMainImage(allImages[0].src);
        } else {
            changeMainImage(noImageSrc);
        }
    }

    // --- メイン画像変更
    function changeMainImage(src) {
        console.log("changeMainImage が実行されました: ", src);
        if (mainImage) {
            mainImage.src = src;
        }
    }

    // 初期設定
    setupExistingImages();
    document.getElementById("image_path").addEventListener("change", previewImages);
});
</script>


{{----------- サムネイル移動、順番確定 -----------}}
<!-- SortableJSのCDNを追加 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
<script>
// --- 画像の並び順を保存
function saveImageOrder() { // 画像の並び順を保存する関数
    let imageOrder = []; // 画像の順番を格納するための空配列を作成

    // 画像の順番を格納するための空配列へ順番に保存
    document.querySelectorAll("#imagePreviewContainer div").forEach((div, index) => { // #imagePreviewContainer内のすべての<div>(画像ラッパー)を取得 | indexは0から順番につく
        const imageId = div.dataset.imageId || null; // 既存画像は `imageId` を取得、新規画像は `null`
        const fileName = div.dataset.fileName || "new_image";
        const uniqueId = div.dataset.uniqueId || generateUUID(); // 新規画像の場合は `uniqueId` を生成

        if(imageId) {
            imageOrder.push({ fileName, uniqueId, id: imageId, position: index });
        }
    });

    console.log("🚀 送信する並び順:", imageOrder);

    // 既存のhidden inputを削除(重複を防いで、最新の画像順序データだけを送信)
    document.querySelectorAll("input[name='image_order']").forEach(input => input.remove());

    const form = document.getElementById("editForm");
    if (!form) {
        console.error("❌ フォームが見つかりません！");
        return;
    }

    // フォームにhidden inputを追加
    const hiddenInput = document.createElement("input");
    hiddenInput.type = "hidden";
    hiddenInput.name = "image_order";
    hiddenInput.value = JSON.stringify(imageOrder); // オブジェクト配列を文字列化 | valueは文字列しかセットできないので、オブジェクトを文字列にする必要がある
    form.appendChild(hiddenInput);

    console.log("✅ hidden input に保存:", hiddenInput.value);
}


// ----------- SortableJS(ドラッグ&ドロップ)を適用 ----------- 
document.addEventListener("DOMContentLoaded", function () {
  const imagePreviewContainer = document.getElementById("imagePreviewContainer");

  if (!imagePreviewContainer) {
      console.error("❌ imagePreviewContainer が見つかりません！");
      return;
  }

  // --- SortableJS(ドラッグ&ドロップ)を適用
  const sortable = new Sortable(imagePreviewContainer, { // new Sortable()を使ってimagePreviewContainer内の要素をドラッグ&ドロップ可能にする
      animation: 150, // スムーズなアニメーション
      ghostClass: "sortable-ghost", // ドラッグ中のスタイルを変更
      onEnd: function () { // onEndイベント = 要素の移動が確定したときに発火
          saveImageOrder();
      },
  });
});
</script>
</x-app-layout>

CollectionController.php

CollectionController.php

<?php

namespace App\Http\Controllers\Admin;

use App\Models\User;
use App\Models\Collection;
use App\Http\Controllers\Controller;
use App\Service\Admin\CollectionService;
use App\Http\Requests\CollectionRequest;
use App\Models\CollectionImage;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Storage;

class CollectionController extends Controller
{
    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        // ログインユーザーの(コレクション&コレクション画像)テーブルを取得
        $collection = CollectionService::getCollectionImage($id);

        return view('admin.collections.edit', compact('collection'));
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(CollectionRequest $request, $id)
    {
        $collection = Auth::user()
        ->collections()
        ->with('collection_image')
        ->findOrFail($id);

        // save(画像以外)
        CollectionService::updateRequest($collection, $request);

        // 削除リクエストがある場合、該当画像を削除
        CollectionService::deleteRequestImage($request);

        // 追加画像保存、既存画像position変更
        CollectionService::updateRequestImage($request, $collection);

        return to_route('collections.index');
    }
}

CollectionService.php

CollectionService.php

<?php 
namespace App\Service\Admin;

use App\Models\Collection;
use App\Models\CollectionImage;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Storage;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Str;

class CollectionService
{
  // ------ update ------
  public static function updateRequest($collection, $request) {
    $collection->title = $request->title;
    $collection->description = $request->description;
    $collection->url_qiita = $request->url_qiita;
    $collection->url_webapp = $request->url_webapp;
    $collection->url_github = $request->url_github;
    $collection->is_public = $request->is_public;
    $collection->position = $request->position;
    $collection->save();
  }

  public static function deleteRequestImage($request) {
    if($request->delete_images) {
      foreach($request->delete_images as $imageId) {
          $image = CollectionImage::find($imageId);
          if($image) {
              Storage::delete('public/collection_images/' . $image->image_path);
              $image->delete();
          }
      }
    }
  }

  public static function updateRequestImage($request, $collection) {
    // --- 追加画像あり
    if($request->hasFile('image_path')) {
      // 初期設定
      $uploadedFiles = $request->file('image_path');
      $orderData = json_decode($request->input('image_order'), true);
      $imageIdMap = [];
      
      // 追加画像のループ
      foreach($uploadedFiles as $index => $imagePath) {
        // 追加画像のファイル名を生成、publicに保存
        $imageName = time() . '_' . uniqid() . '.' . $imagePath->getClientOriginalExtension();
        $imagePath->storeAs('public/collection_images', $imageName);

        // 追加画像のposition確定
        $fileName = trim($imagePath->getClientOriginalName()); // ファイル名
        $order = collect($orderData)->first(fn($item) => str_starts_with($item['uniqueId'], $fileName));
        
        // データベースに保存
        $image = CollectionImage::create([
          'collection_id' => $collection->id,
          'image_path' => $imageName,
          'position' => $order ? $order['position'] : 0
        ]);
      }

      // 既存画像position更新
      if(isset($orderData)) {
        foreach($orderData as $order) {
          // 既存画像か新規画像かを判、既存画像ならテーブルidがある、新規の場合は'null'が入ってる
          $imageId = ($order['id'] === "null") ? null : $order['id']; // JavaScript側で文字列化のため → hiddenInput.value = JSON.stringify(imageOrder); // オブジェクト配列を文字列化 | valueは文字列しかセットできないので、オブジェクトを文字列にする必要がある
  
            if ($imageId !== null) {
              CollectionImage::where('id', $imageId)
              ->update(['position' => $order['position']]);
            }
        }
      }
    }


    // --- 追加画像なし、既存position更新
    if(!$request->hasFile('image_path') && $request->filled('image_order')) {
      $imageOrders = json_decode($request->input('image_order'), true); // JSONを配列に変換
      if(is_array($imageOrders)) {
          foreach ($imageOrders as $order) {
              CollectionImage::where('id', $order['id'])
              ->update(['position' => $order['position']]);
          }
      }
    }
  }
}
?>