2

Apologies if this has been asked before, but I'm on my first week working with drupal and twig.

I have the following code:

{%
  set container_classes = [
    'paragraph',
    'paragraph--type--' ~ paragraph.bundle|clean_class,
    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
    not paragraph.isPublished() ? 'paragraph--unpublished',
    'container'  
  ]  
%}
{% set image_classes = [
  'col-12'  
]
%}
{% block paragraph %}  
  
  {% block content %}
    <div{{ attributes.addClass(container_classes) }}>
      <div class='row'>
        <div{{ attributes.addClass(image_classes) }} data-type='image'>
          {{ content.field_two_column_image }}          
        </div>
        <div class='col-12 col-lg-auto' data-type='copy'>
          {{ content.field_two_column_copy }}
        </div>
      </div?>
    </div>          
  {% endblock %}
 
{% endblock paragraph %}

My issue is the nested attributes.addClass. When I look at the HTML, I'm also seeing the container_classes classes, which is not what I'm looking for.

So how can I separate the two?

Improve this question
4
  • {{ attributes }} is the same array as it is used through your file. When you .addClass() it is added to that array. If you have nested elements and apply that array you will need to .removeClass() if you don’t want particular classes to cascade to those child elements
    – Prestosaurus
    Dec 16, 2020 at 21:56
  • So something like this <div{{ attributes.addClass(container_classes).removeClass(container) }} data-type='image'> and ensure all my classes are in the one array?
    – Mark Handy
    Dec 16, 2020 at 22:05
  • 2
    That syntax is correct. This DA might be helpful: drupal.stackexchange.com/questions/250300/…. @CamelCode provides a really good option, though for certain nested elements it might make more sense to set classes manually with html than with the attributes array. e.g. class="" on the element. Really depends on if these classes will be reused or not, and if a new attribute array makes sense for your use case.
    – Prestosaurus
    Dec 16, 2020 at 22:16
  • I would normally set them manually, but the component has options (image left or right) that I'm using to set a class. I don't build my prototypes with everything a parent class on the outer div, so i'll need to make some adjustments.
    – Mark Handy
    Dec 17, 2020 at 12:30

1 Answer 1

Reset to default
6

attributes is a variable containing attributes information (class, id, others..) for the main container of the template.
It should usually be used only once.

You can create a new attribute variable like this :

{% set my_attribute = create_attribute() %}|

And you can use it as usual :

<div{{ my_attribute.addClass(image_classes).setAttribute('data-type', 'image') }}>
  {{ content.field_two_column_image }}          
</div>

More information about using the attributes variable in Twig templates :
https://www.drupal.org/docs/8/theming-drupal-8/using-attributes-in-templates
https://www.drupal.org/docs/8/theming-drupal-8/modifying-attributes-in-a-theme-file
https://api.drupal.org/api/drupal/core%21lib%21Drupal%21Core%21Template%21Attribute.php/class/Attribute/8.2.x

Improve this answer
1
  • Ok thanks. I'll try that and see if I can get what I need to work. Classes would make it easier, but a data attribute might work too
    – Mark Handy
    Dec 16, 2020 at 22:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.