This document discusses theming in Drupal 8. It begins by explaining how template engines like Twig have replaced PHPTemplate for separating markup and logic. It then covers creating a Drupal theme with Twig templates and libraries, and registering templates in modules. Finally, it provides an overview of Twig syntax for variables, control structures, filters/functions, inheritance and an example block template.
Little documentation and few base themes with 8.x branches - what's a front end developer to do? I'll show you what's changing in Drupal theming between D7 and D8 and how to create a custom theme based on the Classy base theme, step by step. We'll go over Twig basics and Twig debugging.
Twig for Drupal 8 and PHP | Presented at OC Drupalwebbywe
A high level overview of Twig and its functions that was presented at the OC Drupal meetup in February 2014 at KWALL.
As Twig is now part of Drupal 8 core, it is still being developed so slides are mostly on Twig itself. Discussion was over what Twig provides to themers.
http://www.meetup.com/oc-php
http://www.meetup.com/ocdrupal/
Little documentation and few base themes with 8.x branches - what's a front end developer to do? I'll show you what's changing in Drupal theming between D7 and D8 and how to create a custom theme based on the Classy base theme, step by step. We'll go over Twig basics and Twig debugging.
Twig for Drupal 8 and PHP | Presented at OC Drupalwebbywe
A high level overview of Twig and its functions that was presented at the OC Drupal meetup in February 2014 at KWALL.
As Twig is now part of Drupal 8 core, it is still being developed so slides are mostly on Twig itself. Discussion was over what Twig provides to themers.
http://www.meetup.com/oc-php
http://www.meetup.com/ocdrupal/
Drupal Camp Porto - Developing with Drupal: First StepsLuís Carneiro
The goal of this presentation is to give Drupal new comers some insights about key aspects of developing with Drupal.
The idea is to give the audience some guidelines about good practices of Drupal development along with some tips and, by a simple example application, present the most common and important structures/characteristics of the Drupal API.
Presentation about the Mozilla Application Framework and XUL (XML user interface language).
XUL is one of the main building blocks for Mozilla applications and Firefox extensions.
These are the slides for a workshop I’ve given at a couple conferences, explaining how Twig works to people who don’t necessarily come from a programming background.
Twig for Drupal @ Frontendunited Amsterdam 2012Rene Bakx
The slides for the Twig for Drupal 7 introduction talk I gave at FrontendUnited in Amsterdam.
No hardcore coding, just examples why Twig is for HTML was SASS is for your CSS.
Things Made Easy: One Click CMS Integration with Solr & Drupallucenerevolution
Presented by Peter Wolanin | Acquia, Inc - See conference video - http://www.lucidimagination.com/devzone/events/conferences/lucene-revolution-2012
If you have a new web project or and existing Drupal site, the combination of Drupal and Apache Solr is both powerful and easy to set up thanks to the existing integration code. The module allows for substantial customization with the administrative UI. Drupal facilitates further customizations of the UI, indexing, and bosting because of the open architecture that provides multiple opportunities for custom code to alter the behavior. A couple code snippets will be followed by a review of other contributed Drupal modules that further enhance the search capability.
Finally, this session will showcase some example of Drupal sites using Solr including Acquia's own sites and Drupal sites including many well-known Enterprise and government sites.
Drupal Camp Porto - Developing with Drupal: First StepsLuís Carneiro
The goal of this presentation is to give Drupal new comers some insights about key aspects of developing with Drupal.
The idea is to give the audience some guidelines about good practices of Drupal development along with some tips and, by a simple example application, present the most common and important structures/characteristics of the Drupal API.
Presentation about the Mozilla Application Framework and XUL (XML user interface language).
XUL is one of the main building blocks for Mozilla applications and Firefox extensions.
These are the slides for a workshop I’ve given at a couple conferences, explaining how Twig works to people who don’t necessarily come from a programming background.
Twig for Drupal @ Frontendunited Amsterdam 2012Rene Bakx
The slides for the Twig for Drupal 7 introduction talk I gave at FrontendUnited in Amsterdam.
No hardcore coding, just examples why Twig is for HTML was SASS is for your CSS.
Things Made Easy: One Click CMS Integration with Solr & Drupallucenerevolution
Presented by Peter Wolanin | Acquia, Inc - See conference video - http://www.lucidimagination.com/devzone/events/conferences/lucene-revolution-2012
If you have a new web project or and existing Drupal site, the combination of Drupal and Apache Solr is both powerful and easy to set up thanks to the existing integration code. The module allows for substantial customization with the administrative UI. Drupal facilitates further customizations of the UI, indexing, and bosting because of the open architecture that provides multiple opportunities for custom code to alter the behavior. A couple code snippets will be followed by a review of other contributed Drupal modules that further enhance the search capability.
Finally, this session will showcase some example of Drupal sites using Solr including Acquia's own sites and Drupal sites including many well-known Enterprise and government sites.
Demystifying AJAX Callback Commands in Drupal 8Michael Miles
This session outlines and explains Drupal 8 AJAX callback commands and how to use them. AJAX callback commands are the sets of PHP and JavaScript functions that control all AJAX functionality on a Drupal site. You will be suprised about how simple and straight forward they are. Mastering these commands will allow your AJAX calls to do so much more then just return rendered HTML. Allowing you to provide the visitors of your Drupal 8 site a more dynamic, richers experience.
This session is presented in three parts.
First, explaining what AJAX callback commands are.
Second, explaining how to use AJAX callback commands.
Third, explaining how to create and use your own custom commands.
Each section provides example code and walks through a real world Drupal 8 scenario.
Attendees should already be familiar with PHP and JavaScript, as well as, have a general understanding of Drupal and AJAX.
It's no denying that rich Javascript applications (sometimes called One Page Applications) are a big thing, but what if you want to leverage Drupal on the backend, or have an existing site? Tools like Angular.JS and EmberJS are great when you have an API, but Drupal 7 doesn't really have an API layer. I'll explore the parts of a one page application and how to integrate it into either an existing or a new Drupal site, and the pitfalls that one must watch out for.
Sample code for the demos are available at https://github.com/dragonmantank/spa-drupal
State of Search, Solr and Facets in Drupal 8 - Drupalcamp Belgium 2015Dropsolid
Session:
http://leuven2015.drupalcamp.be/sessions/state-search-solr-and-facets-drupal-8
Presenters:
Nick Veenhof & Joris Vercammen
Description:
In this session I'll give you an overview what changed so far in Drupal 8 in regards to the Search eco-system. We will talk about Search API, Apache Solr, Facet API and Elastic Search.
Over the course of the last 3 years I've been involved in how Search in Drupal 8 should take form and what needed to change to merge the Apache Solr module with the Search API Solr module. In this presentation I hope to give you some guidance what is still pending and what already was done. I will also try to explain what effort it takes to push and move such projects.
Depending on the audience we can go really in-depth or stay general. Please let me know in advance what you expect from this session so I can tailor it to your needs!
An introduction for web designers to theming with Drupal 8. The course covers the processes for creating a Theme including working with Yml files, setting up Gulp with Sass and Livereload and then diving into styling elements in Drupal.
Basic Theming concepts including installing themes, theme templates and page regions are covered along with how to use Twig.
Drupal 101: Tips and Tricks for Troubleshooting DrupalAcquia
The site is published, your design is pristine, and it is ready for action... so, now what? While you may think you’re in the clear, site issues are likely to arise at some point. To protect your business from a site-crash nightmare, there are necessary precautions you should take.
Customer support engineers Lanette and Ally are here to prepare you for the worst; using their 3.5 years of Drupal experience to explain common issues they’ve encountered, how to identify them, and how to remedy problems quickly.
In this webinar, you will learn:
- Early steps to take to maintain site health
- Preparing your team for common site complications
- Tips and tricks for troubleshooting if problems arise
- Third-party tools to help you resolve issues
Everything You Need to Know About the Top Changes in Drupal 8Acquia
<p>Drupal 8 is on the way. And we know you want to know -- what does this mean for me?!</p>
<p>Don't fear, Angie 'webchick' Byron is here! This one hour webinar will provide you with detailed overviews on the major changes in Drupal 8, as well as several short video demos that will give you a glimpse into a few of the newest features and capabilities. Angie will explain what D8 means for:</p>
<ul>
<li>Site Builders: See Views in Core, more (and better) blocks, improved entity and field features...the list goes on!</li>
<li>Front-end Developers: We're talking HTML5, libraries, accessibility enhancements, new themes and UI elements, and faster performance, to name a few.</li>
<li>Back-end Developers: A new configuration management system, a completely rehauled Entity API, improved caching, and new built-in web services features.</li></ul>
Successes and Challenges When Managing Large Scale Drupal ProjectsAcquia
Large scale Drupal projects are a special breed of Drupal project typically found with large enterprise customers. They involve managing multiple initiatives, partners, stakeholders and product owners. When development is performed by round-the-clock, globally distributed teams, project management complexity compounds. It’s critical that everyone understands the part they need to play. When executing projects with this scale, it can become challenging to maintain efficient agile workflows.
To give your next large scale project team a head start, we've identified processes and methodology improvements that can be easily implemented to make your Drupal project successful. In this webinar, we’ll discuss how an effective Drupal project manager can keep everyone on task, on track, and prepared for worst case scenarios.
Specifically, we’ll:
-Review key elements of communication that uphold the agile process
-Discuss elements of good team management: from delivery and infrastructure support to product owner and stakeholder
-Talk through key tools and practices to keep your project humming
Speedrun: Build a Website with Panels, Media, and More in 45 MinutesAcquia
Lightning is an open source starter kit and framework that helps developers tap into the richness of key D8 functionality, and build sites and experiences faster. At DrupalCon the team presented a session where we built an authoring experience live. This was the result of months of planning and practice. In this webinar, we will deconstruct each step in the build.
The broad concept for the experience we built during the speedrun was a product launch site with social feeds, CRM connected lead capture forms, authoring workflows for content marketers and campaign specific landing pages.
Speedrun steps that we will deconstruct:
-Develop a brand specific theme based on bootstrap using a css styleguide
-Configure a content approval workflow for content marketers and editors
-Configure new panelizer layouts, set defaults for editors and long-scroll landing pages using panels
-Create views-based social feeds, with curation based on a taxonomy
Drupal 8 Quick Start: An Overview of LightningAcquia
Lightning is a a solid Drupal starterkit, that enables developers to create great authoring experiences and empower editorial teams. Lightning provides users with a lightweight framework for building working solutions in Drupal.
In our upcoming webinar, we will examine each component of Lightning and demonstrate how to leverage its features in any Drupal build. Topics included will review the use cases for each of the functional areas (layout, media, workflow, and preview) as well as the three development principles (security, automated testing, and integration). We’ll also give a summary of recent findings from the authoring experience summit at BADCamp and how they will affect the development timeline for Lightning.
Attendees will learn:
- How to significantly cut build time on advanced Drupal 8 projects using Lightning
- How Lightning improves the accuracy of your development estimates
- How you can contribute to the Lightning project
- Our 3 year vision for Lightning
Drupal 8 Theme System: The Backend of FrontendAcquia
If you develop with Drupal, chances are you've worked with Drupal's theme system, whether you knew it or not. With Drupal 8 out, what better time to learn more about the Drupal 8 theme system?
The theme system in Drupal spans both module development and theme development. The main responsibilities of the theme system are to prepare and output markup and other data, and to allow for overrides. The Drupal 8 theme system brings many changes including the Twig templating engine, automatically escaped markup for increased security, changes to theme suggestions, new base themes in core, and more.
Scott Reeves, Team Lead at Digital Echidna, and Drupal 8 theme system co-maintainer and provisional core committer will guide you through Drupal 8’s theme system. The webinar will cover important differences from Drupal 7 and also walk through the internals of different aspects of the theme system and how they might affect your day-to-day work with Drupal.
Topics will include:
-An overview of the important changes to the theme system from Drupal 7 to Drupal 8
-How to use theme hook suggestions to cut down on custom code and create more flexible and reusable components
-Phases of the theme and render systems and where you can step in to alter things
-Debugging tips and Twig magic
This presentation was delivered on 11th May, 2014 in Drupal Camp Pakistan held in DatumSquare IT Services Islamabad. Contents of the presentation contains some basics stuff for designers, themers and coders.
Creating and breaking a module in Drupal 8.
Configuration Steps: https://www.gitbook.com/book/zivtech/debug-tools-for-drupal8/details
Debug your PHP code efficiently without Devel module’s dpm(Drupal Print Message). With Drupal 8’s adoption of Symfony and object-oriented architecture, we need to adjust how we debug our code. Up until now, many of us have been using the convenient dpm function for debugging and introspection. However, dpm cannot print protected properties or provide information about methods of an object.
This makes it difficult to debug objects and classes. It’s time to learn a new approach! We will look at alternative methods to solve this problem such as:
Xdebug with PHPStorm configuration - http://xdebug.org
Devel and the WebProfiler (D8+) Drupal module https://www.drupal.org/project/devel
Using the continuous integration tool Probo CI to speed up the testing and approval process - http://probo.ci/
We will create a module, break it and use the above tools to debug, test and fix the code. Whether you are dipping your toes into object-oriented PHP or you're an advanced developer, everyone can benefit from debugging their code more efficiently.
Drupal 7 Theming - Behind the Scenes: PHP control flow starting from entering URL to browser displaying webpage. Covers Theme info file, regions, an Rendear Arrays (Phoenix User Group 1/25/2012)
The Flexibility of Drupal 8 | DCNLights 2017Michael Miles
In this session we will demonstrate the flexibility of Drupal by going over 8 different ways in Drupal 8 that data can be manipulated. From non-technical methods, "frontend" javascript & templating methods, to "Backend" methods such as building a custom module and overriding services. This session will demonstrate how to implement each one outlining their individual pros and cons, proving that no matter your skill sets you can make Drupal 8 do what you want.
3. Once upon a time, in a D7 module...Once upon a time, in a D7 module...
function mymodule_block_content() {
$output = '';
$users = mymodule_get_some_users();
$output = '<ul class="list" style="margin-top:10px">';
foreach ($users as $user) {
$output .= '<li class="item"><em>' . $user->name . '</em></li>';
}
$output .= '</ul>';
return $output
}
Markup and styling mixed with business logic
Hardly to be overwritten
4. We can do this a little bit better:We can do this a little bit better:
function mymodule_block_content() {
$users = mymodule_get_some_users();
$output = theme('mymodule_block', $users);
return $output
}
function mymodule_theme() {
return array(
'mymodule_block' => array(
'variables' => array('users' => NULL),
),
);
}
function theme_mymodule_block($variables) {
$users = $variables['users'];
$output = '<ul class="list" style="margin-top:10px">';
foreach ($users as $user) {
$output .= '<li class="item"><em>' . $user->name . '</em></li>';
}
$output .= '</ul>';
return $output
}
Can be overwritten, in template.php
(mytheme_mymodule_block)
5. We can do this much more better:We can do this much more better:
function mymodule_block_content() {
$users = mymodule_get_some_users();
$output = theme('mymodule_block', $users);
return $output
}
function mymodule_theme() {
return array(
'mymodule_block' => array(
'variables' => array('users' => NULL),
'template' => 'mymodule_block'
),
);
}
and in mymodule_block.tpl.php:
<ul class="list" style="margin-top:10px">
<?php foreach ($users as $user) : ?>
<li class="item"><em><?php print $user->name; ?></em></li>
<?php endforeach; ?>
</ul>
Template file can be copied and overwritten
And maybe use CSS, not markup or inline styles...
7. What's wrong with PHPTemplate?What's wrong with PHPTemplate?
Drupal proprietary stuff
Requires PHP knowledge
Hard to read
Potentially insecure, e.g. printing malicous strings
Empowers business logic, e.g. DB queries
One typo can take your site offline
Sooo old-style
So Drupal 8 goesSo Drupal 8 goes
PHPTemplatePHPTemplate SmartySmarty PHPTALPHPTAL TWIGTWIG
8. 2. Building a Drupal 82. Building a Drupal 8
ThemeTheme
10. Tell Drupal about your themeTell Drupal about your theme
name: 'My theme'
type: theme
description: 'Just a sample theme for Drupal 8.'
package: Custom
core: 8.x
libraries:
- mytheme/global
stylesheets-remove:
- core/assets/vendor/normalize-css/normalize.css
regions:
header: Header
content: Content
sidebar_first: 'Sidebar first'
footer: Footer
/themes/custom/mytheme/mytheme.info.yml
11. Tell Drupal about css/js libraries in your themeTell Drupal about css/js libraries in your theme
# This one is specified in mytheme.info.yml and loaded on all pages
global:
version: VERSION
css:
theme:
css/base.css {}
css/layout.css: {}
# Those are needed in some special places and loaded via #attached['library']
special:
version: VERSION
css:
theme:
css/special.css: {}
js:
js/special.js: {}
flexslider:
version: '2.5.0'
css:
theme:
libraries/flexslider/flexslider.css: {}
js:
libraries/flexslider/jquery.flexslider.js: {}
dependencies:
- core/jquery
/themes/custom/mytheme/mytheme.libraries.yml
12. Add preprocessing stuff, if neededAdd preprocessing stuff, if needed
<?php
/**
* Implements hook_element_info_alter().
*/
function mytheme_element_info_alter(&$type) {
// We require Modernizr for button styling.
if (isset($type['button'])) {
$type['button']['#attached']['library'][] = 'core/modernizr';
}
}
/themes/custom/mytheme/mytheme.theme
Formerly known as template.php!
13. Specify breakpoints, if neededSpecify breakpoints, if needed
mytheme.mobile:
label: mobile
mediaQuery: ''
weight: 2
multipliers:
- 1x
mytheme.narrow:
label: narrow
mediaQuery: 'all and (min-width: 560px) and (max-width: 850px)'
weight: 1
multipliers:
- 1x
mytheme.wide:
label: wide
mediaQuery: 'all and (min-width: 851px)'
weight: 0
multipliers:
- 1x
/themes/custom/mytheme/mytheme.breakpoints.yml
14. Add the remaining stuff...Add the remaining stuff...
Templates
Scripts
Stylesheets
Images
Logo
Screenshot
...
16. Good News!Good News!
Not so many changesNot so many changes
Main difference: no more theme() functions!
17. Registering templatesRegistering templates
(no more theme functions!)
function mymodule_theme($existing, $type, $theme, $path) {
return array(
'mymodule_something' => array(
'variables' => array('something' => NULL, 'otherthing' => NULL),
),
);
}
hook_theme(), in your module file
18. Create a templateCreate a template
(*.html.twig, not *.tpl.php)
{% if something %}
<p>
{{ something }}
{{ otherthing }}
</p>
{% endif %}
mymodule-something.html.twig, in your module's template
folder (/modules/custom/mymodule/templates)
19. Use this somewhereUse this somewhere
(using render array, not theme())
...
$output = array(
'#theme' => 'mymodule_something',
'#something' => 'Something',
'#otherthing' => 'Otherthing',
);
...
Somewhere in your code (controller, plugin, ...)
20. Alter some stuffAlter some stuff
(mainly provided by other modules)
/**
* Implements hook_preprocess_HOOK().
*/
function yourmodule_preprocess_mymodule_something(&$variables) {
...
}
In your module file or theme
22. Print / Output:
{{ some content }}{{ some content }}
Comments:
{# this is a comment #}{# this is a comment #}
Execute statements:
{% expression %}{% expression %}