Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...
Power To The Frontender with Drupal 8 and Twig
1. Power to the Frontender
Layout and data manipulation with Twig
2. @NikGalatis @nkostop
The Team
without the monkey suits
2
I started wefixit dreaming about fixing the web. I
believe that Drupal 8 & Twig can make this
dream a reality. Studying UX tactics when not
coding.
Code monkey of Drupal. Maybe its because I’m
working with it for more than 5 years. If there is a
challenge, count me in.
NICK GALATIS
Frontend developer
NICK KOSTOPOULOS
Backend developer
3. Thank you Morten
Morten has said pretty much everything there is to be said in
Drupal & Twig but we will show how well twig handles some
easy everyday tasks
4. 4
Power To The Frontender
You will hear about
Twig Blocks & Extends Twig Conditionals & Variables Twig Extensions
— What is twig blocks and why they are
useful for scalable and maintainable
code
— How to extend a template file and
why to do it
— How to pass variables from the
extend twig file to the main template
file
— Basic conditionals available in twig
such as if, else etc.
— Set variables depending and check
them with twig conditions
— Display different layouts using block
positions
— Display content in different layouts
all set at by the content creator
— Create a simple module that extends
twig by adding a new function or filter
— Use this new extend to display a
block dynamically anywhere with
twig power
— In this example we are creating an
extension for loading a custom block.
5. 5
Power To The Frontender
You will see
Dynamic Article Layout Dynamic Theme Layout Simple Module Development
— The editor will add the body text
using the WYSIWYG editor
— We will also add some pictures to
the article
— We will choose the desired layout
from a simple dropdown menu
— The website administrator will be
able to move blocks around available
regions and the whole page layout
will adapt
— In our example you will see how
easily when you add one, two or no
sidebar content in those regions, the
grid layout adapts dynamically
depending on the block content
— We will create a simple module that
will extend twig.
— We will create a twig extension that
will be able to print any block directly
from the twig file
7. Twig Blocks
Definition
7
Blocks are used for inheritance and act as placeholders and
replacements at the same time.
- Twig Documentation
“ — Enclose code in blocks in main
template file
— Code inside the block tags can
be overridden by extend theme
files
— Blocks can exist inside other
blocks
8. Twig Extends & Variables Pass
Definition
8
Twig extends can be used to extend a template from another
one.
- Twig Documentation
“ — Start by declaring the file you
are extending
— Override anything you like by
using blocks
— You can also pass variables to
the main template
9. Twig Extends & Variables Pass
If you don’t use extend…
9
Main theme file
Theme override
10. Twig Conditionals
Dynamic Theming Is Here
10
The if statement in Twig is comparable with the if statements of
PHP. In the simplest form you can use it to test if an expression
evaluates to true
- Twig Documentation
“ — Simple condition that checks if
there are blocks in regions
sidebar right or sidebar left
— If there are blocks and
statements are true it
dynamically changes the
markup classes
— Control the layout directly from
the back end block layout page
11. Layout Building Using Conditionals
Content Type Creation
11
— Choose Layout at content
creation level (on content type)
— Variables are set depending on
the selected option
— Conditions change the layout
as needed
12. Twig Extend & Filter
Display any block anywhere
12
Register the extension as a service
blockTwigExtension.php
Generally it’s a best practice to put all your code inside blocks so it is easier to override later on with extends. Everything inside a block statement can be overriden. Blocks can also exist inside other blocks
Extending a template is easy. You first declare the template filename you are extending. Then you just add the block or blocks that you want to override and your code inside. You can also pass variables from the child theme to the parent theme.
This is what you have to do to have the same effect as the previous file if you don’t use twig extend. You basically have to code the whole file and make the changes you want on it.
Twig if else statements. The demo contains a simple if else check for certain blocks in the theme layout regions and if present it gives specific predefined classes so it can adjust the layout automagically.
In the content creation level the editor can choose from a predefined dropdown menu the front page layout. Variables and conditionals are then checked and they create the desired layout.
