Skip to content

Instantly share code, notes, and snippets.

View twig-grandchild-modification.md

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:

View debugger.twig
{#
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!
#}
View conditional-classes-example.twig
{#
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
thamas / get-img-in.twig
Created Apr 16, 2019
Get Drupal (media) image in Twig template
View get-img-in.twig
{#
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
thamas / twig-random-pl.md
Last active Apr 16, 2019
Usage of Twig random() in Pattern Lab to provide more dynamic test content
View twig-random-pl.md

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
thamas / ie-grid-items-into-rows.scss
Created Mar 19, 2019
Helper Sass mixin to place CSS Grid items into rows in Internet Explorer (11)
View ie-grid-items-into-rows.scss
// 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
thamas / THEMENAME.theme
Last active Feb 21, 2019
Display taxonomy term in Drupal Twig template translated
View THEMENAME.theme
<?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
thamas / mytheme.libraries.yml
Created Jan 2, 2019
Short example of setting a third party JS lib in a Drupal theme libraries file
View mytheme.libraries.yml
tippy:
js:
vendor/tippy.all.min.js: {}
twist:
js:
components/_patterns/03-organisms/twist/twist.js: {}
dependencies:
- mytheme/tippy
@thamas
thamas / field--field-unit-plural.html.twig
Last active Dec 11, 2018
Drupal 8 Twig: hide a (paragraph) field based on the value of a sibling field
View field--field-unit-plural.html.twig
{#
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
thamas / field-group-html-element--group-banner.html.twig
Last active Dec 5, 2018
How to access path from Link field in Twig template of Drupal 8 Field Group
View field-group-html-element--group-banner.html.twig
{#
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).