ギャラリ・グリッド

ギャラリ・グリッドを使用して、行および列に一連のイメージを一度に表示します。

ページにイメージ・ギャラリを追加するには:

編集するページに移動し、が「編集」に設定されていることを確認します。
ページにコンポーネントを追加します。ギャラリ・グリッド・コンポーネントには、使用するイメージを選択するまでプレースホルダ・イメージが表示されます。
ギャラリに1つ以上のイメージを追加するには、そのメニュー・アイコンをクリックし、「設定」を選択して、「一般」タブの「イメージ」をクリックします。
「イメージの追加」をクリックします。
1つ以上のイメージを選択します。

注:
ウィンドウに使用可能なすべてのファイルが表示されます。コンテキストに適切なファイル・タイプを選択する必要があります。たとえば、イメージ・ファイルを選択する場合、有効なイメージ・フォーマット(GIF、JPG、JPEG、PNGまたはSVG)のファイルを選択する必要があります。
1. 使用するイメージを検索して選択します。
  
  デジタル・アセットが表示されない場合、をクリックして、コレクション・フィルタを「すべて」に変更します。
2. ドキュメント・フォルダからイメージを選択した場合、ファイルをサイトにコピーせずに、そのファイルにリンクできます。ファイルにリンクするには、「サイトにファイルをコピーするかわりに元のファイルへの参照を使用します」を選択します。このオプションを選択しない場合、ファイルのコピーがサイトで格納され、サイトから参照されます。元のファイルにリンクすることで、コンテンツを複製せずに済みます。リンクを使用すれば、ファイルの権限が変更されたり、表示が制限されるような場合でも、サイトのビジターがコンテンツを表示できます。
3. 「OK」をクリックします。
4. デジタル・アセットを選択した場合、特定のレンディションを選択できます。レンディションを選択しない場合、元のサイズが使用されます。サイトの公開時に最新バージョンのアセットを公開する場合、「最新バージョンのアセットを使用」を選択します。
選択したイメージは、イメージのリストに追加されます。イメージをドラッグ・アンド・ドロップしてリスト(およびグリッド)内のイメージの順序を変更します。各イメージのデフォルトのタイトルは、拡張子のないファイル名です。
特定のイメージのタイトル、説明またはその他のオプションを変更するには、リストのイメージをクリックして変更を加えます。
リンクまたはその他のアクションをギャラリのイメージに関連付けることができます。
1. 特定のイメージの「設定」パネルで、「リンク」フィールドをクリックします。
2. 次のいずれかのオプションを選択します。
  - リンクなし: ユーザーがイメージをクリックした際に、アクションを実行しません。
  - Webページ: 外部ページまたはサイトへの完全なURLを指定し、どこでリンクを開くかを選択します。
  - サイト・ページ: ページ・ピッカーを使用して現在のサイトのページを選択し、どこでリンクを開くかを選択します。追加のURLパラメータを形式key1=value1&key2=value2で指定できます。空の値がサポートされています(例: key1=&key2=value2)。URLアンカーも指定できますが、特殊な「アンカー」セクション・レイアウトを追加して、アンカー・リンクを解決するターゲット・サイト・ページに配置し、トリガー・アクションを定義する際に使用するレイアウト設定に同じアンカー名を指定する必要があります。
    
    注:
    URLアンカーを使用するために必要な「アンカー」セクション・レイアウトは、OCEツールキットで配布されます。ツールキットの取得方法は、「OCEツールキットでの開発」を参照してください
  - ファイルのダウンロード: 選択したファイルをリポジトリからダウンロードします。ファイルを選択します。
    
    デジタル・アセットを選択する場合、特定のレンディションを選択できます。レンディションを選択しない場合、元のサイズが使用されます。サイトの公開時に最新バージョンのアセットを公開する場合、「最新バージョンのアセットを使用」を選択します。「最新バージョンのアセットを使用」を選択しない場合は、最新のドラフト・バージョンではなく最新の公開済バージョンが使用されます(ある場合)。
  - コンテンツ・アイテム: 関連付けられたアセット・リポジトリからコンテンツ・アイテムを選択し、表示する詳細ページを選択して、同じまたは新規ウィンドウに開くページをターゲット設定します。
  - 電子メール: 有効な電子メール・アドレス(およびオプションとして件名)を指定します。生成されるメッセージが開かれて、デフォルトの電子メール・クライアントを通じて送信されます。
  - イメージ・プレビュー: 選択したイメージはページ上にオーバーレイとして表示されます。
  - マップ: 有効なアドレスまたは座標を入力し、マップをデスクトップおよびモバイル・ブラウザのどこで開くかを選択します。
  - 電話: 有効な電話番号を入力します。
