Try to insert new variables to render attributes on tags.
Got one working and two others not with almost the same data.
content_attributes variable is rendering OK, but sidebar_first_attributes and sidebar_second_attributes show no results.
This is a fork of Bartik Theme, with two basic overrides:

bootstrap_barrio.theme

<?php
/**
 * Implements hook_preprocess_HOOK() for page templates.
 */
function bootstrap_barrio_preprocess_page(&$variables) {
  $width = _bootstrap_barrio_content_width(!empty($variables['page']['sidebar_first']), !empty($variables['page']['sidebar_second']));
  $content_width = 'col-md-' . $width;
  $sidebar_first_width = 'col-md-' . theme_get_setting('bootstrap_barrio_sidebar_first_width');
  $sidebar_second_width = 'col-md-' . theme_get_setting('bootstrap_barrio_sidebar_second_width');

  $variables['content_attributes'] = array(
    'class' => array (
      'main-content', 
	  $content_width ),
	'id' => array ( 'content' ),
	'role' => array ( 'main' ),
  );
  $variables['sidebar_first_attributes'] = array(
    'class' => array (
      'sidebar', 
	  $sidebar_first_width 
	),
	'id' => array ( 'sidebar_first' ),
  );
  $variables['sidebar_second_attributes'] = array(
    'class' => array (
      'sidebar', 
	  $sidebar_second_width ),
	'id' => array ( 'sidebar_second' ),
  );

  if (theme_get_setting('bootstrap_barrio_content_offset')) {
	$variables['content_attributes']['class'][] =  'col-md-offset-' . theme_get_setting('bootstrap_barrio_content_offset');
  }
  if (theme_get_setting('bootstrap_barrio_sidebar_first_offset')) {
	$variables['primary_attributes']['class'][] =  'col-md-offset-' . theme_get_setting('bootstrap_barrio_sidebar_first_offset');
  }
  if (theme_get_setting('bootstrap_barrio_sidebar_second_offset')) {
	$variables['secondary_attributes']['class'][] =  'col-md-offset-' . theme_get_setting('bootstrap_barrio_sidebar_second_offset');
  }

  switch (theme_get_setting('bootstrap_barrio_sidebar_position')) {
	case 'left':
	  $variables['content_attributes']['class'][] = 'pull-right';
	  break;
	case 'both':
	  $variables['content_attributes']['class'][] = 'col-md-push-' . ( theme_get_setting('bootstrap_barrio_sidebar_first_width') + theme_get_setting('bootstrap_barrio_sidebar_first_offset') );
	  $variables['primary_attributes']['class'][] = 'col-md-pull-' . ( $width + theme_get_setting('bootstrap_barrio_content_offset') );
	  break;
	case 'right':
	  break;
  }
}
?>

page.html.twig

    <div id="main-wrapper" class="layout-main-wrapper container clearfix">
      <div id="main" class="row clearfix">
        {{ page.breadcrumb }}
        <main {{ content_attributes }} >
          <section class="section">
            <a id="main-content" tabindex="-1"></a>
            {{ page.content }}
          </section>
        </main>
        {% if page.sidebar_first %}
          <div {{ sidebar_first_attributes }} >
            <aside class="section" role="complementary">
              {{ page.sidebar_first }}
            </aside>
          </div>
        {% endif %}
        {% if page.sidebar_second %}
          <div {{ sidebar_second_attributes }}>
            <aside class="section" role="complementary">
              {{ page.sidebar_second }}
            </aside>
          </div>
        {% endif %}
      </div>
    </div>

This is the rendered output over a clean Drupal 8 installation:

<div id="main-wrapper" class="layout-main-wrapper container clearfix">

  <div id="main" class="row clearfix">
        <main class="main-content col-md-9 col-md-push-3" id="content" role="main">
          <section class="section">
            ...
          </section>
        </main>
        <div>
            <aside class="section" role="complementary">
               ...
            </aside>
          </div>
  </div>
</div>

content_attributes variable is rendering OK, but sidebar_first_attributes and sidebar_second_attributes show no results.
Override variable information, changed names, clear caches, uninstall and install theme, and finally install fresh Drupal. Same bug always.

