i'm so sörry
The slides are on github
geek Röyale - copenhagens finest themes
From the frontend perspective ?
sorry devs you can moan later
hello im drupal
always add another div
wait im just a piece of data
Themers are not that Dumb
or 666 reasons why Drupal8 is better than Drupal7
...
37% less id *
counting at alpha9
* kinda
<body class="html facepalm whateverthefuck ">
<body class="">
.notification {
/* general styles for all notifications */
}
.notification--info {
/* blue color adjustments */
}
provide visibility
themes now lives in "/themes"
or "sites/ *** /themes"
modulename/templates/*.html.twig
$settings['twig_debug'] = TRUE;
settings.php
the twig templates are compiled
(yes its the same thingie that compiling thing)
....
HARD coded
is now a block
its dead easy
/*
comment
*/
<?php print $foo ; ?>
phptemplate
{# comment #}
{{ foo }}
twig
/*
so php template
Now where is that value again
*/
<?php print $foo['bar']['UND']->baz['what']->thefuck['seriously'] ?>
phptemplate
{# hello twig can you find valdo ? #}
{{ foo.bar.baz.done.with.this.shit }}
{{ foo['bar'] }}
{% functions %}
Twig
<?php if($foo): ?>
<?php print $var; ?>
<?php endif; ?>
phptemplate
{% if foo %}
{{ var }}
{% endif %}
twig
Team Awesome
{% for user in users %}
- {{ user.username}}
{% endfor %}
twig
Team Awesome
- cottset
- joel
- jen
- mark carver
- mortendk
drupal8
{{ loop.length }}
{{ loop.first }}
{{ loop.last }}
{{ loop.index }}
{% if loop.first %}
...
{% elseif loop.index == 2 %}
...
{% elseif loop.last %}
...
{% endif %}
{% set foo %}
count-{{ loop.index }}
{% endset %}
{{ foo }},
twig
count-1,count-2, count-3,
output
{% filter upper %}
uppercase for the win
{% endfilter %}
UPPERCASE FOR THE WIN
{{ foo|dostufftofoo }}
{# name = morten #}
{{ name|striptags|title }}
twig
Morten
name: drupal7themename
description = This is my epic D7 theme
screenshot = screenshot.png
engine = phptemplate
core = 7.x
php = 5.2
regions[header] = Header
regions[logo] = Logo
regions[menu] = Menu
regions[messages] = Messages
regions[content] = Content
regions[footer] = Footer
stylesheets[all][] = css/style.css
#FOAD fix
stylesheets[all][] = donteverloadmeagain.css
name: drupal8themename
type: theme
description: This is my epic D8 theme
package: Core
core: 8.x
stylesheets:
all:
- css/layout.css
print:
- css/print.css
stylesheets-remove:
- system.theme.css
- user.icons.css
- stuffidontwant.css
regions:
header: Header
logo: Logo
menu: Menu
messages: Messages
content: Content
footer: Footer
# engine: phptemplate
# engine: phptemplate
themename.info
its now build in
stylesheets[all][] = css/style.css
#FOAD fix
;stylesheets[all][] = donteverloadmeagain.css
stylesheets[all][] = system.theme.css
stylesheets[all][] = user.icons.css
stylesheets[all][] = stuffidontwant.css
drupal 7
stylesheets-remove:
- system.theme.css
- user.icons.css
- stuffidontwant.css
drupal 8
<?php if ($page['footer']): ?>
<?php endid ?>
<?php print render($page[region]); ?>
{% if page.footer %}
{% endif %}
twig: {{ page.region }}
<div{{ attributes }}>
{{ title_prefix }}
{% if label %}
<h2{{ title_attributes }}>{{ label }}</h2>
{% endif %}
{{ title_suffix }}
<div{{ content_attributes }}>
{{ content }}
</div>
</div>
block.twig
<nav class="{{ attributes.class }}" role="{{ attributes.role}}">
{{ title_prefix }}
{% if label %}
<h2{{ title_attributes }}>{{ label }}</h2>
{% endif %}
{{ title_suffix }}
{{ content }}
</nav>
block--system-menu-block.html.twig
theme hook suggestions
...
{{ attributes.class |replace( {'block': '' }) }}
block.html.
<nav class="{{ attributes.class }}" role="{{ attributes.role}}">
{{ title_prefix }}
{% if label %}
<h2{{ title_attributes }}>{{ label }}</h2>
{% endif %}
{{ title_suffix }}
{{ content }}
</nav>
block--system-menu-block.html.twig
Done
{{attributes}}
...
...
....
add .foo
foo
.twig
foo
drupal
Terms
the designer is an idiot
and they wanna support ie "something"
the Markup
<div class="tags">
3 tags:
foo,
bar,
baz.
</div>
the markup
.thedesignerisanidiot{
color: green;
font-style:italic;
}
node
....
{{ content.field_tags}}
{{ content|without('field_tags') }}
node.html.twig
{# Start the loop #}
{% for delta, item in items %}
{# create a class var #}
{% set class %}
{# odd even #}
{{- cycle(["even", "odd"], delta) }}
{# count-x #}
count-{{ loop.index -}}"
{% endset %}
{{item}},
{# end the loop #}
{% endfor %}
field--field-tags.html.twig
Odin,
Thor,
Freya,
drupal8
tags vs tag
{# first loop #}
{% if loop.first %}
{# set tags / tag #}
{% if loop.length > 1 %}
{{ loop.length }}
tags:
{% else %}
tag:
{% endif %}
...
field--field-tags.html.twig
3 tags:
add a class on 2 tag
{% if loop.first %}
...
{% elseif loop.index == 2 %}
{{item}},
...
{# end the loop #}
{% endfor %}
field--field-tags.html.twig
Odin
Thor
Freya
{% if loop.first %}
{% if loop.length > 1 %}
{{ loop.length }} tags:
{% else %}
tag:
{% endif %}
{{item}},
{% elseif loop.index == 2 %}
{{item}},
{% elseif loop.last %}
{{item}}.
{% else %}
{{item}},
{% endif %}
field--field-tags.html.twig
3 tags:
Odin,
Thor,
Freya.
TWIG BLOCK
{% block foobar %}
{# i can be something else #}
{% endblock %}
{% block headerblock %}
change me if im on the frontpage
{% endblock %}
page.twig.html
{% extends "themes/yggdrasil/templates/page.html.twig" %}
{% block headerblock %}
Im on the frontpage!
{% endblock %}
page--front.html.twig
translate
{{ 'last checked: @time ago'| t({'@time':time}) }}
{% trans %}
Hi im a swede and i speak funny: Höidy hoeeeydi
{% endtrans %}
Höidy hoeeeydi
HEROs wanted
{{ TWIG }}
twig team
cottser
joel
jen lampton
mortendk
ruben
mark carver
fabianx
marc Drummond
YOU :)
#Drupaltwig weekly meeting
Thursdays at 6pm
IRC: #drupal-twig
Codesprint Tomorrow
10:00
Field
#Drupaltwig
drupaltwig.org
resourses
TWIG documentation
drupaltwig.org
http://mortendk.github.io/drupal8-twig-chicago-2014
Questions?
@mortendk
#drupaltwig
drupaltwig.org