3. イメージの設定パネルに戻るには、「戻る」をクリックします。更新する別のイメージを選択するためにイメージ・リストに戻るには、再度「戻る」をクリックします。
4. 個々のイメージの更新が完了したら、「戻る」をクリックしてギャラリ・オプションを指定します。
グリッドのイメージを配置するには、「レイアウト」オプションを使用します。
- メーソンリー
- 列
- カスタム
これらの各オプションについては、次のステップで説明します。
使用可能な領域内の行にイメージを自動的に配置するには、「メーソンリー」レイアウトを選択します。
生成される行の高さは均一ですが、列の幅は統一されていません。

図GUID-4CAF671A-F931-4177-BB92-E5F082663996-default.pngの説明
1. すべてのイメージを指定された高さ(ピクセル単位)に比例してスケーリングするには、「高さ」を指定します。
2. 行内のイメージ間のスペースを増やすまたは減らすには、「イメージ間隔」を指定します。
行と列にイメージを配置するには、「列」レイアウトを選択します。
1. 次の「スケーリング」オプションを選択して、グリッド内のイメージの表示を調整します。
  - 切取り: 2つの寸法(幅または高さ)の短い方が使用可能な領域にフィットするようにスケーリングされ、長い方の寸法はイメージをストレッチしないで切り取られます。
  - フィット: イメージをゆがませずにイメージ全体が使用可能な領域にフィットするように、各イメージがスケーリングされます。
  たとえば、次のグリッドでは4列を使用し、6つのイメージをフィットするようにスケーリングしています。
  
  図GUID-4AB0B5DD-89B4-492D-A968-45482B3953CE-default.pngの説明
  
  次にイメージが切り取られた同じグリッドを示します。
  
  図GUID-3B1C55AE-E995-41C4-A9D9-F52FA75FF7E3-default.pngの説明
2. 「アスペクト比」を指定して、グリッドのセルの形を決定します。
  - 四角形: アスペクト比は1:1です。
  - ランドスケープ: アスペクト比は16:9です。
  - ポートレート: アスペクト比は9:16です。
  - カスタム: アスペクト比の独自の数値を指定します。
3. 「列」の数を指定します。
  列幅を揃えて作成するように、グリッドは自動的に調整されます。
4. 行と列内のイメージ間のスペースを増やすまたは減らすには、「イメージ間隔」を指定します。
指定したイメージ・サイズと幅に基づいて行と列にイメージを配置するには、「列」レイアウトを選択します。
1. 次の「スケーリング」オプションを選択して、グリッド内のイメージの表示を調整します。
  - 切取り: 2つの寸法(幅または高さ)の短い方が使用可能な領域にフィットするようにスケーリングされ、長い方の寸法はイメージをストレッチしないで切り取られます。
  - フィット: イメージをゆがませずにイメージ全体が使用可能な領域にフィットするように、各イメージがスケーリングされます。
2. 「画像の高さ」および「イメージの幅」を指定して、グリッドのセルの形を決定します。
  指定した寸法でセルを作成するように、グリッドは自動的に調整されます。
3. 行と列内のイメージ間のスペースを増やすまたは減らすには、「イメージ間隔」を指定します。
「位置合わせ」、「幅」および「間隔」オプションを指定して、スロット内にグリッドを配置します。
幅を使用して、スロット内のギャラリの幅(ピクセル単位)を指定します。幅を指定する場合、「フィル」以外の位置合せオプションをクリックします。幅を設定した後に、「フィル」を使用して指定した幅にイメージを拡大することができます。