-1

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.

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 Answer 1

3

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
  • 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. 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.
    – Giuseppe
    Jul 26, 2023 at 7:58