Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection.

OPTIMIZING DRUPAL 7HTML MARKUPUSING PANELS, PAGE MANAGER, ANDFENCES 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 MODULEHelps 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 BLOCKSGoing 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]

NORMALIZING OUR HTML

FENCES MODULEAdds 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 andadd 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 WITHPANELS

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 EVERYWHERETraditionally, Panels replaces the "content" area of a Drupal

layout.

With the Panels Everywhere module, you can replace theRegion system of Drupal.

NESTED PANEL REGIONS

Panels Everywhere is the darker regions, Traditional Panels,the lighter.

PUTTING IT ALL TOGETHER WITHPAGE MANAGER

General Tab: Remove Excess CSS

no-sidebars page-node- node-type-page not-logged-in html logged-in one-sidebar sidebar-first not-front

SITE TEMPLATEDefine the default layout, provided by the Panels

Everywhere module.

You can also add classes, and ID, or additional CSS to beloaded inline.

SITE TEMPLATEChoose the Layout from what we defined in the .inc file of

the plugin.

SITE TEMPLATEAdd the Content

SITE TEMPLATEBe sure to include

Page Messages: Messages, Tabs, HelpPage Content: Pulls in subsequent node panels

NODE TEMPLATECreate Variants for Node, or each Node Type

Selection Rules can be positive, or negative (NOT)

NODE TEMPLATEChoose Layout, from the second layout we created earlier

NODE TEMPLATEChoose Content: Individual fields, or Entity View Modes like

Full Content or Teaser.Plus you can add Content Panes or Blocks.

NODE TEMPLATEHere's another example, of a variant, Node Type = Blog. I

added the Disqus Comment Block

TO SUM UP

SUMMARYUsing Fences, we can gain complete control over fields.Using the Theme templates, we can strip out anyunwanted HTML inserted by Drupal core.Page Manager allows us to define layouts, and whatcontent gets loaded gives us complete control over thepage.

THE ENDCONTINUING THE CONVERSATION:

Created by Jim Birchjimbir.ch/optimizing-drupal-7-html-markup@thejimbirchXeno Media, Inc.

BONUS POINTS

BONUS POINTS - For adding pages that

already exist into Page Manager.Panelizer - For allowing the overriding of invididualnodes.Mini Panels - For adding more nesting of Panels inside ofPanelsCustom content panes and Views content panes - Blocksare slow, use Content Panes instead!

Page Manager Existing Pages