Book Image

Drupal 8 Theming with Twig

By : Chaz Chumley
Book Image

Drupal 8 Theming with Twig

By: Chaz Chumley

Overview of this book

Drupal 8 is an open source content management system and powerful framework that helps deliver great websites to individuals and organizations, including non-profits, commercial, and government around the globe. This new release has been built on top of object-oriented PHP and includes more than a handful of improvements such as a better user experience, cleaner HTML5 markup, a new templating engine called Twig, multilingual capabilities, new configuration management, and effortless content authoring. Drupal 8 will quickly become the new standard for deploying content to both the web and mobile applications. However, with so many new changes, it can quickly become overwhelming knowing where to start and how to quickly. Starting from the bottom up, we will install, set up, and configure Drupal 8. We’ll navigate the Admin interface so you can learn how to work with core themes and create new custom block layouts. Walk through a real-world project to create a Twig theme from concept to completion while adopting best practices to implement CSS frameworks and JavaScript libraries. We will see just how quick and easy it is to create beautiful, responsive Drupal 8 websites while avoiding the common mistakes that many front-end developers make.

Related Content you might be interested in

Current Title:

Small book image
Drupal 8 Theming with Twig
Chaz Chumley
Mar, 2016 | 376 pages
No titles found
Table of Contents (20 chapters)
Drupal 8 Theming with Twig
Drupal 8 Theming with Twig
Credits
Credits
About the Author
About the Author
Acknowledgments
Acknowledgments
About the Reviewer
About the Reviewer
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Setting Up Our Development Environment
Setting Up Our Development Environment
Installing an AMP (Apache, MySQL, PHP) stack
A quick tour of MAMP PRO
Installing Drupal 8
Reviewing the new admin interface
Using the project files
Summary
2
Theme Administration
Theme Administration
What is a theme?
Exploring the Appearance interface
Drupal's core themes
Theme states
Installing and uninstalling themes
Theme settings
Theme-specific settings
Using prebuilt themes
Manually installing a theme
Cleaning up our themes folder
Managing content with blocks
Managing custom blocks
Summary
3
Dissecting a Theme
Dissecting a Theme
Setting up a local development environment
Default themes versus custom themes
Folder structure and naming conventions
Managing configuration in Drupal 8
Reviewing the new info.yml file
The role of templates in Drupal
Creating our first basic theme
Introducing Twig
Template variables
The role of the theme file in Drupal
Summary
4
Getting Started – Creating Themes
Getting Started – Creating Themes
Starter themes
Creating a Bootstrap starter
Creating a Jumbotron
Rethinking our layout
Using Twig templates
Subthemes
Touring Classy
Summary
5
Prepping Our Project
Prepping Our Project
Walking through the design mockup
Restoring our database snapshot
Creating a custom theme
Summary
6
Theming Our Homepage
Theming Our Homepage
Creating our HTML wrapper
Creating our homepage
Implementing our Header Top region
Implementing our Header region
Implementing our Headline Region
Implementing our Before Content region
Implementing the footer
Summary
7
Theming Our Interior Page
Theming Our Interior Page
Reviewing the About Us mockup
Creating our interior page template
Adding our Global Header
Implementing our page title
Implementing our main page structure
Implementing our Team members section
Adding our global footer
Fixing JavaScript errors
Summary
8
Theming Our Blog Listing Page
Theming Our Blog Listing Page
Reviewing the Blog Listing mockup
Creating our blog listing
Creating a Post Listing view
Managing our Post Listing block
Implementing our Node template
Creating a theme file
Creating a Categories block
Managing our Categories block
Implementing responsive sidebars
Theming a Block template
Drupal Views and Twig templates
Managing popular versus recent content
Adding the About Us block
Summary
9
Theming Our Blog Detail Page
Theming Our Blog Detail Page
Reviewing the Blog detail mockup
Previewing our Blog detail page
Creating a Post Full template
Working with comments
Implementing social sharing capabilities
Summary
10
Theming Our Contact Page
Theming Our Contact Page
Reviewing the contact page mockup
Introducing contact forms
Contact page layout
Adding a Callout block
Integrating Google Maps into our contact page
Summary
11
Theming Our Search Results
Theming Our Search Results
Reviewing the Search Results mockup
Looking at default Search results
Introducing core search
Working with Search Results templates
Search alternatives
Summary
12
Tips, Tricks, and Where to Go from Here
Tips, Tricks, and Where to Go from Here
Working with Local Tasks
Reusing Twig templates
Where do we go from here?
Summary
Index
Index

Adding our global footer

Our website has several global components that were present on our homepage that don't currently exist on our interior pages. One such item is the global header, which consists of the utility menu, logo, main menu, and search form block.

To add this section to our template, we need to simply copy the footer markup from the page--front.html.twig template:

  1. Open page.html.twig and delete the entire contents.

  2. Open page--front.html.twig and copy the following markup:

    <footer id="footer" role="contentinfo">

    <div class="container main-footer">
        <div class="row">
          <div class="col-md-4">
            {{ page.footer_first }}
          </div>

          <div class="col-md-4">
            {{ page.footer_second }}
          </div>

          <div class="col-md-4">
            {{ page.footer_third }}
          </div>

        </div>
	    </div>

      <div class="footer-copyright">
       ...
Previous Section
End of Section 8
Next Section