Drupal 8 Theming with Twig

Drupal 8 Theming with Twig

by Chaz Chumley
Released March 2016
Publisher(s): Packt Publishing
ISBN: 9781782168737

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Master Drupal 8’s new Twig templating engine to create fun and fast websites with simple steps to help you move from concept to completion

About This Book

  • Create beautiful responsive Drupal 8 websites using Twig
  • Quickly master theme administration, custom block layouts, views, and the Twig template structure
  • A step-by-step guide to the most common approaches in web design

Who This Book Is For

This book is intended for front-end developers, designers, and anyone who is generally interested in learning all the new features of Drupal 8 theming. Discover what has changed from Drupal 7 to Drupal 8 and immerse yourself in the new Twig PHP templating engine. Familiarity with HTML5, CSS3, JavaScript, and the Drupal Admin interface would be helpful. Prior experience with setting up and configuring a standalone development environment is required as we will be working with PHP and MySQL.

What You Will Learn

  • Navigate the Drupal 8 Admin interface
  • Build custom block layouts with reusable and fieldable blocks
  • Create subthemes based on the Bartik and Classy base themes
  • Construct a responsive theme with Twitter Bootstrap
  • Work with the new Twig PHP templating engine
  • Configure Drupal for Twig debugging
  • Enable preprocessing of Twig variables
  • Develop a theme from scratch following a step-by-step project outline

In Detail

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.

Style and approach

Drupal 8 Theming with Twig is intended for front-end developers, designers, and anyone who is generally interested in learning all the new features of Drupal 8 theming. Discover what has changed from Drupal 7 to Drupal 8 and immerse yourself in the new Twig PHP templating engine. Familiarity with HTML5, CSS3, JavaScript, and the Drupal Admin interface would be helpful. Prior experience with setting up and configuring a standalone development environment is required as we will be working with PHP and MySQL.

