1

Hi in paragraphs module for drupal 7, how can we assign classes/html tags to individual field items of paragraph bundle?

There is Classy Paragraph module that lets us to add classes to the paragraph wrapper/section. How to achieve the same for individual fields of paragraphs?

1 Answer 1

1

Most people add another field, such as a select list with predefined options, and turn that into a class using a preprocess, or merge in the paragraph twig template. If don't have a predefined list, and you allow user input, you will need to sanitize the input.

How I do it in the twig template is like this:

{# 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>

How do the Bootstrap styles get added? Here is an excerpt from the LESS file:

.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;
}

Which compiles into the following 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;
}

You can overwrite that in your theme if needed.

6
  • How to get rid of the "row" class that gets added to the paragraph wrapping div? @jim May 9, 2017 at 14:57
  • Added to the answer above. May 10, 2017 at 15:41
  • Hmm thanks. However if we use bootstrap layouts module in D8. There is a actual "row" class being appended to paragraph wrapper. Was trying to figure out where it is coming from and how to get rid of it. Any clues? May 10, 2017 at 15:49
  • 1
    Sounds like it is coming from the bootstrap layouts module. May 11, 2017 at 15:38
  • Correct. More here drupal.org/node/2877051 May 11, 2017 at 15:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.