thamas

thamas 4 hours ago

In Emulsify 04-templates/_default.twig defines twig blocks for page sections » 05-pages/_page.twig adds content (drupal regions) to these sections » templates/product/page--product.html.twig can’t modify these twig blocks because it is not a child but a grandchild of _default. Any solution to this? (I’ve just added the needed part to _page.twig within an if and set it to true in page--product.htm.twig but I do not like to pollute the general page template with a component which is not needed on every page…

evanmwillhite 2 hours ago

there is a solution. It was a little bit to wrap my head around, but I use it a lot now. You can set the block in the middle template like so:

thamas

{# 
Source: https://youtu.be/jNqXZ4Jb2No?t=824
DrupalCon Seattle 2019: Pattern Lab: The Definitive How-to
#}

{# 
_context « All available global variables
Do not print "value" because it crashes Drupal!
#}

thamas

{# 
Source: https://youtu.be/jNqXZ4Jb2No
DrupalCon Seattle 2019: Pattern Lab: The Definitive How-to
#}

{% set classes = [
  'card',
  media ? 'card--has-media',
  isDark ? 'card--is-dark',
] %}

thamas

{# 
Source: https://youtu.be/jNqXZ4Jb2No?t=822 
DrupalCon Seattle 2019: Pattern Lab: The Definitive How-to
#}

{% set img = node.field_img.entity.getFileUri() %}
{# result: public://images/ocean.jpg #}

{% set imgUrl = file_url(img) %}
{# result: /sites/default/files/ocean.jpg #}

thamas

willthemoor [1:17 AM] .
Just coming to realize the power of flat arrays within _data/data.json and the use of twig's random() function for mocking stuff in Pattern Lab. It's good living!

data.json

"schools" : [
  "Georgetown",
  "Harvard",
  "Princeton",
  "Yale"

thamas

// There is no auto placement for CSS Grid items in IE.
// Sow we need to place the items into rows.
@mixin ie-grid-rows($start: 1, $rows: 50, $container: true, $shift: 0) {
  @for $i from $start through $rows {
    $row: $i - $shift;

    @if $container {
      > *:nth-child(#{$i}) {
        -ms-grid-row: $row;
      }

thamas

<?php

/**
 * Implemets hook_preprocess_node().
 *
 * Create variable from translated taxonomy term name.
 * Code by @tikaszvince.
 */
function THEMENAME_preprocess_node(&$variables) {
  /** @var Drupal\node\Entity\Node $node */

thamas

tippy:
  js:
    vendor/tippy.all.min.js: {}

twist:
  js:
    components/_patterns/03-organisms/twist/twist.js: {}
  dependencies:
    - mytheme/tippy

thamas

{#
  This snippet is from a component based (Emulsify / Pattern Lab) custom Drupal theme.
  The "span_…" variables are the properties of the BEM Twig function.
  See: https://www.fourkitchens.com/blog/development/bem-twig-function/
  
  The goal is to set the default display correctly (when the page loads). 
  After that the field visibility is manipulated by JS based on user interaction.
#}

{% set amount = element['#object'].field_amount.value %}

thamas

{# 
This is from a component based (Pattern Lab) custom Drupal theme.

_banner.twig is the actual component, a modified version of the HTML element Field Group template.
It contains a link component, the url of that is the banner_link_path variable.

The banner group contains a banner copy subgroup and it contains a Link field. 
We get the path from that link field.

It's intended to use with internal paths, have'n tried with external urls (yet).