web-dev-qa-db-ja.com

段落タイプのカスタムテーマのブートストラップカルーセル

背景情報：

カルーセルセクションのカスタムテーマを作成しようとしましたが、機能しません。 Drupalに付属するデフォルトのカルーセルを使用してみました。スライドショービューを使用してみました。また、 Jim BirのカスタムBootstrap = Carousel および Slick Carousel ですが、これらの拡張機能はまだベータ版であるため、使用できません。

問題文：

私がやろうとしている主な手段は、「Caraousel Slide」という別の段落タイプへの参照を持つCarousel Sectionという段落タイプを作成することです。

このデザインを使用して、ページのスライドを個別に整理できるようにしたいと考えていました。

Carousel Slide段落タイプ内には、次のフィールドがあります。

  1. スライド画像
  2. スライドのタイトル
  3. スライドの説明
  4. スライドリンク（スライドをクリックするとスライドが表示される場所です）

preprocessor hookを使用したいDrupalからこれらの値を取得し、twiggファイルに表示します。

質問：

どうすれば問題のステートメントを達成できますか？私が必要とする最低限の知識は、少なくともこれらのフィールドを自分のtwigファイルに表示する方法であり、そこからHTMLとCSSを使用してカルーセルを作成できます。

8theminghooksparagraphs
1
B. Cratty

非常に具体的なロジックが必要でない限り、私は前処理を使用しませんが、代わりにDrupalのテンプレートの提案とTwigを使用します。

私は常にCDNではなくSlickを使用しています。必要に応じて、自分のニーズに合わせて調整してください。すべてのファイル名は、テーマまたはモジュールのベースディレクトリを基準にしています。 UPPERCASE_WORDSを対応するマシン名に置き換えます。

カルーセルのライブラリを作成します。

_MYTHEME.libaries.yml_

_carousel:
  version: 1.0.0
  js:
    https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js: {type: external, minified: true, defer: true, async: true}
    js/my_carousel.js: {}
  css:
    layout:
      https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.min.css: {type: external, minified: true}
      css/my_carousel.css: {}
_

_js/my_carousel.js_

behaviorsはjQueryの.ready()ハンドラーに対応するdrupalesqueです（たとえば、カルーセルがajax化されたページングでビュー内にロードされている場合でも、ページングのたびに.slick()をトリガーします）。 。

_(function ($, Drupal) {
  Drupal.behaviors.myCarousel = {
    attach: function (context, settings) {
      $('[data-slick]', context).once('myCarousel').slick();
    }
  };
}(jQuery, Drupal));
_

_templates/paragraph--CAROUSELCONTAINER.twig.html_

コンテナテンプレートは、スリックオプションを変更する場所です。コンテナーの段落に整数フィールド「自動再生速度」がある場合、_my_carousel_options_を使用して_paragraph.field_autoplay_speed.0.value_に追加できます

_{% set my_carousel_options = '"autoplay": true' %}
{{ attach_library('MYTHEME/carousel') }}

<div{{attributes}} data-slick="{{ my_carousel_options }}">
  {{ content.FIELD_CONTAINING_SLIDES }}
</div>
_

_templates/paragraph--CAROUSELSLIDE.twig.html_

ここで、個々のスライドに何をレンダリングするかを決定できます

_{# maybe you also need an additional wrapper <div> around each invidiual slide #}
<a href="{{ paragraph.MY_LINK_FIELD.0.url }}">
  {{ content.MY_IMAGE_FIELD }}
  {{ content.MY_TITLE_FIELD }}
  {{ content.MY_DESCRIPTION_FIELD }}
</a>
_

必要に応じて、_templates/field--paragraph--MY-DESCRIPTION-FIELD.html.twig_のようなものを使用して、スライドサブフィールドのHTMLマークアップをさらに調整できます。

オプション：
Drupalによって自動的にレンダリングされるフィールドの周りのコンテナー_<div>_ sを削除する場合は、ラッパーのないフィールドテンプレートを作成します。例えば。 [〜＃〜] all [〜＃〜] _<div>_ sと、任意の段落のホストフィールドによってレンダリングされたフィールドラベルを削除したいと思います。
（これはすべての段落のホストフィールドに対してグローバルです。これが必要ない場合は、カルーセルのみに一致するテンプレートの提案に変更してください）

_field--entity-reference-revisions.html.twig_

_{% for item in items %}
  {{ item.content }}
{% endfor %}
_

最後に、カルーセル用の独自のCSSスタイルを_css/my_carousel.css_で作成し、キャッシュを再構築して、Drupalが新しいテンプレートファイルを検出するようにします。

これは基本的に、すべてのプロジェクトでカルーセルを作成する方法です。 Bootstrapテーマではテストされていませんが、これはある種の汎用チュートリアルです。

8
Hudri

Bootstrap Paragraphs モジュールは、迅速でダーティーなドロップインソリューションとして最善の策になる可能性があります。あなたはBootstrapと段落を使用していると言っていますが、モジュールにはあなたが探しているものがほぼ正確に含まれていると思います：

  • 「カルーセル」段落タイプ
  • 「スライドコンテンツ」と呼ばれる段落参照フィールドを含む
  • 「画像」と呼ばれる別の段落タイプを参照します。

独自の段落タイプを使用する場合は、そのモジュールに含まれている paragraph--bp-carousel.html.twig Twigファイルがコピーに役立つ可能性があります/ Bootstrapカルーセル設定に関する実装の詳細を貼り付けます。

それだけの価値があるので、私は IU Paragraphs モジュールに簡略化されたカルーセルを実装しました。これは、Bootstrap Paragraphsのようなネストされた段落タイプも使用します。 Twigテンプレートを使用すると、次のように見やすくなります。

  • 外側のTwigテンプレート paragraph--iu-carousel.html.twig は、カルーセルのラッパーdivをレンダリングします。
  • 内側のTwigテンプレート paragraph--iu-image.html.twig は、<img>タグ自体をレンダリングし、キャプションが提供されている場合はオプションでそれらを<figure>および<figcaption>タグでラップします。
  • カルーセルJavaScriptは、カスタムクラス（rotator）に基づいてスリックスライダーをロードするためのカスタム実装ですが、カルーセルをロードするためのJavaScriptは、インディアナ大学のWebフレームワーク（ http：// assets。 iu.edu/web/3.x/js/iu-framework.js ）なので、その一部はあまり役に立たないかもしれませんが、TwigとHTMLはクリーンであり、始めましょう。

とにかく、これが上記のHurdiの回答で概説された一般的な手順の補強として役立つことを願っています。幸運を！

2
JamesWilson

データを段落にかなり整理し、段落にはCSSとJSで使用する標準クラス名（使用しているテーマによって異なります）があるため、非常に簡単な解決策はスライダーライブラリーを含めることです（私はSlickを使用しています）。テーマのJSファイルにビヘイビアーを記述して、スライドショーを初期化します。

  • スライダーを提供するモジュールを含める-私はそれが答えのためにスリックであると仮定します
  • テーマにスリックライブラリを含めます：slick/slick。
    • 代わりに、いくつかのPHPを記述してslick/slickをcarousel段落タイプへの添付ファイルとしてhook_preprocess_paragraph()などのフックで含めることができます。
  • Drupal.behaviors.custom_carousel = { ... }のような動作を記述します。そして、paragraph--type-carouselごとに、必要なパラメーターでカルーセルを初期化します。

私は多くのJSライブラリでこれを行ってきました。特に、Drupalとの素敵な統合がない場合はそうです。

1
Jigarius