Optimizing Drupal 7 HTML Markup – Using Panels, Page Manager, and Fences to perfection.
Optimizing Drupal 7 HTML Markup
Using Panels, Page Manager, and Fences to perfection.
Created by Jim Birchjimbir.ch/optimizing-drupal-7-html-markup@thejimbirchXeno Media, Inc.
Panels and Page Manager (ctools)
Allows us to:
- completely separate design from content and layout.
- easily create variations.
- configure customizations rapidly.
Fences Module
Helps us to:
- gain complete control of every field.
- reset all HTML no matter what field type.
- add additional field templates available to any field.
Panels are faster than blocks
Going back to 2010, Developers have been writing about Panels' performance advantage
Normalizing our HTML
Fences Module
Adds a new Wrapper markup option to all fields
Easily add More Field Templates
Create a new TPL in your theme, and Fences will find it and add it to the list.
field--fences-NAMEOFELEMENT.tpl.php and field--fences-NAMEOFELEMENT-multiple.tpl.php
Resetting Templates
Remove all excess HTML from Templates in out theme
Building the layout with Panels
Add Layout Plugin location to the .info file of your Theme
; Panels layouts. You can place multiple layouts in this folder. plugins[panels][layouts] = layouts
Copy an existing layout plugin from:
/sites/all/modules/contrib/panels/plugins/layouts/
The plugin contains 4 files:
- .css - The CSS file used to layout the admin.
- .inc - Defines the attributes of the layout.
- .png - The icon for the layout, used in the admin.
- .tpl - The template for layout.
Define Regions in the Layout's .inc
Layout the Regions and the HTML structure in the .tpl
Panels Everywhere
Traditionally, Panels replaces the "content" area of a Drupal layout.
With the Panels Everywhere module, you can replace the Region system of Drupal.
Nested Panel Regions
Panels Everywhere is the darker regions, Traditional Panels, the lighter.
Putting it all together with Page Manager
Site Template
Define the default layout, provided by the Panels Everywhere module.
General Tab: Remove Excess CSS
no-sidebars page-node- node-type-page not-logged-in html logged-in one-sidebar sidebar-first not-front
You can also add classes, and ID, or additional CSS to be loaded inline.
Site Template
Choose the Layout from what we defined in the .inc file of the plugin.
Site Template
Add the Content
Site Template
Be sure to include
- Page Messages: Messages, Tabs, Help
- Page Content: Pulls in subsequent node panels
Node Template
Create Variants for Node, or each Node Type
Selection Rules can be positive, or negative (NOT)
Node Template
Choose Layout, from the second layout we created earlier
Node Template
Choose Content: Individual fields, or Entity View Modes like Full Content or Teaser. Plus you can add Content Panes or Blocks.
Node Template
Here's another example, of a variant, Node Type = Blog. I added the Disqus Comment Block
To Sum Up
Summary
- Using Fences, we can gain complete control over fields.
- Using the Theme templates, we can strip out any unwanted HTML inserted by Drupal core.
- Page Manager allows us to define layouts, and what content gets loaded gives us complete control over the page.
THE END
Continuing the conversation:
Created by Jim Birchjimbir.ch/optimizing-drupal-7-html-markup@thejimbirchXeno Media, Inc.
Bonus Points
Bonus Points
- Page Manager Existing Pages - For adding pages that already exist into Page Manager.
- Panelizer - For allowing the overriding of invididual nodes.
- Mini Panels - For adding more nesting of Panels inside of Panels
- Custom content panes and Views content panes - Blocks are slow, use Content Panes instead!