Convert page.tpl.php

[labboy0276]

Reference: https://www.drupal.org/node/1354#themepreprocess

We need to do two things here:

1. Go as close to the one region setup that made Kalatheme so easy to use
2. Convert the page.tpl.php to TWIG

Luckily John has converted some of this for another client using Bootstrap theme and some of the leg work is done.

If we need to convert the region blocks, here is anexample of how John did it before:

/**
 * Implements hook_preprocess_HOOK() for page.html.twig.
 */
function THEME_preprocess_page(&$variables) {
  // Get active theme
  $theme = explode("/", \Drupal::theme()->getActiveTheme()->getPath());
  $theme = end($theme);

  // Load up the site branding block into a var.
  // So we don't need to use a region or the block in content.
  $brand = Block::load($theme . '_branding');
  $variables['branding'] = \Drupal::entityManager()
  ->getViewBuilder('block')
  ->view($brand);

  // Load up help block, same as above.
  $help = Block::load($theme . '_help');
  $variables['help'] = \Drupal::entityManager()
  ->getViewBuilder('block')
  ->view($help);

  // Load up main menu, same as above.
  $main_menu = Block::load($theme . '_main_menu');
  $variables['main_menu'] = \Drupal::entityManager()
  ->getViewBuilder('block')
  ->view($main_menu);

  // Load up user / account menu, same as above.
  $acct_menu = Block::load($theme . '_account_menu');
  $variables['acct_menu'] = \Drupal::entityManager()
  ->getViewBuilder('block')
  ->view($main_menu);
}

Here is the page.html.twig:

...
{%
  set navbar_classes = [
    'navbar',
    theme.settings.navbar_inverse ? 'navbar-inverse' : 'navbar-default',
    theme.settings.navbar_position ? 'navbar-' ~ theme.settings.navbar_position|clean_class : '',
  ]
%}
<header{{ navbar_attributes.addClass(navbar_classes) }} id="navbar" role="banner">
  <div class="container">
    <div class="navbar-header">
      {{ branding }}

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">{{ 'Toggle navigation'|t }}</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

      <div class="navbar-collapse collapse">
        <nav role="navigation">
          {{ main_menu }}
        </nav>
      </div>
  </div>
</header>

<main id="main" class="clearfix js-quickedit-main-content" role="main">

  <section class="column container">

    {{ breadcrumb }}
    <a id="main-content"></a>

    {{ messages }}
    {{ help }}

    {% if action_links %}
      <ul class="action-links">{{ action_links }}</ul>
    {% endif %}
  </section>

  <section class="container main-container">
    {{ page.content }}
  </section>

</main>

<footer></footer>

[soniktrooth]

PR is up with some basics, but I gotta get those blocks rendering in the right place now.

[soniktrooth]

At least we have margins though!

[labboy0276]

@soniktrooth close, but we won't ever put code in the .theme except the call to the method within whatever class. Believe this format should be implemented for all future frameworks. So what we need to do is, remove the preprocessPage from the interface and create this in the KalathemeBase class. This way if people need to edit the preprocessPage page, then they can just extend that method and it applies to all frameworks.

[soniktrooth]

This is good, thanks for that @labboy0276