0

I have Paragraphs installed and am creating a content-type which has nested Paragraphs - so there is a Paragraph with a Title Field, a Body Field - this is then nested in a another Paragraph, so that I can have several boxes across the page. So far so good - what I want to learn is to output the fields so I can put them in jQuery UI tabs.

In my template I currently have:

{{ content.field_tab_title }}
{{ content.field_body }}

Which outputs: Title Body Title Body Title Body etc.

What I need is: Title Title Title Body Body Body

So that I can put all the titles in li's for jQuery UI. I've tried putting

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

But then nothing comes out at all.

UPDATE Following Kevin's Suggestions, I've started again with my templates and have now got;

in paragraph--tab.html.twig:

<ul class="tab-box">
{{ content.field_tab_title }}
</ul>
<div>{{ content.field_body }}</div>

and in field--paragraph--tab.html.twig:

{% for item in items %} 
  <li class="tab-title">{{ item.content }}</li> 
{% endfor %}

but this is still outputting:

<ul><li>Tab Title - 1</li></ul>
<div>Body Copy 1</div>
<ul><li>Tab Title - 2</li></ul>
<div>Body Copy 2</div>

But what I need is:

<ul><li>Tab Title - 1</li><li>Tab Title - 2</li></ul>
<div>Body Copy 1</div>
<div>Body Copy 2</div>
0

This is going to be tricky, but you will need to think through the rendering layers via twig and work inside out.

Example, if you need all field tab titles in li's, the twig for field tab title (field--field-tab-title.html.twig) should look something like this:

{% for item for items %} 
  <li class="tab-title">{{ item }}</li> 
{% endfor %} 

In your Paragraph field twig, you would put the wrappers as needed, like:

<ul class="tabs">
  {{ content.field_tab_title }}
  {{ content.field_tab_body }}
</ul>

The same applies to Body:

{% for item for items %} 
  <li class="tab-body">{{ item }}</li> 
{% endfor %} 

Here is a similar example perhaps you can follow. This isn't tabbed content, but it is accordion based, so it is similar. Still paragraphs.

Main container (paragraph--component):

<div{{ attributes.addClass(classes) }}>
  {% block content %}
    {{ content }}
  {% endblock %}
</div>

Main accordion paragraph twig, extends the main container (paragraph--component is a custom twig suggestion I made for easier theming):

{% extends 'paragraph--component.html.twig' %}

{% set attributes = attributes.addClass('c-accordion') %}

{% block content %}
  {{ content }}
{% endblock %}

The accordion item itself, containing a title and other fields:

<section class="c-accordion__item">
  <input type="checkbox" class="c-accordion__trigger visuallyhidden" id="step-{{ paragraph.id() }}" />
  <label for="step-{{ paragraph.id() }}" class="c-accordion__header">
    {% if paragraph.field_accordion_step_title is not empty %}
      <h4 class="c-accordion__step">{{ content.field_accordion_step_title }}</h4>
    {% endif %}
    <h5 class="c-accordion__title">{{ content.field_accordion_title }}</h5>
  </label>
  <div class="c-accordion__body">
    <div class="c-accordion__description">{{ content.field_accordion_body }}</div>
  </div>
</section>

When this renders, all X accordion items are rendered the same way into one container. Granted, in my example, the markup container for fields live outside of the field twig and in this twig here, because I chose to have 0 field markup in that project. You can go either way you want.

  • Thanks Kevin, I'll give that a go (no don't need both in one li) - fingers crossed. – iain-g Dec 12 '17 at 20:53
  • I added a real world example maybe that will clarify paragraph theming. – Kevin Dec 12 '17 at 21:01
  • Can't work out what I'm doing wrong - if I wrap {% for item in items %} {% endfor %} around a <li> they stop outputting, I just get an empty <ul> . Think I'm going to delete all my Paragraph twig templates and start again, follow through your process above and see how it goes - thanks for all the detail Kevin. – iain-g Dec 12 '17 at 22:00

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.