Content type with 3 paragraphs fields: How can I output to different parts of page.html.twig?

user110890

7/23/24, 11:33 PM

I have a content type called (My Page) with 3 paragraph types, for a slider to display images, for text to display text, and for sidebar content. (The sidebar is a <div>, not a Drupal region/block).

Using the page.html.twig template, I am able to output the content to {{ page.content }}. However, it dumps all the content of all 3 paragraph types in one place.
I'd like to be able to separate the content as in this screenshot.

Paragraph type 1 should be rendered in <header>, paragraph type 2 in <main>, and paragraph type 3 in <div id="sidebar">.

The page.html.twig template is the following. (I simplified the section responsible for outputting the paragraph type content.)

{% block content %}

*****I'd like to paragraph type 1 to output here**** {{ page.content }} *****I'd like to paragraph type 2 to output here**** *****I'd like to paragraph type 3 to output here**** {% endblock %} ```

I use the Barrio subtheme.

If I can just figure out how to separate the content across the 3 <div>, that would be great.

Is there a conditional logic I could use?

if paragraph type 1 machine name  = X 
{{ page.content}}
if paragraph type 2 machine name = Y
{{ page.content}}
if paragraph type 3 machine name = Z
{{ page.content}}

This has me stumped as a newbie.

1 + 0

theming

paragraphs

Score:2

Drupal

Giuseppe

7/24/24, 7:40 AM

Thepage.html.twig isn't the twig which prints the content of a node, but rather one which prints the markup of the entire page.

To avoid confusion, I'm taking the article node bundle as example. If you want to customize its content you should overridenode--article--full.html.twig or node--article.html.twig for all the displays of the bundle.

Inside you can use

 {% block content %}
  <header> {{content.field_paragraph_1}}</header> {# the field name of the pragraph #}
     <main>
         {{ content | without('field_paragraph_1, field_paragraph_1) }}
     </main>
    
  <div id="sidebar">{{content.field_paragraph_3}}</div>
 {% endblock %}

You should always print all the content renderable array inside a node twig, use the without filter to avoid to print twice the fields you have manually inserted in other lines of the template.

+ 1

Giuseppe

7/26/24, 7:58 AM

I think you're mixing a bit the context of different templates. E.g. the `node` templates won't have the `page` renderable array because those are different template. The `node` template contains usually only variables related to the node itself. And *usually* is better to keep the layout separate, so not to print the "page" variables, namely the regions, inside the node template. https://www.drupal.org/docs/develop/theming-drupal/twig-in-drupal here's a bit of more documentation, including the available filters, like `without`. Twig Tweak is anyway a must-have module.

Elon Musk

I sit in a Tesla and translated this thread with Ai:

EN: Content type with 3 paragraphs fields: How can I output to different parts of page.html.twig?

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.