画像ギャラリーを作る.

DXPR Builderを学ぶページを作るチュートリアル

ここでは写真ギャラリーを作ります。中央寄せ見出し、代替テキスト付き3枚の並び写真、 灰色帯のスライドショーです。場所やイベントを写真で見せる場合に使います。各案件に 説明を付けるには代わりにポートフォリオギャラリーを作るを ご覧ください。

動画では大学向け学生絵画ギャラリーを作ります。

はじめる前に

  • ロールがEdit with DXPR Builder権限を持ちます。
  • メディアライブラリーに6枚以上の写真があります。同じ比率に切り抜き済みです。
  • ページをビルダーで開きます。新規はContent > Add content > Landing Page (/node/add/landing_page) を開き、Saveをクリックします。

手順1: ヘッダーを追加する

  1. 空ページのAdd Elementsをクリックし、LayoutタブからSectionを選びます。
  2. セクションにホバーしてMore > Settingsを開きます。HTML classes下でAlign text centerを選び、Saveをクリックします。
  3. セクションの+をクリックし、ContentタブからTextを選びます。
  4. 「学生作品ギャラリー」をHeading 2で入力し、紹介1行を加えてSaveをクリックします。テーマはページタイトルをページのHeading 1として出します。この見出しを代わりにHeading 1にするにはSEOに強いページを作るをご覧ください。

手順2: 写真グリッドを追加する

  1. セクションにホバーしてAdd Section Belowをクリックします。新セクションの+をクリックしてRowを選びます。2つの均等カラム付きで入ります。
  2. ローのグリッドアイコン (Column layout) をクリックし、1/3 + 1/3 + 1/3プリセットを選んでSaveをクリックします。
  3. 1つ目のカラムの+をクリックしてImageを選びます。
  4. クリックするのはSelect Imageで、Apply filtersでメディアライブラリーを検索して、写真をクリックしてInsert selectedをクリックします。
  5. 開くのはSEOパネルで、Alt attributeを入力します。写真の見えない人に伝える内容です。Saveをクリックします。
  6. 2つ目と3つ目のカラムで繰り返します。

同じ比率に切り抜いた写真はローを均等に保ちます。

手順3: スライドショーを追加する

  1. 追加するのはAdd Section Belowで3つ目のセクションで、More > Settingsを開きます。HTML classes下でAlign text centerを選び、Styleパネルで薄灰色Backgroundを選びます。Saveをクリックします。
  2. セクションの+をクリックしてImage carouselを選びます。
  3. クリックするのはSelect Imageで、ライブラリーを検索し、3枚の写真をクリックしてInsert selectedをクリックし、Saveをクリックします。
  4. セクションの+を再びクリックしてTextを選びます。カルーセルの上に載ります。「スライドショー」をHeading 2で入力してSaveをクリックします。

手順4: 保存してプレビューする

  1. ビルダーツールバーのSaveをクリックします。
  2. ビューメニュー (eye icon、目のアイコン) を開き、Previewを選びます。

さらに進む

動画にはありません。

  • キャプション: カラムにCardを置き、中にキャプションのTextエレメントを追加します。次にカード内にImageを追加します。キャプションの上に載ります。
  • 原寸写真: Image linkに原寸ファイル、Image link targetにNew windowを設定します。
  • スタイル: 各画像にStyleパネルでBorder radiusに4、Drop shadowに1を設定して柔らかく浮かせます。
  • スライドショー間隔: カルーセルのIntervalをミリ秒で設定します。Hide下でHide pagination controlやHide prev/next buttonsにチェックするとその操作を消します。
  • 自動補充ギャラリー: Structure > Views > Add viewで画像メディアのビューをGrid形式のブロックディスプレイで作ります。Drupal Viewsタブから挿入すると、新規アップロードが自動で載ります。

表示結果

中央寄せ見出しがページを開き、3枚の写真が横に並びます。下の灰色帯ではスライドショーが1枚ずつ5秒ごとに進みます。

図通りにならない場合

  • Insert selectedしても写真が入りません。 Apply filters後のライブラリー再読み込み中で、クリックが写真にチェックしませんでした。グリッドが落ち着くまで待ち、写真にチェックがあることを確認してInsert selectedを再クリックします。
  • メディアライブラリーが空です。 画像が未上げか、メディアブラウザー未設定です。画像が上げられない・消えるをご覧ください。
  • 3枚の写真で高さが違います。 比率が違います。同じ比率に切り抜き、上げ直して新しい方を選びます。
  • 再読み込み後に変更が消えています。 ビルダーツールバーのSaveをクリックする前にページを離れました。Saveがエラーを出す場合、変更が保存されないをご覧ください。

次はこちら