12

I have a content type, basic, where i have added a Paragraph field field_pr that has two fields: field_text, field_color. I have a twig template node--basic--full.html.twig where I want to print the value of the paragraph field node.field_pr.

node.field_pr can have between one and ten paragraph values.

When I print the array for content.field_pr, I get a huge array. However, I only want the values from the field_pr.field_text and field_pr.field_color. How would I be able to do this from the node twig template?

I have tried the following but cannot seem to access the values. What am I missing?

{% for field in content.field_pr %}
   {{ field[loop.index0].entity.field_text.value }}
   {{ field[loop.index0].entity.field_color.value }}
{% endfor %}

{% for field in content.field_pr %}
   {{ field[loop.index0]['#paragraph'].field_text.value }}
   {{ field[loop.index0]['#paragraph'].field_color.value }}
{% endfor %}

Here is an image of the array that is printed for the node.field_pr field. array that is printed for the node.field_pr field

5 Answers 5

8

Not sure if it's possible with your current approach. Here is how I would approach this.

In your node template file just do a {{ content.field_pr }}

Create a template file for your paragraph.

paragraph__[view_mode] (e.g. paragraph--default.html.twig)

paragraph__[type] (e.g. paragraph--image.html.twig)

paragraph__[type]__[view_mode] (e.g. paragraph--image--default.html.twig)

source: Theming in Paragraphs for Drupal 8

In paragraph--[type].html.twig you do {{ content.field_text }} and {{ content.field_color }}

20
  • 1
    Apologies for my ignorance but how do I render paragraph.html.twig on my template file (page.html.twig)?
    – clestcruz
    Jun 8, 2018 at 7:24
  • 1
    @clestcruz why not in node.html.twig?
    – No Sssweat
    Jun 8, 2018 at 7:26
  • @NoSssweat node.html.twig? Sorry I was trying to figure out how I can just print the values from my paragraph to my templates file. So far I've managed to create a paragraph.html.twig. I'm still new to Drupal apologies
    – clestcruz
    Jun 8, 2018 at 7:30
  • @clestcruz, yes you'll need to create node--[content-type-name].html.twig. Ex: node--articles.html.twig and follow my answer.
    – No Sssweat
    Jun 8, 2018 at 7:32
  • 1
    @clestcruz i recommend using what NoSssweat said. Use node.html.twig and display the field using {{content.field_machine_name_paragraph}}. Then enable Twig debugging and you can create a new twig template from there. Nov 6, 2018 at 23:29
8

To print paragraph fields in a loop (for sliders, etc.) in page--content-type.html.twig use below snippet:

{% for item in node.field_paragraph_mac_name %}
  {{ item.entity.field_title.value }}
  <img src="{{ file_url(item.entity.field_image.entity.fileuri) }}" />
{% endfor %}
2
  • To print alt tag, use alt="{{item.entity.field_image.alt}}".
    – Hashmat
    Nov 9, 2018 at 10:31
  • 1
    Why we can't use {{ item.entity.field_title }} directly? The problem is for field such as "body" that need specific rendering. Using {{ item.entity.field_body.value }} will requiere to use an usafe {{ item.entity.field_body.value|raw }}.
    – gagarine
    Jun 13, 2020 at 21:16
4

I figured this one out. With Twig Tweak enabled you can print paragraphs from the node object without using content:

{% for item in node.field_my_paragraph_field %}
     {{ drupal_entity('paragraph', item.target_id) }}
{% endfor %}
1
  • 1
    Just use {{ content.field_my_paragraph }} instead, does exactly the same, is cache safe, is more performant, and does not require an extra module.
    – Hudri
    Nov 7, 2018 at 11:11
2

Building on the answer by user33560. If you have have nested paragraphs and you want to print or get the 2nd-level paragraph fields from within the 1st-level paragraph.html.twig:

{% set paragraph_name = content.field_paragraph_name %}

{% for item in paragraph_name['#items'] %}
    {{ drupal_entity('paragraph', item.target_id) }}
{% endfor %}

You can also use {{ content.field_paragraph_name }} to print all paragraph items, or print a subset such as {{ content.field_paragraph_name.field_example }}. Use {{ content.field_paragraph_name|without('field_example') }} to temporarily suppress the printing of a given child element.

0

You can use {{ node.ref_field_name.entity.field_name.value }}

This site is temporarily in read-only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .