ポートフォリオギャラリーを作る.
ここではポートフォリオページを作ります。中央寄せ見出し、カバー写真と1行成果付きで 横に並ぶ3案件、行動喚起です。仕事を一目で見せて各案件を物語へリンクする場合に 使います。1案件を深く書くには事例紹介を書くを ご覧ください。
動画では「Our work」という代理店ページを作ります。
はじめる前に
- ロールがEdit with DXPR Builder権限を持ちます。
- メディアライブラリーに各案件のカバー写真があります。同じ比率に切り抜き済みです。
- ページをビルダーで開きます。新規はContent > Add content > Landing Page (
/node/add/landing_page) を開き、Saveをクリックします。 - 新規エレメントはカラムの上に載るため、各カバー写真はテキストより後に入れます。
手順1: ヘッダーを追加する
- 空ページのAdd Elementsをクリックし、LayoutタブからSectionを選びます。
- セクションにホバーしてMore > Settingsを開きます。HTML classes下でAlign text centerを選び、Saveをクリックします。
- セクションの+をクリックし、ContentタブからTextを選びます。
- 「実績」をHeading 2で入力し、紹介1行を加えてSaveをクリックします。テーマはページタイトルをページのHeading 1として出します。この見出しを代わりにHeading 1にするにはSEOに強いページを作るをご覧ください。
手順2: 案件グリッドを追加する
- セクションにホバーしてAdd Section Belowをクリックします。新セクションのMore > Settingsを開き、Styleパネルで薄灰色Backgroundを選んでSaveをクリックします。
- セクションの+をクリックしてRowを選びます。2つの均等カラム付きで入ります。グリッドアイコン (Column layout) をクリックし、1/3 + 1/3 + 1/3プリセットを選んでSaveをクリックします。
- 1つ目のカラムの+をクリックしてTextを選びます。案件名をHeading 3で入力し、1行成果を加えてSaveをクリックします。
- 同じカラムの+をクリックしてImageを選びます。テキストの上に載ります。Select Imageをクリックし、カバー写真にチェックしてInsert selectedをクリックします。SEOパネルでAlt attributeを入力してSaveをクリックします。
- 2つ目と3つ目のカラムで繰り返します。
手順3: 行動喚起を追加する
- 追加するのはAdd Section Belowで3つ目のセクションで、More > Settingsを開きます。HTML classes下でAlign text centerを選び、Styleパネルで紫Backgroundと白Font colorを選びます。Saveをクリックします。
- セクションの+をクリックしてButtonを選びます。Titleに「お問い合わせ」、Linkに
/contact、TypeにLight、SizeにLargeを設定してSaveをクリックします。 - クリックするのは+を再びで、Textを選びます。ボタンの上に載ります。「一緒に働きましょう」をHeading 2で入力し、1行加えます。StyleパネルでFont colorを白にしてSaveをクリックします。
手順4: 保存してプレビューする
- ビルダーツールバーのSaveをクリックします。
- ビューメニュー (eye icon、目のアイコン) を開き、Previewを選びます。
さらに進む
動画にはありません。
- 各案件のリンク: カバー写真のImage linkを事例紹介ページにします。
- ホバーの浮き上がり: 各画像のStyleパネルでBorder radiusに4、Drop shadowに1を設定します。Hover styleでDrop shadowを3に上げます。
- 案件の追加: 1つ目の下に同じプリセットのRowを追加します。
グリッドを絞り込み可能にする
静的グリッドは少数の案件に向きます。訪問者に種類で絞らせるには、各案件をコンテンツとして格納し、公開フィルター付きビューで表示します。ViewsはDrupalコアの一部です。
1. Portfolioコンテンツタイプを作る
- 開くのはStructure > Content types > Add content type (
/admin/structure/types/add) です。 - 「Portfolio」と名付けて保存します。
- 追加先はManage fieldsタブで、Imageフィールドを追加し、ラベル「Cover image」を付けます。
- 追加するのはList (text)フィールドで、ラベル「Project type」を付けて値に
web|Web、branding|Branding、campaign|Campaignなどを入れます。 - 作るのはContent > Add content > PortfolioでPortfolioアイテムを数件です。
2. ビューを作る
- 開くのはStructure > Views > Add view (
/admin/structure/views/add) です。 - 「Portfolio grid」と名付け、View settings下でContentのPortfolioタイプを表示します。
- チェックするのはCreate a blockで、表示形式をGridのfieldsにして保存します。
- ビューエディターでフィールドCover imageとTitleを追加し、形式設定でグリッドを3カラムにします。
- 対象はFilter criteria下でAddをクリックし、Project typeを選んでExpose this filter to visitorsにチェックします。ラベルは「Filter by type」です。
- 対象はAdvanced下で、Use AJAXをYesにします。ビルダーページ内公開フィルターはAJAX経由でしか動きません。
- ビューを保存します。
3. ページにビューを挿入する
- DXPR Builderに戻り、3つの静的カラムを空けるか新しいRowを追加します。
- クリックするのは+で、Drupal Viewsタブを開いてView: Portfolio grid (Block)を選びます。
- 設定ダイアログでShow exposed filtersにチェックしてSaveをクリックします。グリッドは「Filter by type」ドロップダウン付きで描画し、新規Portfolioアイテムは自動で載ります。
- ビルダーツールバーのSaveをクリックします。
表示結果
中央寄せの「実績」見出しがページを開きます。下の灰色帯に3案件が横に並び、各案件は名と成果の上にカバー写真があります。紫帯がお問い合わせでページを締めます。
図通りにならない場合
- カバー写真がテキストの下にあります。 写真がテキストより先に入り、新規エレメントはカラムの上に載ります。コントロールバーのドラッグハンドルで写真をテキスト上へドラッグします。
- カバー同士で高さが違います。 比率が違います。同じ比率に切り抜き、上げ直して新しい方を選びます。
- Portfolio gridがDrupal Viewsタブにありません。 ビューが無効か、ビルダーユーザープロファイルが隠しています。Structure > Viewsで有効にするか、管理者にユーザープロファイルのViews下でのチェックを頼みます。
- エディターに「Turn on Ajax on this view to use exposed filters.」と出ます。 ビューがAJAXを使いません。ビューエディターのAdvanced下でUse AJAXをYesにします。エレメントの見た目・動作がおかしいをご覧ください。
- 「Filter by type」ドロップダウンがありません。 Show exposed filtersがオフです。ビューエレメントの設定を開き、チェックしてSaveをクリックします。
次はこちら
- Drupal Views連携: ビュー表示のエレメントピッカー到達方法用
- 事例紹介: 各案件のリンク先ページ用
- Imageエレメント: 全画像設定用