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 April 16, 2019 10:52
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 April 16, 2019 21:41
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 March 19, 2019 20:43
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 August 3, 2022 09:01
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 January 2, 2019 08:50
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 December 11, 2018 14:30
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 December 5, 2018 13:23
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).