Embed Size (px)
Citation preview
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
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
