In my page.html.twig template file, I'm looking to set classes depending on the content type the page is being viewed. I pretty much have two options, if the page being viewed is a program page, then I want one style applied to the div, if it's anything else, then the other style can be applied.

  set aside_classes = [
    node.content-type is 'program' ? 'program',
    node.content-type is anything else ? 'standard'

I know the above code is not proper but it's an example of what I'm trying to achieve.

I would then have the following code below on my div:

<div{{ content_attributes.addClass(aside_classes) }}> 

Am I going about this right or is there a better way to achieve this?

EDIT: Here are my kint variables. Not sure if this helps at all?: Kint Variables

  • With default Drupal config, you should see two classes automatically created on the body tag for all page types in Drupal. I would expect you to see the classes ".path-node" and ".node-type-program". This is done in the html.twig template file with {{ attributes.addClass(body_classes) }} on the body tag. Do these not work for your situation? – Prestosaurus Jan 30 '18 at 21:44
  • I see what you're saying but I'd prefer to add the style to the specific div within the body depending on the content type. Would the following work? node_type is 'program' ? 'program'. But how would I tell it to add 'standard' if it's anything else? – ACanadianCoder Jan 30 '18 at 21:56
  • @ACanadianCoder something like this should work {% node.content-type is 'program' ? 'program' : 'standard' %} – cchen Jan 30 '18 at 22:26
  • @cchen that didn't seem to work. Just got a page error. – ACanadianCoder Jan 31 '18 at 15:06
  • @ACanadianCoder sorry that was not the exact working code..I think the answer below should work, you just need to modify it a little bit to make for the page level template. – cchen Jan 31 '18 at 15:37

Not sure about page.html.twig. Would have to dig around...

In node.html.twig:

  set newClassNameVar = [
    node.type.entity.label == 'Program' ? 'Program' : 'Not Program'

<div{{ attributes.addClass(newClassNameVar) }}></div>


  set newClassNameVar = [
    node.bundle == 'content__type' ? 'set-yes-class' : 'set-no-class'

<div{{ attributes.addClass(newClassNameVar) }}></div>

use debug such as {{ dump(_context | keys) }} to see what is available and best suits your use case.

| improve this answer | |
  • I've added my kint screengrab to the original post from my page.html.twig file. Does any of that help? – ACanadianCoder Jan 31 '18 at 15:09
  • I ended up just using your method mentioned above but used {% if node.bundle == 'program' %} and that seemed to work. I still think there's a more elegant way of doing it similar to what @cchen had suggested in the above post but this will work for now. Thanks again! – ACanadianCoder Jan 31 '18 at 15:41
  • updated my answer with two options, credit to @cchen too – Prestosaurus Jan 31 '18 at 16:12
  • Awesome...that works and looks much nicer...however, instead of using the label, is there a way of using the machine name? ex. node.type.entity.machine_name == 'program'. Sorry for being so picky. – ACanadianCoder Jan 31 '18 at 16:36
  • 1
    I was looking myself and will try some more when I can. node.type.entity.machine_name looks like the right idea. Also I am always a fan of {{ dump(node | keys) }}, it's a lot lighter than kint. {{ dump(_context | keys) }} is a quick way to see everything available such as 'node', 'elements', 'content'... – Prestosaurus Feb 1 '18 at 17:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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