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

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.

| improve this answer | |
  • How to get rid of the "row" class that gets added to the paragraph wrapping div? @jim – Prerit Mohan May 9 '17 at 14:57
  • Added to the answer above. – thejimbirch May 10 '17 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? – Prerit Mohan May 10 '17 at 15:49
  • 1
    Sounds like it is coming from the bootstrap layouts module. – thejimbirch May 11 '17 at 15:38
  • Correct. More here drupal.org/node/2877051 – Prerit Mohan May 11 '17 at 15:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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