CMS:テーブルまたはギャラリーにコレクションコンテンツを表示する
読了時間:4分
テーブルとギャラリーは、コレクション内の複数のアイテムを同時に表示するのに最適です。特に、動的リストページまたは標準ページにコレクションのコンテンツを表示する場合に役立ちます。リピーターにテーブルやギャラリーを添付することもできます。
テーブルとギャラリーには参照フィールドが含まれているコレクションの関連アイテムを表示できます。また、あるデータセットに別のデータセットでフィルターをかけた場合にも、コレクションの関連アイテムを表示することができます。
テーブルとギャラリーには参照フィールドが含まれているコレクションの関連アイテムを表示できます。また、あるデータセットに別のデータセットでフィルターをかけた場合にも、コレクションの関連アイテムを表示することができます。
CMS コンテンツを表示するためのチュートリアルは、以下をご覧ください:
例
以下の例では、サイト上でテーブルとギャラリーを使用して情報を表示する方法をご紹介します。
1. 1つのコレクションをテーブルまたはギャラリーに接続する
この例では、レシピに関するコレクションのアイテムを表示するためにギャラリーを使用しました。まず、ギャラリーを動的リストページに配置します。この場合、カテゴリーは「コース」で、各画像はその料理の動的アイテムページにリンクしています。ページ上部のテキスト要素は同じデータセットにリンクされているため、ページの見出しとして機能します。この例では、動的リストページに「サイドメニュー」が表示されています。
以下の例ではテーブルを使用して、アーティストコレクションのすべてのアーティストアイテムを動的に表示させています。このテーブルは標準ページ上にあります。 1 つの列にはアーティストの写真が、もう 1 つの列には各アーティストの略歴が表示されます。テーブルの行はそれぞれ、各アーティストの動的アイテムページにリンクしています。
以下の例ではテーブルを使用して、アーティストコレクションのすべてのアーティストアイテムを動的に表示させています。このテーブルは標準ページ上にあります。 1 つの列にはアーティストの写真が、もう 1 つの列には各アーティストの略歴が表示されます。テーブルの行はそれぞれ、各アーティストの動的アイテムページにリンクしています。
2. 参照フィールドが含まれている 1 つのコレクションをテーブルに接続する
この例では、楽曲コレクションに、アーティストコレクションへの参照フィールドを追加しています。これを利用して、標準ページ上の 1 つのテーブルに両方のコレクションの情報を同時に表示できます。最初の列には、楽曲コレクションのタイトルが表示されます。 2番目の列には、参照フィールドから取得したアーティストの名前が表示されます。
3. テーブルを使用して動的ページにリンクする
この例では、テーブルを標準ページに配置してレシピコレクションに接続しました。このテーブルには、コレクション内のすべてのレシピとそのコースおよび料理がリストされています。
テーブルの列は、それぞれ異なる動的ページにリンクしています。「レシピ」列は、そのレシピの動的アイテムページにリンクしています。上記の例と同様に、「コース」列はそのコースの動的リストページに、「料理」列はその料理の動的リストページにリンクしています。
テーブルを使用して動的ページにリンクすることで、新しい動的ページにリンクする他のボタンや要素を追加しなくても、コレクションに追加される新しいレシピやコース、料理を常にサイトに表示させることができます。
テーブルの列は、それぞれ異なる動的ページにリンクしています。「レシピ」列は、そのレシピの動的アイテムページにリンクしています。上記の例と同様に、「コース」列はそのコースの動的リストページに、「料理」列はその料理の動的リストページにリンクしています。
テーブルを使用して動的ページにリンクすることで、新しい動的ページにリンクする他のボタンや要素を追加しなくても、コレクションに追加される新しいレシピやコース、料理を常にサイトに表示させることができます。
4. テーブルを使用して表示するアイテムを選択する
この例では、標準ページ上にテーブルとギャラリーを一緒に配置しました。テーブルで選択した行に応じて、ギャラリーに表示されるアイテムが変わります。テーブルとギャラリーの両方を参照フィールドを持つデータセットに接続するか、それぞれを 2つの異なるデータセット(一方のデータセットに、もう一つのデータセットでフィルターを適用)に接続するかのいずれかの方法を利用できます。
下の図では、テーブルは「料理」データセットに、ギャラリーはフィルタリングされた「レシピ」データセットに接続されています。訪問者はテーブルで「テキサス風メキシコ料理」を選択したため、ギャラリーには「テキサス風メキシコ料理」に紐付くレシピが表示されています。
これ以外の要素でも、データセットに接続し、訪問者がテーブルで選択したアイテムに応じて関連する情報を表示させることができます。以下の例では、テーブルと動画プレーヤーの両方が楽曲コレクションに接続されています。訪問者がテーブルで曲をクリックすると、動画プレーヤーでその曲が再生されます。
下の図では、テーブルは「料理」データセットに、ギャラリーはフィルタリングされた「レシピ」データセットに接続されています。訪問者はテーブルで「テキサス風メキシコ料理」を選択したため、ギャラリーには「テキサス風メキシコ料理」に紐付くレシピが表示されています。
これ以外の要素でも、データセットに接続し、訪問者がテーブルで選択したアイテムに応じて関連する情報を表示させることができます。以下の例では、テーブルと動画プレーヤーの両方が楽曲コレクションに接続されています。訪問者がテーブルで曲をクリックすると、動画プレーヤーでその曲が再生されます。
お役に立ちましたか?
|