1

I am working with Drupal 8.5-x, I am trying to render HTML with bootstrap classes, but I am having trouble. Here is my problem:

I have highlighted (region) and content (region). I am trying to add a <section class="col-sm-12 col-md-12"> with highlighted region but to no avail.

I have:

{# Highlighted #}
  {%
    set highlighted_classes = [
      page.sidebar_first and page.sidebar_second ? 'col-sm-6',
      page.sidebar_first and page.sidebar_second is empty ? 'col-sm-9 col-md-8',
      page.sidebar_second and page.sidebar_first is empty ? 'col-sm-12',
      page.sidebar_first is empty and page.sidebar_second is empty ? 'col-sm-12'
    ]
  %}

{# Content #}
  {%
    set content_classes = [
      page.sidebar_first and page.sidebar_second ? 'col-sm-6',
      page.sidebar_first and page.sidebar_second is empty ? 'col-sm-12 col-md-12',
      page.sidebar_second and page.sidebar_first is empty ? 'col-sm-12',
      page.sidebar_first is empty and page.sidebar_second is empty ? 'col-sm-12'
    ]
  %}

  <section {{ highlighted_attributes.addClass(highlighted_classes) }}> 
  <section {{ content_attributes.addClass(content_classes) }}>

when rendered, I get

<section>
<section class="col-sm-12 col-md-12> 

but I was expecting

<section class="col-sm-12 col-md-12">
<section class="col-sm-12 col-md-12">

I am lost as to where I could have gone wrong. My info file is as follows:

    regions:
  navigation: 'Navigation'
  navigation_collapsible: 'Navigation (Collapsible)'
  header: 'Top Bar'
  highlighted: 'Highlighted'
  help: 'Help'
  content: 'Content'
  sidebar_first: 'Primary'
  sidebar_second: 'Secondary'
  footer_first: 'First Footer'
  footer_second: 'Second Footer'
  footer_third: 'Third Footer'
  footer_fourth: 'Fourth Footer'
  footer_fifth: 'Fifth Footer'
  page_top: 'Page top'
  page_bottom: 'Page bottom'

Any help?

1

Nevermind I read on attributes: https://www.drupal.org/docs/8/theming-drupal-8/using-attributes-in-templates

The attribute I was referencing 'highlighted_attributes' was blank. I just added a simpler solution, by referecing to the example of the API:

{% set classes = [ 'red', 'green', 'blue' ] %}

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

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.