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.

Marky Markup and the Funky Bunch

1,050 views

Published on

Presentation given by JP McNeal and Drew Trafton of Bowst at NED Camp 2015

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Marky Markup and the Funky Bunch

  1. 1. Marky Markup and the Funky Bunch Best Practices for Generating Markup in Drupal
  2. 2. About Us Drew Trafton dtraft on drupal.org email: drew(at)bowst(dot)com Social media is not my thing JP McNeal @jpmcneal peezy on drupal.org I love a good puzzle
  3. 3. About Bowst Let’s Talk 650 Islington St Portsmouth NH, 03801 info@bowst.com 🔗 bowst.com
  4. 4. Common strategies for managing markup WYSIWYG Text Editors Theme template files (.tpl.php) Views template.php functions Fences Module Display Suite
  5. 5. Evaluation Criteria User ease of use Flexibility Cleanliness of Markup Level of Effort Comfort level with PHP
  6. 6. Drupal Page Lifecycle
  7. 7. Drupal Page Lifecyle Request path mapped to internal path Hooks and Theming functions .tpl.php Module loads content
  8. 8. WYSIWYG Text Editors
  9. 9. Overview Drupal 7 Install CKEditor or wysiwyg module and the text editor of your choice Configure Click the edit tab Drupal 8 Click the edit tab
  10. 10. More complex layouts, use wysiwyg_template Download Wysiwyg API template plugin module (2.x-dev) Download the text editor of your choice to sites/all/libraries Install and configure the Wysiwyg Template module
  11. 11. Wysiwyg Templates
  12. 12. Wysiwyg Templates
  13. 13. Wysiwyg Templates
  14. 14. Wysiwyg Templates
  15. 15. Wysiwyg Templates
  16. 16. Survey Says… Wysiwyg Templates!!! Ease of Use Flexibility Markup Cleanliness Level of Effort Comfort Level with HTML Comfort Level with PHP
  17. 17. Theme Template Files
  18. 18. Overview 1. Find the template 2. Override it in your theme
  19. 19. Drupal Temp Plates != Drupal templates Image: Chris Wells (used by permission)
  20. 20. What are templates? Image: https://openclipart.org/detail/17506/jigsaw-puzzle
  21. 21. * technically not a template file * Image: https://www.drupal.org/node/171194
  22. 22. Templates: D7 Core’s html.tpl.php /modules/system/
  23. 23. Templates: Bartik’s page.tpl.php Source: https://www.drupal.org/node/171194 /themes/bartik/templates
  24. 24. Templates: Custom templates /sites/all/themes/example templates 1. Create a templates folder 2. Copy templates into that folder 3. Customize templates 4. Flush the theme registry’s cache
  25. 25. Templates: Theme Debug Mode Add this to settings.php: ...or enable / disable with drush https://www.drupal.org/node/223440
  26. 26. Templates: Theme Debug Mode https://www.drupal.org/node/223440 x = template currently being rendered *= potential template suggestions
  27. 27. Templates: Common Drupal Template Suggestions page.tpl.php page--front.tpl.php page--node--edit.tpl.php page--node--nodeid.tpl.php page--node.tpl.php node.tpl.php node--nodeid.tpl.php node--type.tpl.php field.tpl.php field--field-name--content-type.tpl.php field--content-type.tpl.php field--field-name.tpl.php field--field-type.tpl.php taxonomy-term.tpl.php taxonomy-term--tid.tpl.php taxonomy-term--vocabulary.tpl.php
  28. 28. Survey Says… Templates!!! Ease of Use Flexibility Markup Cleanliness Level of Effort Comfort Level with HTML Comfort Level with PHP
  29. 29. Views
  30. 30. Views: Overview 1. Views templates 2. Views UI
  31. 31. Views: Example
  32. 32. Views: Example
  33. 33. Views: Example /sites/all/themes/example templates views views-view-table.tpl.php 1. Create a views folder 2. Copy templates into that folder 3. Customize templates 4. Check template suggestions in Views UI 5. Flush the theme registry’s cache
  34. 34. Views: Example
  35. 35. Views: Example
  36. 36. Views: Templates views-view.tpl.php views-view--funky--page.tpl.php views-view--page.tpl.php views-view--funky.tpl.php views-view-table.tpl.php views-view-table--page.tpl.php views-view-table--funky--page.tpl.php views-view-table--funky.tpl.php views-view-field.tpl.php views-view-field--page.tpl.php views-view-field--funky--page.tpl.php views-view-field--funky.tpl.php Note: You will often also see views-view-fields.tpl.php All views tables Views tables that are page displays Views tables that are in Funky view Views tables that are page displays in Funky view
  37. 37. Views: Example /sites/all/themes/example templates views views-view-table.tpl.php
  38. 38. Views: Example
  39. 39. Views UI: Format âť­ Settings
  40. 40. Views UI: Fields âť­ Your Field
  41. 41. Views UI: Fields âť­ Your Field
  42. 42. Survey Says… Views!!! Ease of Use Flexibility Markup Cleanliness Level of Effort Comfort Level with HTML Comfort Level with PHP
  43. 43. template.php
  44. 44. About - hooks, $vars, and oh so many options A train station between the drupal core/module layer and the templating layer TONS of ways to affect generated markup Location of all theming hooks Two main types of functions: Preprocessing functions - Drupal render arrays Theming functions - actual markup generation
  45. 45. Preprocessing Functions / Render Arrays
  46. 46. Theming Functions
  47. 47. Ok, so when should I use this? Great for affecting global styles of smaller components Smaller changes to markup (i.e. changing/adding css classes, etc.) Also, the recommended way to modify certain core components forms menus For larger components (pages, nodes, etc.) opportunity to clean up or modify data prior to being passed to templating layer.
  48. 48. Survey Says… template.php!!! Ease of Use Flexibility Markup Cleanliness Level of Effort Comfort Level with HTML Comfort Level with PHP
  49. 49. Fences Module
  50. 50. About - trimming fat from your field markup The Fences module is the easiest way to lose 30 lbs of markup FAST (without ever changing your diet or your templates!) Provides global and per-field configurable options for limiting field wrapper markup (both HTML elements and CSS classes) Automatically detects single vs. multiple fields and adjusts markup accordingly A go-to module for almost every project
  51. 51. Drupal Default Field Markup Fences global overrides
  52. 52. ahhhh, that’s more like it.
  53. 53. En garde!!! Let’s get fencing. Can be used in basically any new project Use with caution on existing projects, css/js may expect certain markup, classes, etc. Essentially handles a lot of the grunt work of creating custom field templates (field-- [type].tpl.php) in your theme Excellent for managing field-specific markup Features a long list of HTML elements to wrap your fields in (including HTML5 elements!)
  54. 54. Survey Says… Fences!!! Ease of Use Flexibility Markup Cleanliness Level of Effort Comfort Level with HTML Comfort Level with PHP
  55. 55. Display Suite Module
  56. 56. About - Entity layouts be on fleek A dozen different layouts out-of-the-box Region-based interface (similar to blocks) Can define different layouts/fields for different view modes (i.e. teaser, summary, etc.) Provides some really helpful additional options: Option to make image fields link-able Date formatting Can edit the label and label position
  57. 57. Back to basics - control of element and CSS classes
  58. 58. Cleaning up our act (Just like Marky Mark!)
  59. 59. Display Suite Extras - Squeaky clean markup
  60. 60. As always, tons of customization Custom layouts (defined in your themes) drush ds-build “Three columns stacked” --regions=“Header, Left, Middle, Right, Footer” Custom CSS classes at /admin/structure/ds/classes with the extras module Can create a “library” of custom classes which can then be assigned to regions, fields, etc. Custom view modes Outside of the core: Full Content, Teaser, Search Results, etc. Works great with View (which allow you to select a View Mode)
  61. 61. Where to deploy Display Suite Can be used effectively with almost any project to slim down generated markup Ideal if clients want the ability arrange entity content themselves Provides some basic options for altering entity rendering, which may be all you need is many cases. Especially great for projects where entity data is displayed in a number of different formats e.g. News Articles on a marketing site
  62. 62. Ease of Use Flexibility Markup Cleanliness Level of Effort Comfort Level with HTML Comfort Level with PHP Survey Says… Display Suite!!!
  63. 63. Panels Module
  64. 64. About - Layouts with the greatest of ease Re-usuable layouts that can be easily rearranged in the UI Extremely feature rich, but requires a fair amount of know-how Especially great for one-off pages (home, landing, or marketing campaign pages) Allows mixing many types of content in the same layout Nodes, Blocks, View, etc. Three main ways to use: Panel Nodes
  65. 65. Panel Nodes Allows you to create new content types (just like an article, basic page, etc.) Allows the addition of custom text, images, and other markup Panel Pages Completely outside the Drupal node architecture Panels UI provides a nice balance of simplicity and feature-richness Powerful tools, such as: Contexts Access Control Panelized Content Types Uses existing content types and allows layout management of the defined fields
  66. 66. Yeah, it’s all kinds of awesome
  67. 67. Sounds pretty rad, but what are the best use cases? Not particularly helpful for “field-level” markup generation, but great alternative to custom theme overrides for layout templating. Great for grouping together nodes, blocks, views, etc. with related content Has it’s own per-pane caching system, which is very performant. Good for developers, easy for content managers Can be defined in code for easy version control during development
  68. 68. Survey Says… Panels!!! Ease of Use Flexibility Markup Cleanliness Level of Effort Comfort Level with HTML Comfort Level with PHP
  69. 69. Marky Mark’s Rap Up WYSIWYG Text Editors Theme template files (.tpl.php) Views template.php functions Fences Module Display Suite
  70. 70. Thank you!!! Q & A

Ă—