How do I add a <div> over a paragraph's field, depending on another field of this paragraph?

Question

I have a paragraph (from the paragraphs module) which has two fields :

• field_title (text)
• field_title_level (list text)

The field_title_level can have either h2, h3, or h4 as a value. What I would like to do is to surround the title text with a h2/h3/h4 div.

I tried using templates (paragraph, or field). With the field one, I managed to add a div over the title, but I didn't manage to access the field_title_level in order to add the correct div. And using the paragraph template, I didn't manage to add any div over the title.

Any clue?

Answer 1

Don't use the field template -- you'll find it difficult to change the formatting of one field based on the value of another field at that level. You'll want to use the paragraph template (or sometimes even the node template containing the paragraphs entity reference revisions field) so that the values of both fields are in scope at the same time.

Something like this might work in the paragraph template:

{% if content.field_title_level.value == "h2" %}
  <h2>{{ content.field_title }}</h2>
{% endif %}
{% if content.field_title_level.value == "h3" %}
  <h3>{{ content.field_title }}</h3>
{% endif %}
{% if content.field_title_level.value == "h4" %}
  <h4>{{ content.field_title }}</h4>
{% endif %}

You could use {% if %}{% elseif %}{% else %}{% endif %} instead of consecutive ifs to provide a default ... I don't know what your data structure looks like.

You did mention that you want to use <div> elements, so maybe you want something more like this instead:

{% if content.field_title_level.value == "h2" %}
  <div class="h2">{{ content.field_title }}</div>
{% endif %}
{% if content.field_title_level.value == "h3" %}
  <div class="h3">{{ content.field_title }}</div>
{% endif %}
{% if content.field_title_level.value == "h4" %}
  <div class="h4">{{ content.field_title }}</div>
{% endif %}

Be aware, though, that <div> elements are not semantic HTML like the header tags. (Even though they may be visually styled to appear like HTML headers, they will not be treated the same way by assistive technologies, like screen readers for the blind.)

Finally, note that you can do some very cool tricks by rendering Paragraphs content in the node template, by iterating through the items in the Paragraphs entity reference revisions field like so:

{% if node.field_paragraphs_items %}
  {% for item in node.field_paragraphs_items %}
    {% if item.entity.field_title %}
      {% if item.entity.field_title_level_value == "h2" %}
        <h2>{{ item.entity.field_title }}</h2>
      {% endif %}
      {% if item.entity.field_title_level_value == "h3" %}
        <h3>{{ item.entity.field_title }}</h3>
      {% endif %}
      {% if item.entity.field_title_level_value == "h4" %}
        <h4>{{ item.entity.field_title }}</h4>
      {% endif %}
    {% endif %}
  {% endfor %}
{% endif %}

(Markdown syntax highlighting does not like my Twig, so there may be some errors in this example but hopefully you get the idea.)

Note the use of item.entity (in the node template) instead of content (in the paragraph template.) Just as pulling back from the field template to the paragraph template brought more field values into scope, rendering paragraphs entity references in the node template in this way will give you access to field values from the node as well as those in the paragraph.

There are pros and cons to both approaches. Keeping paragraph markup in the paragraph templates will keep your Twig tidier, so I generally recommend it unless your business logic requires you to render Paragraphs conditionally based on values in the parent node.

Answer 2

I remember seeing a video several years back about paragraphs being used with a "switch" field where the switch value controls the orientation of the content, or color, or something similar. I can't find it ATM, maybe you can do a search and be more lucky.

In the meantime there's this article with similar vibes: Drupal Paragraphs: let content managers easily choose coloring