optimizing drupal 7 html markup - using panels, page manager, and fences to perfection
TRANSCRIPT
![Page 1: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/1.jpg)
OPTIMIZING DRUPAL 7HTML MARKUPUSING PANELS, PAGE MANAGER, ANDFENCES TO PERFECTION.
Created by Jim Birchjimbir.ch/optimizing-drupal-7-html-markup@thejimbirchXeno Media, Inc.
![Page 2: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/2.jpg)
PANELS AND PAGE MANAGER (CTOOLS)Allows us to:
completely separate design from content and layout.easily create variations.configure customizations rapidly.
![Page 3: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/3.jpg)
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.
![Page 4: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/4.jpg)
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]
![Page 5: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/5.jpg)
NORMALIZING OUR HTML
![Page 7: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/7.jpg)
![Page 8: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/8.jpg)
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
![Page 9: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/9.jpg)
RESETTING TEMPLATES
Remove all excess HTML from Templates in out theme
![Page 10: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/10.jpg)
![Page 11: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/11.jpg)
BUILDING THE LAYOUT WITHPANELS
![Page 12: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/12.jpg)
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
![Page 13: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/13.jpg)
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.
![Page 14: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/14.jpg)
DEFINE REGIONS IN THE LAYOUT'S .INC
![Page 15: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/15.jpg)
![Page 16: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/16.jpg)
LAYOUT THE REGIONS AND THE HTML STRUCTURE IN THE.TPL
![Page 17: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/17.jpg)
PANELS EVERYWHERETraditionally, Panels replaces the "content" area of a Drupal
layout.
With the Panels Everywhere module, you can replace theRegion system of Drupal.
![Page 18: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/18.jpg)
NESTED PANEL REGIONS
Panels Everywhere is the darker regions, Traditional Panels,the lighter.
![Page 19: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/19.jpg)
PUTTING IT ALL TOGETHER WITHPAGE MANAGER
![Page 20: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/20.jpg)
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.
![Page 21: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/21.jpg)
SITE TEMPLATEChoose the Layout from what we defined in the .inc file of
the plugin.
![Page 22: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/22.jpg)
![Page 23: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/23.jpg)
SITE TEMPLATEAdd the Content
![Page 24: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/24.jpg)
SITE TEMPLATEBe sure to include
Page Messages: Messages, Tabs, HelpPage Content: Pulls in subsequent node panels
![Page 25: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/25.jpg)
NODE TEMPLATECreate Variants for Node, or each Node Type
Selection Rules can be positive, or negative (NOT)
![Page 26: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/26.jpg)
NODE TEMPLATEChoose Layout, from the second layout we created earlier
![Page 27: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/27.jpg)
NODE TEMPLATEChoose Content: Individual fields, or Entity View Modes like
Full Content or Teaser.Plus you can add Content Panes or Blocks.
![Page 28: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/28.jpg)
![Page 29: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/29.jpg)
NODE TEMPLATEHere's another example, of a variant, Node Type = Blog. I
added the Disqus Comment Block
![Page 30: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/30.jpg)
![Page 31: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/31.jpg)
TO SUM UP
![Page 32: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/32.jpg)
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.
![Page 33: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/33.jpg)
THE ENDCONTINUING THE CONVERSATION:
Created by Jim Birchjimbir.ch/optimizing-drupal-7-html-markup@thejimbirchXeno Media, Inc.
![Page 34: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/34.jpg)
BONUS POINTS
![Page 35: Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to Perfection](https://reader031.vdocuments.mx/reader031/viewer/2022021919/58708f621a28ab412b8b526f/html5/thumbnails/35.jpg)
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