画像ビューアーを使用すると、Logik アドミンは、メディアカルーセルで表示できるサポートされているフィールドに注目の画像を追加できます。この記事では、Logik アドミンで画像ビューアーを設定する方法と、レイアウトでの表示方法について説明します。

サポートされているフィールド表示タイプ

• 静的画像
• MultiSelectProductPickerGrid
• MultiSelectVisualProductPicker
• 製品ピッカーグリッド
• ビジュアル製品ピッカー
• 複数選択 picklistGrid
• 単一選択 picklistGrid
• 複数選択ビジュアルピッカー
• ビジュアルピッカー

静的画像

静的画像フィールドの画像ビューアーを表示するには、次の手順を実行します。

1. 画像ビューアーを追加するレイアウトを開きます。
2. フィールドにカーソルを合わせ、歯車アイコンをクリックします。
3. 生の値メニューを開き、下のプレースホルダーテキストの代わりに必要な入力を含めながら、以下を追加します。

   

4. [ 保存] をクリックし、詳細計画を展開します。

画像ビューアーの生の値の詳細

アドミン UI から画像表示コンポーネントの [生の値] セクションに以下を追加します。 ここで、Array<FeatureImage> は機能画像タイプ形式の追加の特徴画像のアレイで、 carouselEnabled は true または false に設定されています。

"featureImageSettings": {
      "additionalImages": Array<FeatureImage>,
      "carouselEnabled": boolean
  }

デフォルトでは、 carouselEnabled は false です。

特徴画像の定義

FeatureImage = {
  “src”: string,
  “alt”?: string,
  "label"?: string,
}

製品ピッカー

製品ピッカーフィールドの画像ビューアーを表示するには、次の手順を実行します。

1. 製品ピッカーフィールドを選択します。
2. [オプションフィールド] タブを選択します。
3. [+ 追加] をクリックします。
   • フィールドタイプをテキストに設定します。
   • 製品リストプロパティを [製品拡張] に設定します。
4. 画像ビューアーに含める画像ごとに 1 つのテキストフィールドを作成します。
   注:

   代替テキストまたはラベルを表示するには、タイプごとに追加のフィールドを作成する必要があります。これらのフィールドは必須ではありません。

   

5. [一括アクション] タブを選択します。
6. [新しいアクションを追加] をクリックします。
7. 決定されたアクションのタイプを選択します。
8. 一括アクション名を入力します。
9. 画像ビューアーに追加されたすべてのフィールドを選択します。

   

10. [保存] をクリックします。
11. [一括アクション] タブで、各画像の URL と、必要に応じてラベルのテキストと代替テキストを指定します。

    

12. [保存] をクリックします。
13. 製品ピッカーフィールドを含むレイアウトを開きます。
14. フィールドにカーソルを合わせ、歯車アイコンをクリックします。
15. [画像ビューアーの有効化] を [オン] に切り替えます。
16. [画像ビューアー設定] セクションを展開します。
17. ステップ 3 〜 4 で作成した、画像 URL、代替テキスト、およびラベルに対応するフィールドを選択します。

    代替テキストとラベルはオプションです。

18. [ + 追加 ] をクリックし、含める画像ごとに手順 17 を繰り返します。

    

19. [ 保存] をクリックし、詳細計画を展開します。

ピックリスト

1. [選択リスト] フィールドを開きます。
2. [選択リスト拡張] タブをクリックします。
3. [ データのインポート] をクリックします。
4. 次の列を含む CSV を作成します。
   • value
   • 画像 URL
     • これが表示する画像の有効な URL であることを確認してください。
     • イメージビューアーに含める各イメージの imageUrl 列を作成します。
   • imageLabel (オプション)
   • imageAltText (オプション)

     

5. 作成した CSV をインポートします。
6. [ 列マッピング] をクリックします。
7. 追加されたフィールドごとにマッピングメニューを選択し、[拡張マッピング] セクションで列名を選択します。

   

8. [ マッピングの保存] をクリックします。
9. 製品ピッカーフィールドを含むレイアウトを開きます。
10. フィールドにカーソルを合わせ、歯車アイコンをクリックします。
11. [画像ビューアーの有効化] を [オン] に切り替えます。
12. [画像ビューアー設定] セクションを展開します。
13. [画像 URL]、[代替テキスト]、および [ラベル] に対応する選択リスト拡張データから作成されたフィールドを選択します。

    代替テキストとラベルはオプションです。

14. [ + 追加 ] をクリックし、含める画像ごとに手順 13 を繰り返します。

    

15. [ 保存] をクリックし、詳細計画を展開します。

一般的なガイドライン

画像サイズがビューアー内のすべての画像で同じであることを確認します。一致しない場合、サムネイルとアイキャッチ画像が正しく位置合わせされません。

表示する順序で画像を追加します。画像は、画像ビューアの設定から上から下に表示されます。フィールドの名前は表示順序に影響しません。

ウィンドウを適切に埋めるのに十分な解像度の画像を使用します。低解像度の画像はウィンドウに合わせてサイズが拡大され、注目画像として選択すると見栄えが悪くなります。

最適なパフォーマンスを得るには、画像ビューアのレンダリング時間に影響を与えるため、大きな画像や高解像度の画像は避けてください。

画像ビューアの表示

画像ビューを含むフィールドを含むレイアウトでは、ユーザーが画像にカーソルを合わせると展開アイコンが表示されます。

クリックすると、画像ビューがダイアログボックスで開きます。

ユーザーは、矢印ボタンを使用するか、機能画像の下にあるサムネイルをクリックして画像間を移動できます。このカルーセルには、ラベルと代替テキスト (指定されている場合) が表示されます。ユーザーは、ダイアログボックスの外側をクリックするか、右上の [X ] をクリックして、ダイアログボックスを閉じることができます。