Bootstrap 4 SASS - Barrio Starter Kitを試してみた（２）

今年もGWも間近ですが、Advent Calendar 2018を投稿します。

https://qiita.com/bassline121/items/ff158a171b088e2a7c0d
前回の続きになります。

前回は簡単にBootstrap 4 SASS - Barrio Starter Kitでテーマを作成してみたのでは今回は学習用にスライドショーを使ったブロックを作成してみました。

LPページ等で使うスライドショーで、任意の画像・タイトル・リンク先を入れて、更新者が自分で編集できるもの。

イメージとしては、画像は上げませんがこんなイメージです。
http://blog.livedoor.com/

内容として、一番上にメインのスライドショーがあります。
その下にも、複数のスライドショーがあり、縦にスクロールするのもあります。

必要なモジュールをインストールします。

```bash:command
$ 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
```
作成したら、フィールドの管理はこのように設定しました。
![qiita20190222.png](https://qiita-image-store.s3.amazonaws.com/0/59566/55f0af47-2da0-68ea-fa05-84987c03856b.png)
`フォームの表示管理`はこのように設定しました。
![スクリーンショット-2019-02-23-11.29.28.png](https://qiita-image-store.s3.amazonaws.com/0/59566/280bb5b2-21b8-041a-1b5a-9bb79e3ed2d2.png)
`表示管理`はこのように設定しました。
![スクリーンショット 2019-04-22 22.02.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59566/9a2bd136-62fc-2775-a8ab-d4cd6097473d.png)

これでパラグラフタイプの準備が出来ました。
今度はコンテンツタイプのフィールドに先程作成した`キャンペーンエリア`パラグラフタイプを追加して表示させます。

`/admin/structure/types`
今回はコンテンツタイプを`landing`で作成します。
`フィールドの追加`で`新しいフィールドの追加`は参照リビジョンの`Paragraph`を選択。
Labelは`landing`、システム内部名称は`field_landing`にしました。
`参照するアイテムのタイプ`は`Paragraph`に、許容する値の数は`無制限`で保存します。
次の画面の参照タイプはそのままで保存します。
![lp2019042203.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59566/b5049577-22c8-65fb-7a56-7aad811698d1.png)

`フォームの表示管理`タブでlandingのウィジットを`パラグラフクラシック`にし、フォーマットを`Slick Pragraphs Vanilla`に変更し、画面右端の歯車マークを押して、変更します。
最後に`更新`ボタンを押さないと保存されません。
![スクリーンショット 2019-04-29 7.33.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59566/27be8516-cd33-2dc1-4358-a8d5aad838c9.png)

次に`表示の管理`タブでlandingのラベルを`非表示`にし、フォーマットを`Slick Pragraphs Vanilla`に変更して`更新`ボタンで保存します。
歯車マークはここでは設定を変えずに`Optionset: default`と表示されていればOKです。

`/admin/people/permissions`
で表示権限の設定をします。
作成した`キャンペーンエリア`を匿名ユーザーでも見れるようにチェックを入れて保存します。
![lp2019022202.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59566/f7d71d68-f553-e152-79dc-544710e5aea0.png)

---
コンテンツタイプ`landing`から元になる管理するページを作成します。
`キャンペーンエリア`の枠に必要なだけ画像・タイトル・代替テキスト・リンク・掲載を追加し、最後に保存します。
![スクリーンショット-2019-04-29-8.19.30.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59566/91613b06-7202-7881-3198-94305dd4907e.jpeg)
登録したノードでの表示は、非掲載状態でも表示されています。

---
画像登録が終わりましたので、これから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`は１を入れます。
![スクリーンショット 2019-04-29 8.32.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59566/bdf479c4-f0e4-7dd6-d54e-e4be3de611bf.png)

リレーションシップは`カテゴリー`が[Content]になっているものを指定します。
field_landingから参照されているParagraph
field_landing: Paragraph

FIELDSは`カテゴリー`が[Paragraph]になっているものを指定します。
タイトル・リンク・画像・掲載の４つです。

フィルターの条件は`カテゴリー`が[Content]の`Published`で[はい]（掲載している）
`Content type`が[landing]であるもの。
`カテゴリー`が[Paragraph]で`Paragraph`の`掲載`が[TRUE]（掲載している）
`Paragraph type`で[キャンペーンエリア]を指定します。

ここまで設定が完了したらViewsを保存します。
![lp2019042204.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59566/8adb04ad-2612-61d4-443b-e221264718c0.png)

動作確認が出来たらブロックを複製して、管理者側で見られる[slick Published off Block]を作成するもいいでしょう。

ここからテンプレートの追加・修正になります。
詳しい解説はありませんが、core等から該当するテンプレートファイルをコピーしてきてリネームし、47行目を修正します。

テンプレートでのparagraphの取得方法は、間違っているかも知れませんが・・・。

```bash:コピー＆リネーム
core/modules/views/templates/views-view-fields.html.twig
↓
themes/custom/qiita/templates/views/views-view-fields--para04content--block-1.html.twig
```
```bash:views-view-fields--para04content--block-1.html.twigの47行目修正
    <{{ 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`ボタンから追加できます。

右下にある`垂直`にチェックを入れて保存すれば縦の動作になります。
![lp2019042205.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59566/53f38686-52c9-9d46-b003-b90634b13b98.png)

---

とりあえずスライドショー表示はしたのですが、画像幅が2000ピクセルを縮小して表示しているので、表示速度が遅い・画像が重いなどと言われてします。

画像の表示サイズが画像幅に近いときれいな画像が表示されますが、小さい画像を拡大して~~お茶を濁す~~表示するのが通例かと思います。

先程は[2000px]で作成した画像スタイルの定義を小さい画像幅で定義します。
スタイル名は[600]として、画像幅を600ピクセルとしました。

前回カスタムして作成したテーマのファイルに追加します。

```bash:qiita_sass.theme
function qiita_sass_preprocess_image(&$variables) {
//小さい画像スタイル名にします。600
  if ($variables['style_name'] == '600') {
    $variables['attributes']['style'][] = 'width:100%;';
  }
}
```
これで600ピクセルの画像が画面幅まで広がり表示されるようになりました。

---
※今回はslickで行いましたがbxsliderなどでも可能です。
※Viewsで作成するとき[Content]ではなく[Pragraph]で作成した場合は表示は可能ですが、取得先が違います。

```bash:views-view-fields--para04content--block-1.html.twigの47行目修正
  <a href="{{ row._entity.field_para_link.uri }}">
    <{{ field.element_type }}{{ field.element_attributes }}>{{ field.content }}</{{ field.element_type }}>
    </a>
```