Optimizing Drupal 7 HTML Markup

Using Panels, Page Manager, and Fences to perfection.

Created by Jim Birch
jimbir.ch/optimizing
@thejimbirch
Xeno Media, Inc.

Why?

Markup

Performance

Security

The Inspiration

Failed Not so great - Attempts

Rendering HTML with Drupal: Past, Present and Future by Steve Persch

Exploring Panels by Jason Bell

Fences Module (Markup)

Helps us to:

• gain complete control of every field's markup.
• reset all HTML no matter the field type.
• add additional field templates.

Panels and Page Manager/ctools (Markup)

Allows us to:

• completely separate layout from design and content.
• easily create variations.
• configure customizations rapidly.

Panels are faster than blocks (Performance)

Going back to 2010, Developers have been writing about Panels' performance advantage

• Lullabot: Assembling Pages with Drupal [2010]
• Code Enigma: Performance Of Panels [2012]
• Koplowicz and Sons: Panels vs. Blocks [2013]

Panes are more secure than blocks (Security)

Protect your content, and your user's access by using Panes.

• The Block access permission, Administer blocks, is all or nothing.
• Custom Content Panes are configurable and feature-izable.
• Fieldable Panel Panes allow for Revisions, like nodes.

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

Customizing Templates

You can still add customized templates as you normally would.

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.

About Page Manager Pages

Page Manager

New and Existing pages can be added or controlled by admins or modules.

Page Manager Page - Summary

Overview with quick links to common areas.

Page Manager Page - Template

Panels Everywhere allows you to have different Site templates.

Page Manager Page - General

Define general attributes of the page including CSS

Page Manager Page - Selection Rules

When this pane will be (or not be) used.

Page Manager Page - Contexts

For more advanced rendering on pages.

Page Manager Page - Meta tags

Add to custom pages, or override existing pages' meta tags.

Page Manager Page - Layouts

Choose the layout for the page.

Page Manager Page - Content

Select and add content to the page.

Putting it all together with Page Manager

Site Template Page

Define the default layout, provided by the Panels Everywhere module.

							
	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

• Fences and Theme templates give us control of field markup.
• Panels, Panels Everywhere, and Layouts give us control of the layout markup.
• Page Manager puts it all together by enabling us to select which layouts are used and what content is loaded in any scenario.

THE END

Continuing the conversation:

Created by Jim Birch
jimbir.ch/optimizing-drupal-7-html-markup
@thejimbirch
Xeno Media, Inc.

Bonus Points

Extending Panels Even Further

• Page Manager Existing Pages - For adding pages that already exist into Page Manager.
• Panelizer - Allows fo creating Panels on top of individual nodes and display modes.
• 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!