Table of contents

  1. Drupal 8 Theming with Twig
    1. Table of Contents
    2. Drupal 8 Theming with Twig
    3. Credits
    4. About the Author
    5. Acknowledgments
    6. About the Reviewer
    7. www.PacktPub.com
      1. eBooks, discount offers, and more
        1. Why subscribe?
    8. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    9. 1. Setting Up Our Development Environment
      1. Installing an AMP (Apache, MySQL, PHP) stack
        1. Introducing MAMP
        2. Downloading MAMP
        3. Installing MAMP
      2. A quick tour of MAMP PRO
        1. General settings for MAMP PRO
        2. Host settings
      3. Installing Drupal 8
        1. Downloading Drupal 8
          1. Creating our document root
          2. Creating our host entry
        2. Creating a new database for Drupal
          1. Using phpMyAdmin
        3. Completing Drupal 8 installation
          1. Choosing a language
          2. Choosing a profile
          3. Verifying requirements
          4. Database configuration
          5. Configuring the site
          6. Site maintenance account
          7. Regional settings
          8. Update notifications
      4. Reviewing the new admin interface
        1. Exploring the admin menu
        2. Previewing the interface
        3. Exploring Drupal 8 folder structure
          1. The core folder
          2. The modules folder
          3. The sites folder
          4. The themes folder
      5. Using the project files
        1. Downloading and extracting the exercise files
        2. Database backup
          1. Export settings
        3. Database restore
        4. Using Google Chrome to inspect elements
      6. Summary
    10. 2. Theme Administration
      1. What is a theme?
      2. Exploring the Appearance interface
      3. Drupal's core themes
        1. Bartik
        2. Seven
        3. Stark
        4. Classy
      4. Theme states
        1. Installed themes
        2. Uninstalled themes
        3. Default theme
      5. Installing and uninstalling themes
        1. Step one – installing a theme
        2. Step two – uninstalling a theme
      6. Theme settings
        1. Toggling the display of page elements
        2. Logo image settings
        3. Shortcut icon settings
      7. Theme-specific settings
      8. Using prebuilt themes
        1. Installing a new theme
          1. Installing from a URL
          2. Uploading a module or theme archive to install
      9. Manually installing a theme
      10. Cleaning up our themes folder
      11. Managing content with blocks
        1. Exploring the Block layout
        2. Blocks and regions
        3. Demonstrating block regions
        4. Placing blocks into regions
        5. Configuring a block
          1. Managing the title
        6. Managing visibility settings
          1. Content types restriction
          2. Page restriction
          3. Role restriction
        7. Creating a custom block
      12. Managing custom blocks
        1. Exploring the custom block library
        2. Exploring block types
        3. Managing fields
        4. Managing display
      13. Summary
    11. 3. Dissecting a Theme
      1. Setting up a local development environment
        1. Managing sites/default folder permissions
        2. Configuring settings.local.php
          1. Disabling CSS and JS aggregation
          2. Disabling render and page cache
          3. Disabling test modules and themes
      2. Default themes versus custom themes
      3. Folder structure and naming conventions
      4. Managing configuration in Drupal 8
      5. Reviewing the new info.yml file
        1. Metadata
        2. Libraries
          1. Defining a library
            1. Overriding libraries
            2. Extending libraries
          2. Attaching a library
            1. Using Twig to attach a library
            2. Using the preprocess functions to attach a library
        3. Regions
      6. The role of templates in Drupal
        1. How templates work
        2. Where to find templates
      7. Creating our first basic theme
        1. Step One – creating a new folder
        2. Step two – create an info file
        3. Step three – copy core templates
        4. Step four – include a screenshot
        5. Step five – installing our theme
        6. Step six – Welcome to Twig
      8. Introducing Twig
        1. Enabling Twig debug
        2. Twig fundamentals
          1. Commenting variables
          2. Setting variables
          3. Printing variables
          4. Dumping variables
          5. Filters
          6. Control structures
      9. Template variables
      10. The role of the theme file in Drupal
        1. Preprocessors and hooks
        2. Overriding variables
      11. Summary
    12. 4. Getting Started – Creating Themes
      1. Starter themes
      2. Creating a Bootstrap starter
        1. Understanding grids and columns
        2. Setting up a theme folder
        3. Adding a screenshot
        4. Configuring our theme
        5. Installing our theme
        6. Working with libraries
          1. Adding assets
          2. Creating a library reference
          3. Including our library
      3. Creating a Jumbotron
        1. Step one – managing block content
        2. Step two – hiding the page title
      4. Rethinking our layout
        1. Adding regions
        2. Managing the block content
      5. Using Twig templates
        1. Creating a homepage template
        2. Creating region templates
        3. Working with the Theme layer
        4. Using Devel to print variables
          1. Printing variables from a function
      6. Subthemes
        1. Adding the theme folder
        2. Including a screenshot
        3. Configuring our theme
        4. Installing our theme
      7. Touring Classy
        1. Overriding a library
      8. Summary
    13. 5. Prepping Our Project
      1. Walking through the design mockup
        1. Homepage layout
          1. Defining homepage regions and user interaction
        2. Basic page layout
          1. Defining interior regions
        3. Landing page layout
        4. Blog detail layout
        5. Contact page
        6. Search results
      2. Restoring our database snapshot
      3. Creating a custom theme
        1. Setting up theme folders
        2. Adding a screenshot
        3. Creating our configuration file
        4. Installing our theme
        5. Setting up our regions
        6. Setting up our assets
        7. Adding additional assets
        8. Handling default files
      4. Summary
    14. 6. Theming Our Homepage
      1. Creating our HTML wrapper
        1. Introducing web fonts
      2. Creating our homepage
        1. Using page templates
        2. Working with static content
      3. Implementing our Header Top region
        1. Creating our Social Icons block
        2. Installing Font Awesome library
        3. Refactoring Header Top region
      4. Implementing our Header region
        1. Adding a logo
        2. Enabling Site branding
        3. Printing our Header region
        4. Creating Block templates
        5. Implementing our search form block
        6. Placing our search form block
        7. Creating a search form block template
        8. Adding custom JavaScript
        9. Creating an input element template
        10. Working with menus
        11. Creating a menu template
        12. Creating System Menu block template
        13. Creating a sticky header
      5. Implementing our Headline Region
        1. Creating our Headline View and Block
        2. Adding our Headlines Block
        3. Printing our Headline region
        4. Configuring FlexSlider library
        5. Attaching a library using Twig
        6. Enable FlexSlider
        7. Implementing Parallax
        8. Adding a scroll effect
        9. Enabling the scroll script
        10. Attaching ScrollTo library using Twig
      6. Implementing our Before Content region
        1. Creating our Services block
        2. Creating our Features block
        3. Refactoring Before Content region
      7. Implementing the footer
        1. Creating our custom blocks
        2. Refactoring our main footer
          1. Footer first
          2. Footer second
          3. Footer third
          4. Footer bottom left
          5. Footer bottom right
      8. Summary
    15. 7. Theming Our Interior Page
      1. Reviewing the About Us mockup
      2. Creating our interior page template
      3. Adding our Global Header
      4. Implementing our page title
        1. Working with static HTML
        2. Adding new regions
        3. Reassigning the Page title block
        4. Printing the Title Bar region
        5. Creating a block template
      5. Implementing our main page structure
        1. Creating a Node template
      6. Implementing our Team members section
        1. Prepping our Team Member View
        2. Creating our Team Member View
        3. Managing our Team Members listing block
        4. Formatting Views with CSS
        5. Adding CSS classes to Views
        6. Using Twig variables to rewrite field content
        7. Rearranging View fields
        8. Adding a View header
        9. Refactoring the After Content region
      7. Adding our global footer
      8. Fixing JavaScript errors
      9. Summary
    16. 8. Theming Our Blog Listing Page
      1. Reviewing the Blog Listing mockup
      2. Creating our blog listing
        1. Adding a new display mode
        2. Managing the display
          1. Enabling fields
          2. Field label visibility
          3. Formatting fields
      3. Creating a Post Listing view
        1. Using Content Display modes with views
      4. Managing our Post Listing block
      5. Implementing our Node template
        1. Adding CSS classes to Twig
        2. Working with content variables
        3. Using the without filter
        4. Creating our post image slider
        5. Working with field templates
        6. Adding the Owl Carousel library
        7. Using Twig filters for dates
        8. Printing title and teaser
        9. Creating our post metadata
        10. Field templates and taxonomy
        11. Handling comments in Drupal 8
      6. Creating a theme file
        1. Printing our comment count
        2. Adding a read more link
      7. Creating a Categories block
      8. Managing our Categories block
      9. Implementing responsive sidebars
      10. Theming a Block template
      11. Drupal Views and Twig templates
      12. Managing popular versus recent content
        1. Creating our recent posts block
        2. Creating our popular posts block
        3. Sorting views by comment count
        4. Attaching a view to the footer
        5. Managing our popular posts block
        6. Using Twig and Bootstrap tabs
          1. Recent Posts Twig template
          2. Popular Posts Twig template
        7. Using Views-view templates
        8. Creating a Post Teaser Twig template
      13. Adding the About Us block
        1. Implementing the About Us template
      14. Summary
    17. 9. Theming Our Blog Detail Page
      1. Reviewing the Blog detail mockup
      2. Previewing our Blog detail page
      3. Creating a Post Full template
        1. Altering fields
      4. Working with comments
        1. Introducing Comment types
        2. Reviewing Default Comment type fields and display
        3. Enabling Post Type Comments field
        4. Creating a Field Comments template
        5. Theming the Comment thread
        6. Enabling user photos for Comment threads
        7. Cleaning up the User Picture field
          1. Creating the Field User Picture template
        8. Date and time formats
      5. Implementing social sharing capabilities
        1. The Add This buttons
          1. Creating a library entry
          2. Attaching the library to our Blog detail page
          3. Displaying buttons
      6. Summary
    18. 10. Theming Our Contact Page
      1. Reviewing the contact page mockup
      2. Introducing contact forms
        1. Editing a contact form
        2. Managing form fields
        3. Managing form display
      3. Contact page layout
      4. Adding a Callout block
        1. Creating the Callout block template
      5. Integrating Google Maps into our contact page
        1. Configure Google Maps
        2. Creating our Google Maps block
        3. Creating the Callout Map template
      6. Summary
    19. 11. Theming Our Search Results
      1. Reviewing the Search Results mockup
      2. Looking at default Search results
      3. Introducing core search
        1. Indexing content
        2. Editing search pages
          1. Disabling search pages
      4. Working with Search Results templates
        1. Modifying the item list template
        2. Cleaning up each result
      5. Search alternatives
        1. Search API
          1. Installing the Search API
        2. Adding a server
        3. Adding an index
          1. Configuring bundles
          2. Adding fields to our index
        4. Creating a Search Results View
          1. Using the Search index view mode
          2. Adding filter criteria
          3. Placing our exposed search form
          4. Adding our placeholder attribute
        5. Using our search form
          1. Displaying the number of search results
          2. Adding a No Results message
      6. Summary
    20. 12. Tips, Tricks, and Where to Go from Here
      1. Working with Local Tasks
        1. Theming local tasks
        2. Working with Status messages
          1. Adding the Highlighted region
          2. Theming our Status message block
      2. Reusing Twig templates
        1. Using extends to share layouts
        2. Working with Twig blocks
      3. Where do we go from here?
      4. Summary
    21. Index

Product information

  • Title: Drupal 8 Theming with Twig
  • Author(s): Chaz Chumley
  • Release date: March 2016
  • Publisher(s): Packt Publishing
  • ISBN: 9781782168737