0

I'm trying to create a custom paragraph template that displays as an accordion. I am able to correctly reference most of the other variables, except for the Text (formatted, long) field types as whenever I do .value for the field, it returns the escaped value so it looks like <ul><li>text</li><li>text2</li></ul> instead of the actual bulleted list.

I am able to get the value using .value|raw, but I read that I should be avoided and I'd like to get this perform correctly.

Please let me know if any further information is required.

The following code is under paragraph--rn-accordion.html.twig. I have two paragraph types, rn_accordion and rn_accordion_section(which houses all the different fields). I tried to mirror this from the bootstrap module to get this working.

The troublesome fields are: {{ item['#paragraph'].field_rn_acc_1.value }} and {{ item['#paragraph'].field_rn_acc_2.value }}

            {# Prints Accordion template. #}
            <div{{ attributes.addClass(classes).setAttribute('id', paragraph_id) }} role="tablist" aria-multiselectable="true">
                <div class="panel panel-default consortia">
                  {# Loop through all of the accordion sections. #}
                  {% for key, item in content.field_rn_accordion if key|first != '#' %}
                    <div class="panel-heading" role="tab" id="heading-{{ item['#paragraph'].field_rn_acc_abbr.value }}">
                      <div class="row panel-title">
                          <div class="col-sm-1 col-xs-2">
                            <img src="{{ base_path }}Images/Icons/{{ item['#paragraph'].field_rn_acc_abbr.value }}_Icon.png" alt="{{ item['#paragraph'].field_rn_acc_abbr.value }}" class="img-responsive"/>
                          </div>
                          <div class="col-sm-11 col-xs-10">
                            {# Print the accordion section title. #}
                            <h5>{{ item['#paragraph'].field_rn_acc_title.value }}</h5>
                            <p>
                              <small>
                                <a href="http://{{ item['#paragraph'].field_rn_acc_link.value }}" target="_blank">
                                {{ item['#paragraph'].field_rn_acc_link.value }}
                                </a>
                              </small>
                            </p>
                            <a class="button collapsed" data-toggle="collapse" data-parent="{{ paragraph_id }}" href="#{{ item['#paragraph'].field_rn_acc_abbr.value }}-1" aria-expanded="false" aria-controls="{{ item['#paragraph'].field_rn_acc_abbr.value }}-1">{{ item['#paragraph'].field_rn_acc_1_btn.value }}
                            </a>
                            <a class="button collapsed" data-toggle="collapse" data-parent="{{ paragraph_id }}" href="#{{ item['#paragraph'].field_rn_acc_abbr.value }}-2" aria-expanded="false" aria-controls="{{ item['#paragraph'].field_rn_acc_abbr.value }}-2">{{ item['#paragraph'].field_rn_acc_2_btn.value }}
                            </a>
                          </div>
                      </div>
                    </div>
                    <div id="{{ item['#paragraph'].field_rn_acc_abbr.value }}-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-{{ item['#paragraph'].field_rn_acc_abbr.value }}">
                    {{ item['#paragraph'].field_rn_acc_1.value }}
                    </div>
                    <div id="{{ item['#paragraph'].field_rn_acc_abbr.value }}-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-{{ item['#paragraph'].field_rn_acc_abbr.value }}">
                    {{ item['#paragraph'].field_rn_acc_2.value }}
                    </div>
                  {% endfor %}
                </div>
            </div>
  • <ul><li>text</li><li>text2</li></ul> - this is a bulleted list. How do you expect a bulleted list be represented anyways? – Joseph May 17 '17 at 16:12
  • I understand your confusion, how I represented it is exactly how it's outputted. But I don't want the value to be escaped, but instead to be render how a bulleted list should actually look. – nightowl May 17 '17 at 17:14
2

If you want to render a formatted text field you have to use the render element processed_text:

  {% set paragraph =  item['#paragraph'] %}

  {% set body = {
    '#type':   'processed_text',
    '#text':    paragraph.field_rn_acc_1.value,
    '#format':  paragraph.field_rn_acc_1.format,
  } %}

  <div id="{{ paragraph.field_rn_acc_abbr.value }}-1" class="panel-collapse collapse">
  {{ body }}
  </div>
  • I tried this, but it unfortunately does not output anything. – nightowl May 17 '17 at 17:21
  • That's the answer for the question in the title. Can't debug your code. Did you consider theming each paragraph and the fields they contain in separate templates? That's the concept of nested paragraphs. Theme the layout of each and make them reusable. What you try to do is only for a fixed structure of paragraphs. – 4k4 May 17 '17 at 17:59
  • The reason I chose not to make them separate was because of the code output for the accordion and the fact that for each of this paragraph type I wanted to have the exact same fields, no differences. Your code actually ended up working for me though. I had to place it within the loop function for it to work. Before I was placing it above the code where it was setting the paragraph_id (not displayed in my question but lives right above {# Prints Accordion template. #}). Thanks for your help. – nightowl May 17 '17 at 18:43

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.