How do I keep content's styles?

Question

I have created a new custom content type: tw-how-to-guide.

This is a simple content type that only has one field: a paragraph module. And this paragraph module contains:

• some nested paragraph modules
• a number list

I would like the contents of the custom node template to display exactly as it does today. I am only looking to make two changes:

• Wrap of the tw-how-to-guide content in a div with a css class
• based on the selected number from the number list, add an additional div below the wrapper div, with the same class.

I have created a template file: node--tw-how-to-guide.html.twig However, this is not displaying anything. I have tried using kint, with the following:

<div class="printPage" >


  {{ kint(content) }}    

</div>

And I get the array in Kint, which is nice. However I do not wish to customize the display of the contents. I want the content to display as before. I am just interested in modifying the wrapping div.

I am concerned that I will need to recreate, or doing some complex work, to simply add some div tags.

I am really hoping this task can be done easily without having to parse each time in the array and call new templates. As I mentioned, it just adding a wrapper div, and then addition same divs based on selected number.

Any ideas on how to achieve this?

Answer 1

Content is not a variable of a field template. This is the reason kint(content) does not produce any output. The content of the field is in items:

  {% for item in items %}
    <div{{ item.attributes }}>{{ item.content }}</div>
  {% endfor %}

Did you try twig debug to find the right template?

Debugging Twig templates

Edit: (Template in question was edited to node template)

This is no problem to add divs and classes to the node twig. Here is an example:

<div class="container-outside-article">
  <article{{ attributes.addClass('class-added-to-article') }}>
    <div class="container-inside-article">
      <div{{ content_attributes }}>
        {{ content }}
      </div>
    </div>
  </article>
</div>

I've added two container inside and outside the article tag and one class to the article tag itself.