Christopher Panza Drupaller since 2010 Currently @ Purdue - - PowerPoint PPT Presentation

▶
christopher panza
SMART_READER_LITE
LIVE PREVIEW

Christopher Panza Drupaller since 2010 Currently @ Purdue - - PowerPoint PPT Presentation

Oct 29, 2022 315 likes •842 views

Out on a TWIG : Custom Theme Development Who am I? Christopher Panza Drupaller since 2010 Currently @ Purdue University Twitter: @aSharpZinc D.O.: justAChris Whats going on here? Introduction or review of TWIG syntax Theming in Drupal 8

slide-1
SLIDE 1

Out on a TWIG:

Custom Theme Development

slide-2
SLIDE 2

Who am I?

Christopher Panza

Drupaller since 2010 Currently @ Purdue University Twitter: @aSharpZinc D.O.: justAChris

slide-3
SLIDE 3

What’s going on here?

Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax

slide-4
SLIDE 4

TWIG Syntax 1

slide-5
SLIDE 5

Comments

{# Comment Here #} {# Comment is Here #} {# /** * This is a really * * * Long Comment */ #}

slide-6
SLIDE 6

Variables

{% set today = ‘Saturday’ %} {% set activities = [ ‘Keynote’ , ‘Sessions’ , ‘Learning Lounge’ ‘Sprints’ , ‘Happy Hour’ ] %} {% set chunk %} <div id="special"> ... </div> {% endset %}

slide-7
SLIDE 7

Print & Drilling

{{ variable }} {{ array.element }} {{ array[‘element’] }} {{ dump() }} {{ dump(array) }}

slide-8
SLIDE 8

Conditionals

{% if something %} <div>Something Exists </div> {% endif %} {% if today == ‘Saturday’ %} <div>Today is indeed Saturday </div> {% endif %} {% set round = True %} {% set a =round? “The world is round” : “Wait What?” %}

slide-9
SLIDE 9

Loops

{% for user in users %} {{ user.username|e }}<br /> {% endfor %} {% for i in 0..10 %} {{ i }}, {% endfor %} {{ loop.index }} {{ loop.first }} {{ loop.last }} {{ loop.length }}

slide-10
SLIDE 10

Filters

{% filter uppercase %} whole thing in upper {% endfilter %} {{ variable|uppercase }} twig filters: http://twig.sensiolabs.org/doc/filters/index.html Drupal Additional Filters: https://api.drupal.org/api/drupal/core!lib!Drupal!Core! Template!TwigExtension.php/function/TwigExtension% 3A%3AgetFilters/8

slide-11
SLIDE 11

Theming in Drupal 8

It’s just like Drupal 7, right?

2

slide-12
SLIDE 12
slide-13
SLIDE 13

Source on GitHub: https://github.com/justAChris/stltwigdemo15 http://bit.ly/1exVVim

slide-14
SLIDE 14

Additional Configuration - Taxonomy

slide-15
SLIDE 15

Additional Configuration - Content Type

slide-16
SLIDE 16

Additional Modules: Responsive Image, Pathauto, Devel

slide-17
SLIDE 17

File Structure

/sites/all/themes/ -> /themes/ Internal Structure:

slide-18
SLIDE 18

blog_demo.info.yml

slide-19
SLIDE 19

blog_demo.libraries.yml

slide-20
SLIDE 20

html.html.twig

slide-21
SLIDE 21

page.html.twig

slide-22
SLIDE 22

styles.css

slide-23
SLIDE 23

styles.css

slide-24
SLIDE 24

script.js

slide-25
SLIDE 25

Unstyled

slide-26
SLIDE 26
slide-27
SLIDE 27

/sites/default/services.yml

https://www.drupal.org/node/1903374

slide-28
SLIDE 28
slide-29
SLIDE 29

Views Templates

Templates Copied from Core: /core/modules/views/templates/

slide-30
SLIDE 30

Image Styles

1900px wide 900px wide

slide-31
SLIDE 31

blog_demo.breakpoints.yml

slide-32
SLIDE 32

Responsive Image Styles

slide-33
SLIDE 33

Updating Article (Node) Display

slide-34
SLIDE 34

File size is smaller for mobile Original (Desktop): 1900 × 919 ( 352 KB ) On Mobile: 900 × 435 ( 88.4 KB )

slide-35
SLIDE 35

Issue: Fatal "Unsupported operand types" error when using responsive images in views https://www.drupal.org/node/2483357

slide-36
SLIDE 36

Examples of TWIG syntax in theme

Did you forget the syntax already?

3

slide-37
SLIDE 37

{{ logo }}

page.html.twig Expects .svg

slide-38
SLIDE 38

blog_demo.theme

.png logo works

slide-39
SLIDE 39

{% set

Output:

slide-40
SLIDE 40

Loops & Conditionals

views-view-unformatted--blog--block_1.html.twig

slide-41
SLIDE 41

styles.css:

slide-42
SLIDE 42

Arrays

views-view-fields--blog--block_6.html.twig Issue: views-view-fields.html.twig gets escaped https://www.drupal.org/node/2363423

slide-43
SLIDE 43

Filters

Be Careful!

slide-44
SLIDE 44

Filters (continued)

Be very careful

slide-45
SLIDE 45

One More on Filters

node.html.twig

slide-46
SLIDE 46

TWIG Blocks != Drupal Blocks

slide-47
SLIDE 47

Duplicate node.html.twig?

copied and modified to node--article.html.twig

slide-48
SLIDE 48

OR...

add two lines to node.html.twig new node--article.html.twig

slide-49
SLIDE 49
slide-50
SLIDE 50

Additional Resources

mortendk's great DrupalCon LA presentation: https://events.drupal.org/losangeles2015/sessions/drupal-8-theming Great Posts from John Hannah at Lullabot: https://www.lullabot.com/blog/article/drupal-8-theming-fundamentals- part-1 https://www.lullabot.com/blog/article/drupal-8-theming-fundamentals- part-2 https://www.drupalcampnj.org/sites/default/files/slides/Drupal8- Themeing_013115.pdf http://savaslabs.com/2015/06/10/d8-theming-basics.html

slide-51
SLIDE 51

Thanks!

ANY QUESTIONS?

Twitter: @aSharpZinc D.O.: justAChris christopherpanza@gmail.com