web-dev-qa-db-ja.com

7-段落バンドルの個々のフィールドにクラスを追加する

こんにちはdrupal 7の段落モジュールです。段落バンドルの個々のフィールドアイテムにクラス/ htmlタグを割り当てるにはどうすればよいですか？

段落ラッパー/セクションにクラスを追加できるClassy Paragraphモジュールがあります。段落の個々のフィールドで同じことを達成するにはどうすればよいですか？

7themingentitiesparagraphs
1
Prerit Mohan

ほとんどの人は、事前定義されたオプションのある選択リストなどの別のフィールドを追加し、前処理を使用してそれをクラスに変換するか、段落twigテンプレートにマージします。事前定義リストがない場合、ユーザー入力を許可する場合は、入力をサニタイズする必要があります。

twigテンプレートでそれを行う方法は次のとおりです：

{# Renders Width field. #}
{# Sets class name from values in database. #}
{% if content.bp_width|render %}
  {% set layout_width = content.bp_width['#items'].getString() %}
  {% set layout_width_classes = [
'paragraph--width--tiny' == layout_width ? 'paragraph--width--tiny',
'paragraph--width--narrow' == layout_width ? 'paragraph--width--narrow',
'paragraph--width--medium' == layout_width ? 'paragraph--width--medium',
'paragraph--width--wide' == layout_width ? 'paragraph--width--wide',
'paragraph--width--full' == layout_width ? 'paragraph--width--full',
  ]
  %}
{% endif %}

{# The template default set classes. #}
{%
set classes = [
'paragraph',
'paragraph--type--' ~ paragraph.bundle|clean_class,
view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
]
%}

{# Merges Width field with classes. #}
{% set width_field = content.bp_width|render %}
{% if width_field %}
  {% set classes = classes|merge(layout_width_classes) %}
{% endif %}

{# Prints div with classes, and content without Width field. #}
<div{{ attributes.addClass(classes) }}>
  <div class="paragraph__column">
    {{ content|without('bp_width') }}
  </div>
</div>

Bootstrapスタイルはどのように追加されますか？これはLESSファイルからの抜粋です：

.paragraph {
  .make-row();
  margin-left: 0;
  margin-right: 0;
}

.paragraph > .paragraph__column {
  .make-sm-column(12);
  .make-md-column(12);
  .make-lg-column(12);
  padding-bottom: @jumbotron-padding;
}

これは、次のCSSにコンパイルされます。

.paragraph {
  margin-left: -15px;
  margin-right: -15px;
  margin-left: 0;
  margin-right: 0;
}
.paragraph > .paragraph__column {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 30px;
}

必要に応じて、テーマで上書きできます。

1
thejimbirch