複数画像フィールドは、複数の画像を管理するためのフィールドです。カルーセル表示や、記事内のフォトギャラリーなどを構築する際に適しています。

データの入稿方法

• 画像の選択方法は画像フィールドと同様です。
• 複数画像フィールドの場合は複数の画像を一度にドラッグ&ドロップでアップロードできます。
• 選択した画像の順番はドラッグ&ドロップで変更可能です。

API、CSVを利用した入稿については以下のドキュメントをご参照ください。

詳細設定

GET APIのレスポンス形式

詳細は以下のドキュメントをご参照ください。

フロントエンドでの利用方法

複数画像フィールドは、画像情報（url, width, height, alt）を持つオブジェクトの配列として返却されます。配列を順に処理し、各要素の情報をコンポーネントに渡すことで表示します。

export default async function Page({ params }) {
  const { slug } = await params;

  // microCMS JavaScript SDK（https://github.com/microcmsio/microcms-js-sdk）を使用してデータを取得
  const data = await client.getListDetail({
    endpoint: "blog",
    contentId: slug,
  });

  return (
    <main>
      {/* imageListはフィールドIDです。実際のフィールドIDに置き換えてください */}
      {data.imageList.map((image,index) => (
        <Image
          key={index}
          src={`${image.url}?w=800&fm=webp`} // 画像APIを指定
          alt={image.alt || ""}
          width={image.width}
          height={image.height}
        />
      ))}
    </main>
  );
}