6.9 Views のテーマ作成 Drupal。サムネイル付き owl carousel スライドショーの作成。

Views のテンプレートが私たちに合わないことが非常によくあるので、Views のテンプレートをオーバーライドできます。残念ながら、Views で目的のテンプレートを探す UI はありませんが、パターンを使ってテンプレートを再定義できます。

パターンについて詳しくはこの記事で:

6.6. Drupal でのテンプレートの操作。Drupal のコアにあるテンプレートとは。

特に、私たちが関心があるのはこれです:

以下は、オーバーライドするための可能なテンプレート名です。

View Name - foobar（マシン名）
Display format - unformatted（unformatted list、可能なオプションを追加）
Display Style - fields
Display Name — page

views-view--foobar--page.html.twig
views-view--page.html.twig
views-view--foobar.html.twig
views-view.html.twig

views-view-unformatted--foobar--page.html.twig
views-view-unformatted--page.html.twig
views-view-unformatted--foobar.html.twig
views-view-unformatted.html.twig

views-view-fields--foobar--page.html.twig
views-view-fields--page.html.twig
views-view-fields--foobar.html.twig
views-view-fields.html.twig

Owl Carousel 1.x プラグインには、ギャラリーにサムネイルを表示する機能がありません。したがって、Owl Carousel バージョン 2.x を使います。そこにはサムネイルのサポートがあります。テンプレートの再定義、CSS、Javascript コードの記述を理解したくない場合は、単に Views Slideshow モジュールをインストールできます:

https://www.drupal.org/project/views_slideshow

あるいは Flex Slider モジュール:

https://www.drupal.org/project/flexslider

CSS、jQuery の知識なしで、それらでスライドショーを素早く構成できます。

私たちは Views テンプレートの再定義と jQuery ライブラリの接続を練習します。

まず、Owl Carousel 2.x ライブラリをダウンロードして組み込みます:

https://github.com/OwlCarousel2/OwlCarousel2

もしかすると Owl Carousel 1.x を見つけたかもしれません:

https://github.com/OwlFonk/OwlCarousel

これは私たちには合いません。サムネイルをサポートしておらず、そのためには追加のコードを書く必要があります。

owl-carousel フォルダー（owl.carousel.min.js ファイルがある場所）を私たちのテーマのフォルダーにコピーし、次にカルーセルの css と js ファイルを組み込みます。テーマの .libraries.yml ファイルに次の行を追加します:

global-styling:
  version: 1.x
  css:
    theme:
      owl-carousel/owl.carousel.css: {}
      owl-carousel/owl.theme.css: {}
      owl-carousel/owl.transitions.css: {}
      css/style.css: {}
      css/print.css: { media: print }
  js:
    js/custom.js: {}
    owl-carousel/owl.carousel.min.js: {}
  dependencies:
    - core/jquery

私は /js、css フォルダー内の js ファイルを /css フォルダーに移しませんでしたが、あなたは移せます。その場合、css ファイル内の、おそらく images フォルダーに置いた画像へのパスを修正するのを忘れないでください。

変更を適用するには、キャッシュをクリアする必要があります。

それでは、ギャラリーのコンテンツタイプを作成し、それに画像フィールドを追加しましょう。

新しいビューを作成し、新しいコンテンツタイプから 1 つのフィールド image を表示します。