Comments

hatuhay created an issue. See original summary.

hatuhay’s picture

Issue summary: View changes
joelpittet’s picture

This seems to be related to this issue I was trying to fix where we do magic: #2108771: Remove special cased title_attributes and content_attributes for Attribute creation for reference.

In Drupal 7 you had to use drupal_attributes() function.

$variables['sidebar_first_attributes'] = drupal_attributes($variables['sidebar_first_attributes']);

In D8 you use the Attribute object the same way:

$variables['sidebar_first_attributes'] = new Attribute($variables['sidebar_first_attributes']);

attributes, content_attributes, title_attributes are some kinda of horrible magic;)

joelpittet’s picture

Status: Active » Fixed
star-szr’s picture

The other way would be to create the Attribute object at the start of your preprocess and then use addClass, setAttribute etc. methods to build up your attributes :)

joelpittet’s picture

Also don't put spaces before or after the attributes in the twig template to avoid extra spaces in your beautiful markup;)

<div {{ sidebar_first_attributes }} > really should be <div{{ sidebar_first_attributes }}> Then if there are no attributes it doesn't look like this <div > in source. Attribute deals with the space needed before each for you.

hatuhay’s picture

Thanks!!!
Function reference to help anyone with the same problem: https://api.drupal.org/api/drupal/core!lib!Drupal!Core!Template!Attribute.php/class/Attribute/8
Working code:

<?php
/**
 * Implements hook_preprocess_HOOK() for page templates.
 */
function bootstrap_barrio_preprocess_page(&$variables) {
  $width = _bootstrap_barrio_content_width(!empty($variables['page']['sidebar_first']), !empty($variables['page']['sidebar_second']));
  $content_width = 'col-md-' . $width;
  $sidebar_first_width = 'col-md-' . theme_get_setting('bootstrap_barrio_sidebar_first_width');
  $sidebar_second_width = 'col-md-' . theme_get_setting('bootstrap_barrio_sidebar_second_width');

  $variables['content_attributes'] = array(
    'class' => array (
      'main-content', 
	  $content_width ),
	'id' => array ( 'content' ),
	'role' => array ( 'main' ),
  );
  $variables['sidebar_first_attributes'] = array(
    'class' => array (
      'sidebar', 
	  $sidebar_first_width 
	),
	'id' => array ( 'sidebar_first' ),
  );
  $variables['sidebar_second_attributes'] = array(
    'class' => array (
      'sidebar', 
	  $sidebar_second_width ),
	'id' => array ( 'sidebar_second' ),
  );

  if (theme_get_setting('bootstrap_barrio_content_offset')) {
	$variables['content_attributes']['class'][] =  'col-md-offset-' . theme_get_setting('bootstrap_barrio_content_offset');
  }
  if (theme_get_setting('bootstrap_barrio_sidebar_first_offset')) {
	$variables['primary_attributes']['class'][] =  'col-md-offset-' . theme_get_setting('bootstrap_barrio_sidebar_first_offset');
  }
  if (theme_get_setting('bootstrap_barrio_sidebar_second_offset')) {
	$variables['secondary_attributes']['class'][] =  'col-md-offset-' . theme_get_setting('bootstrap_barrio_sidebar_second_offset');
  }

  switch (theme_get_setting('bootstrap_barrio_sidebar_position')) {
	case 'left':
	  $variables['content_attributes']['class'][] = 'pull-right';
	  break;
	case 'both':
	  $variables['content_attributes']['class'][] = 'col-md-push-' . ( theme_get_setting('bootstrap_barrio_sidebar_first_width') + theme_get_setting('bootstrap_barrio_sidebar_first_offset') );
	  $variables['sidebar_first_attributes']['class'][] = 'col-md-pull-' . ( $width + theme_get_setting('bootstrap_barrio_content_offset') );
	  break;
	case 'right':
	  break;
  }

  $variables['content_attributes'] = new Attribute($variables['content_attributes']);
  $variables['sidebar_first_attributes'] = new Attribute($variables['sidebar_first_attributes']);
  $variables['sidebar_second_attributes'] = new Attribute($variables['sidebar_second_attributes']);
}
?>

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.