今年もGWも間近ですが、Advent Calendar 2018を投稿します。
https://qiita.com/bassline121/items/ff158a171b088e2a7c0d
前回の続きになります。
前回は簡単にBootstrap 4 SASS - Barrio Starter Kitでテーマを作成してみたのでは今回は学習用にスライドショーを使ったブロックを作成してみました。
LPページ等で使うスライドショーで、任意の画像・タイトル・リンク先を入れて、更新者が自分で編集できるもの。
イメージとしては、画像は上げませんがこんなイメージです。
http://blog.livedoor.com/
内容として、一番上にメインのスライドショーがあります。
その下にも、複数のスライドショーがあり、縦にスクロールするのもあります。
必要なモジュールをインストールします。
$ composer require drupal/paragraphs drupal/libraries drupal/slick drupal/slick_ui drupal/slick_paragraphs drupal/slick_views drupal/blazy drupal/blazy_ui drupal/entity_reference_revisions
/admin/modulesにアクセスして、
Blazy
Blazy UI
Paragraphs
Slick
Slick Paragraphs
Slick UI
Slick Views
Entity Reference Revisions
のモジュールを有効にします。
次に準備として管理画面から画像スタイルの定義を追加します。
/admin/config/media/image-styles
今回は[2000px]として作成しました。
新しいエフェクトを選択で拡縮とトリミングを選択後、幅2000ピクセル・高さ1000ピクセルとしました。
/admin/structure/paragraphs_type
にアクセスして、パラグラフタイプを作成します。
今回は、Labelはキャンペーンエリアで作成し、システム内部名称をpara01としました。
続いて、フィールドの追加のボタンでフィールドを定義して行きます。
今回は、スライドショーで制御したい部分はタイトルとリンク先と画像をセットにして表示するもとのします。
表向きに必要になるフィールドは「任意の画像・任意のタイトル・任意のリンク」が必要ですが、裏側でそれぞれセットしたものを掲載するしないか制御するフィールドが必要なので追加します。
フィールドを追加のボタンを押すと
新しいフィールドの追加と既存のフィールドを再利用が選択できますが、新しいフィールドの追加から追加します。
今回はLABELとシステム内部名称をこのように作成しました。
（新しいフィールドの追加、LABEL、システム内部名称の順）
掲載フィールド以外は必須フィールドにチェック
テキスト (プレーン)、タイトル、field_para_title
リンク、リンク、field_para_link
画像、画像、field_para_photo
真偽値、掲載、field_para_status
作成したら、フィールドの管理はこのように設定しました。
フォームの表示管理はこのように設定しました。
表示管理はこのように設定しました。
これでパラグラフタイプの準備が出来ました。
今度はコンテンツタイプのフィールドに先程作成したキャンペーンエリアパラグラフタイプを追加して表示させます。
/admin/structure/types
今回はコンテンツタイプをlandingで作成します。
フィールドの追加で新しいフィールドの追加は参照リビジョンのParagraphを選択。
Labelはlanding、システム内部名称はfield_landingにしました。
参照するアイテムのタイプはParagraphに、許容する値の数は無制限で保存します。
次の画面の参照タイプはそのままで保存します。
フォームの表示管理タブでlandingのウィジットをパラグラフクラシックにし、フォーマットをSlick Pragraphs Vanillaに変更し、画面右端の歯車マークを押して、変更します。
最後に更新ボタンを押さないと保存されません。
次に表示の管理タブでlandingのラベルを非表示にし、フォーマットをSlick Pragraphs Vanillaに変更して更新ボタンで保存します。
歯車マークはここでは設定を変えずにOptionset: defaultと表示されていればOKです。
/admin/people/permissions
で表示権限の設定をします。
作成したキャンペーンエリアを匿名ユーザーでも見れるようにチェックを入れて保存します。
コンテンツタイプlandingから元になる管理するページを作成します。
キャンペーンエリアの枠に必要なだけ画像・タイトル・代替テキスト・リンク・掲載を追加し、最後に保存します。
登録したノードでの表示は、非掲載状態でも表示されています。
画像登録が終わりましたので、これからViewsでブロックを作成します。
/admin/structure/views/add
今回は[para04content]という名前で作成しました。
ビューの設定は'Content'タイプ指定はlanding
ブロックの設定ではブロックの表示設定をSlick Carouselでフィールドを指定します。
タイトルは公開用のブロックとして表示させたいので[slick Published on Block]としました。
フォーマットはSlick Carouselはと指定したので設定を変更します。
Vanilla slickとOverride main optionsetにチェックを入れて、OVERRIDABLE OPTIONS
好きな設定をして行きます。
Grid largeは１を入れます。
リレーションシップはカテゴリーが[Content]になっているものを指定します。
field_landingから参照されているParagraph
field_landing: Paragraph
FIELDSはカテゴリーが[Paragraph]になっているものを指定します。
タイトル・リンク・画像・掲載の４つです。
フィルターの条件はカテゴリーが[Content]のPublishedで[はい]（掲載している）
Content typeが[landing]であるもの。
カテゴリーが[Paragraph]でParagraphの掲載が[TRUE]（掲載している）
Paragraph typeで[キャンペーンエリア]を指定します。
ここまで設定が完了したらViewsを保存します。
動作確認が出来たらブロックを複製して、管理者側で見られる[slick Published off Block]を作成するもいいでしょう。
ここからテンプレートの追加・修正になります。
詳しい解説はありませんが、core等から該当するテンプレートファイルをコピーしてきてリネームし、47行目を修正します。
テンプレートでのparagraphの取得方法は、間違っているかも知れませんが・・・。
core/modules/views/templates/views-view-fields.html.twig
↓
themes/custom/qiita/templates/views/views-view-fields--para04content--block-1.html.twig
<{{ field.element_type }}{{ field.element_attributes }}>{{ field.content }}</{{ field.element_type }}>
↓
<a href="{{ row._relationship_entities.field_landing.field_para_link.uri }}">
<{{ field.element_type }}{{ field.element_attributes }}>{{ field.content }}</{{ field.element_type }}></a>
これだけでリンクのURLに飛ぶようになりました。
Drupalデフォルトのslickの動作では、横動作しかしませんので、縦に動作させたい場合は/admin/config/media/slick
にアクセスして+Add slick optionsetボタンから追加できます。
右下にある垂直にチェックを入れて保存すれば縦の動作になります。
とりあえずスライドショー表示はしたのですが、画像幅が2000ピクセルを縮小して表示しているので、表示速度が遅い・画像が重いなどと言われてします。
画像の表示サイズが画像幅に近いときれいな画像が表示されますが、小さい画像を拡大してお茶を濁す表示するのが通例かと思います。
先程は[2000px]で作成した画像スタイルの定義を小さい画像幅で定義します。
スタイル名は[600]として、画像幅を600ピクセルとしました。
前回カスタムして作成したテーマのファイルに追加します。
function qiita_sass_preprocess_image(&$variables) {
//小さい画像スタイル名にします。600
if ($variables['style_name'] == '600') {
$variables['attributes']['style'][] = 'width:100%;';
}
}
これで600ピクセルの画像が画面幅まで広がり表示されるようになりました。
※今回はslickで行いましたがbxsliderなどでも可能です。
※Viewsで作成するとき[Content]ではなく[Pragraph]で作成した場合は表示は可能ですが、取得先が違います。
<a href="{{ row._entity.field_para_link.uri }}">
<{{ field.element_type }}{{ field.element_attributes }}>{{ field.content }}</{{ field.element_type }}>
</a>