The goal of this presentation is to explain how to minimize the markup that Drupal outputs, and gain complete control over the what and the where of the markup. Using the system described herein, we can coerce the HTML output of Drupal to match provided designs, or pre-existing HTML Layouts. We are not forced to try to make the Drupal default HTML output look like the design. For more information, please visit my long form blog post about the subject here: http://jimbir.ch/blog/using-fences-page-manager-optimize-html-markup-drupal-7

1. OPTIMIZING DRUPAL 7
HTML MARKUP
USING PANELS, PAGE MANAGER, AND
FENCES TO PERFECTION.
Created by Jim Birch
jimbir.ch/optimizing-drupal-7-html-markup
@thejimbirch
Xeno Media, Inc.

2. PANELS AND PAGE MANAGER (CTOOLS)
Allows us to:
completely separate design from content and layout.
easily create variations.
configure customizations rapidly.

3. 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.

4. PANELS ARE FASTER THAN BLOCKS
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]

5. NORMALIZING OUR HTML

6. FENCES MODULE
Adds a new Wrapper markup option to all fields

8. 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

9. RESETTING TEMPLATES
Remove all excess HTML from Templates in out theme

11. BUILDING THE LAYOUT WITH
PANELS

12. 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

13. 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.

14. DEFINE REGIONS IN THE LAYOUT'S .INC

16. LAYOUT THE REGIONS AND THE HTML STRUCTURE IN THE
.TPL

17. 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.

18. NESTED PANEL REGIONS
Panels Everywhere is the darker regions, Traditional Panels,
the lighter.

19. PUTTING IT ALL TOGETHER WITH
PAGE MANAGER

20. 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 TEMPLATE
Define the default layout, provided by the Panels
Everywhere module.
You can also add classes, and ID, or additional CSS to be
loaded inline.

21. SITE TEMPLATE
Choose the Layout from what we defined in the .inc file of
the plugin.

23. SITE TEMPLATE
Add the Content

24. SITE TEMPLATE
Be sure to include
Page Messages: Messages, Tabs, Help
Page Content: Pulls in subsequent node panels

25. NODE TEMPLATE
Create Variants for Node, or each Node Type
Selection Rules can be positive, or negative (NOT)

26. NODE TEMPLATE
Choose Layout, from the second layout we created earlier

27. NODE TEMPLATE
Choose Content: Individual fields, or Entity View Modes like
Full Content or Teaser.
Plus you can add Content Panes or Blocks.

29. NODE TEMPLATE
Here's another example, of a variant, Node Type = Blog. I
added the Disqus Comment Block

31. TO SUM UP

32. 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.

33. THE END
CONTINUING THE CONVERSATION:
Created by Jim Birch
jimbir.ch/optimizing-drupal-7-html-markup
@thejimbirch
Xeno Media, Inc.

34. BONUS POINTS

35. BONUS POINTS
- 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!
Page Manager Existing Pages