Skip to content

Instantly share code, notes, and snippets.


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
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
DrupalCon Seattle 2019: Pattern Lab: The Definitive How-to
{% set classes = [
media ? 'card--has-media',
isDark ? 'card--is-dark',
] %}
thamas / get-img-in.twig
Created Apr 16, 2019
Get Drupal (media) image in Twig template
View get-img-in.twig
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 /
Last active Apr 16, 2019
Usage of Twig random() in Pattern Lab to provide more dynamic test content

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!


"schools" : [
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 / THEMENAME.theme
Last active Aug 3, 2022
Display taxonomy term in Drupal Twig template translated
View THEMENAME.theme
* 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 / 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
vendor/tippy.all.min.js: {}
components/_patterns/03-organisms/twist/twist.js: {}
- mytheme/tippy
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.
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 / 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).