Quick theming tips

Adding Google font example

Go into your THEME.libraries.yml and add:

fonts:
  license:
    name: SIL Open Font License, 1.1
    url: http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL
  css:
    theme:
      //fonts.googleapis.com/css?family=Oxygen:300: { type: external }

Then in your theme.libraries.yml file add:

libraries:
  - THEMENAME/fonts

/**
 * Implements hook_preprocess_block().
 */
function THEME_preprocess_block(&$variables) {
  switch ($variables['plugin_id']) {
    // System Branding block.
    case 'system_branding_block':
      // Change path to logo.
      if ($variables['content']['site_logo']['#access']) {
        $variables['site_logo'] = 'path_to_your_theme_logo';
      }
      break;
  }
}

Add node id (nid) to body class

/**
 * Implements hook_preprocess_html().
 */
function THEME_preprocess_html(&$variables) {
  if (($node = \Drupal::request()->attributes->get('node'))) {
    $variables['attributes']['class'][] = 'page-node-' . $node->id();
  }
}

Change page title

/**
 * Implements hook_preprocess_page_title() for page-title.html.twig.
 */
function THEME_preprocess_page_title(&$variables) {
  // Edit page title.
  $variables['title'] = $variables['title']->create($variables['title'] . ' appending something here');
}

 Loop through mulitiple field items in Twig

This loops iterates over the field only pulling field items and not field meta data.

{% for key, child in content.field_name if key|first != '#' %}
  {{ content.field_name[key] }}
{% endfor %}