scr: https://www.wgsn.com/en/twig-cheatsheet

sheet

HINTS & SNIPPETS
-----------------

TEMPLATE DEBUGGING OVERWRITING FOR DEV
- twig.config[debug] -> development.services.yml
parameters:
  twig.config:
    debug: true
    auto_reload: true
    cache: false
https://drupalize.me/tutorial/configure-your-environment-theme-development?p=2512
https://www.drupal.org/docs/8/theming/twig/debugging-twig-templates
https://www.electriccitizen.com/citizen-blog/twig-drupal-8-development-twig-templating-part-1-2


----------------


EXAMPLES FOR GETTING CONTENT WITH KINT

FIELD--NODE.HTML.TWIG


NODE.HTML.TWIG
https://blog.usejournal.com/getting-drupal-8-field-values-in-twig-22b80cb609bd
{{ kint(content.field_image) }}
{{ content.field_image }}
{{ content.field_text }}
{{ kint(content.field_link.0) }}
{{ kint(content.field_link['#items'].getValue()) }}
{{ content.field_link.0['#url'].toString() }}
{{ content.field_link.0['#title'] }}

{{ content.taxonomy_forums['#object'].forum_tid }}            // taxonomy id
{{ content.taxonomy_forums.0 }}                        // taxonomy label
{ content_link }
{{ node.getCreatedTime|format_date('custom_short') }}            // formatted date
{{ node.createdtime|format_date('long') }}
{{ content.field_colour|render|striptags|trim }}            // remove theme debug comments


PAGE.HTML.TWIG
{{node.field_embed_code.value}}                         // value is filtered so not raw
{{node.field_embed_code.value|raw}}                     // raw html rendered
{{node.body.0.summary|raw}}                        // body summary value
{{node.field_resource_type.entity.name.value}}                 // taxonomy value
{{node.field_resource_type.entity.description.value|raw}}          // taxonomy value description
{{node.taxonomy_forums.entity.name.value}}                // taxonomy value, eg2
{{node.field_link.0.url}}  {{node.field_link.0.title}}             // rendering link fields  
{{ file_url(node.field_image.entity.uri.value) }}            // rending image url
{{ node.field_image.alt  }}                        // rendering image alt value

{{kint(node.field_embed_code)}}
//page values
{{kint(page)}}
{{kint()}}

// print paragraph field. Requires Twig Tweak module
{% for item in node.paragraph_field_name %}                
  {{ drupal_entity('paragraph', item.target_id) }}
{% endfor %}

// For extracting the URL
{{paragraph.field_carousel_link.get(0).getUrl().toString()}}

// For Extracting the Link Title
{{paragraph.field_carousel_link.title}}

PARAGRAPH.HTML.TWIG
{{ paragraph.id() }}

----------------

HIDE FIELDS FOR RENDERING LATER

<div{{ content_attributes }}>
  {{ content|without('links') }}
  {{ form|without('advanced', 'actions') }}                 // eg with multiple
</div>

THEN RENDER THE HIDDEN FIELDS THEMSELVES
{{ content.links }}

----------------

REMOVE FIELD FROM NODE.HTML.TWIG & ADD IN PAGE.HTML.TWIG

Exclude in node (ie print 'content' without field):
{{ content|without('field_embed_code') }}

Include in Page:
{{node.field_embed_code.value|raw}}


----------------

TARGETING PAGES VIA TYPE, URL & FIELD VALUE
{% if node.field_hybrid.value == 1 or node.gettype == 'insights' or path_alias == '/events' %}
  {% set hybrid = true %}
{% endif %}

PRINT CSS USING ABOVE
{{ hybrid ? 'whiteContentBg' }}
----------------

PREPROCESS in custom.theme file

--
GLOBAL VARIABLES SET IN PREPROCESS

{{ path_alias }}                            // print page path eg. '/mypage/path'
{{ path_alias|trim('/') }}                        // print page path but removes backslash

--

USE ALTERNATE PAGE.HTML.TWIG BY URL
Set path and template within the custom.theme file                        


----------------

TEMPLATE FILES IN SEPARATE INCLUDES
eg. Keep head/foot twig html in separate file. 
https://www.drupal.org/docs/8/theming-drupal-8/including-part-template

{% include '@custom/includes/header.html.twig' %}


----------------

PRINT IF VALUE NOT NULL
{% if content.field_title['#items'].getValue() %}
  {{ content.field_sub_title }}
{% endif %}

https://www.unleashed-technologies.com/blog/2018/02/28/4-twig-tricks-you-need-know


----------------

TWIG
https://twig.symfony.com/doc/2.x/templates.html#other-operators

Comparison operators supported: 
==, !=, <, >, >=, and <=

The ternary operator:
{{ foo ? 'yes' : 'no' }}
{{ foo ?: 'no' }} is the same as {{ foo ? foo : 'no' }}
{{ foo ? 'yes' }} is the same as {{ foo ? 'yes' : '' }}


https://alvinalexander.com/source-code/drupal-8how-write-if-then-elseif-drupal8-twig-templates
{% if node.getType == 'photo' %}
...
{% elseif node.getType in ['book', 'page'] %}
...
{% else %}
...
{% endif %}

----------------

TWIG TWEAK CHEATSHEET
https://www.drupal.org/docs/8/modules/twig-tweak/cheat-sheet-8x-2x

---------------

EMBED VIDEO EGs - just replace the ID

<iframe src="//fast.wistia.net/embed/iframe/xiwmuhu5lo" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="720" height="405"></iframe>
<script src="//fast.wistia.net/assets/external/E-v1.js" async></script>


<iframe width="720" height="405" src="https://www.youtube.com/embed/TG2qJE5X52U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


<iframe src="https://player.vimeo.com/video/350118340" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

--------------


CONFIG SPLIT

Global config export using Drush via command line 
$ drush cex

To make enviro specific changes (dev/staging/prod):
- update settings.php split setting to make required one active
- import config sync (check it's using correct split config, eg staging and clear cache if not) 
  /admin/config/development/configuration
- configure split 
  /admin/config/development/configuration/config-split
- apply enviro specific settings
- export those settings to the split config folder:  
  $ drush config-split:export config_stg