Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,947 views

Published on

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

Published in: Internet
  • Be the first to comment

  • Be the first to like this

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

  1. 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. 2. PANELS AND PAGE MANAGER (CTOOLS) Allows us to: completely separate design from content and layout. easily create variations. configure customizations rapidly.
  3. 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. 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. 5. NORMALIZING OUR HTML
  6. 6. FENCES MODULE Adds a new Wrapper markup option to all fields
  7. 7. 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
  8. 8. RESETTING TEMPLATES Remove all excess HTML from Templates in out theme
  9. 9. BUILDING THE LAYOUT WITH PANELS
  10. 10. 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
  11. 11. 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.
  12. 12. DEFINE REGIONS IN THE LAYOUT'S .INC
  13. 13. LAYOUT THE REGIONS AND THE HTML STRUCTURE IN THE .TPL
  14. 14. 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.
  15. 15. NESTED PANEL REGIONS Panels Everywhere is the darker regions, Traditional Panels, the lighter.
  16. 16. PUTTING IT ALL TOGETHER WITH PAGE MANAGER
  17. 17. 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.
  18. 18. SITE TEMPLATE Choose the Layout from what we defined in the .inc file of the plugin.
  19. 19. SITE TEMPLATE Add the Content
  20. 20. SITE TEMPLATE Be sure to include Page Messages: Messages, Tabs, Help Page Content: Pulls in subsequent node panels
  21. 21. NODE TEMPLATE Create Variants for Node, or each Node Type Selection Rules can be positive, or negative (NOT)
  22. 22. NODE TEMPLATE Choose Layout, from the second layout we created earlier
  23. 23. NODE TEMPLATE Choose Content: Individual fields, or Entity View Modes like Full Content or Teaser. Plus you can add Content Panes or Blocks.
  24. 24. NODE TEMPLATE Here's another example, of a variant, Node Type = Blog. I added the Disqus Comment Block
  25. 25. TO SUM UP
  26. 26. 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.
  27. 27. THE END CONTINUING THE CONVERSATION: Created by Jim Birch jimbir.ch/optimizing-drupal-7-html-markup @thejimbirch Xeno Media, Inc.
  28. 28. BONUS POINTS
  29. 29. 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

×