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

1. Marky Markup
and the Funky Bunch
Best Practices for Generating Markup in Drupal

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. About Bowst
Let’s Talk
650 Islington St
Portsmouth NH,
03801
info@bowst.com
🔗 bowst.com

4. Common strategies for managing markup
WYSIWYG Text Editors
Theme template files (.tpl.php)
Views
template.php functions
Fences Module
Display Suite

5. Evaluation Criteria
User ease of use
Flexibility
Cleanliness of Markup
Level of Effort
Comfort level with PHP

6. Drupal Page Lifecycle

7. Drupal Page Lifecyle
Request path
mapped to
internal path
Hooks and
Theming
functions
.tpl.php
Module loads
content

8. WYSIWYG Text Editors

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. 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. Wysiwyg Templates

12. Wysiwyg Templates

13. Wysiwyg Templates

14. Wysiwyg Templates

15. Wysiwyg Templates

16. Survey Says… Wysiwyg Templates!!!
Ease of Use
Flexibility
Markup
Cleanliness
Level of Effort
Comfort Level
with HTML
Comfort Level
with PHP

17. Theme Template Files

18. Overview
1. Find the template
2. Override it in your theme

19. Drupal Temp Plates != Drupal templates
Image: Chris Wells (used by permission)

20. What are templates?
Image: https://openclipart.org/detail/17506/jigsaw-puzzle

21. * technically not a template file
*
Image: https://www.drupal.org/node/171194

22. Templates: D7 Core’s html.tpl.php
/modules/system/

23. Templates: Bartik’s page.tpl.php
Source: https://www.drupal.org/node/171194
/themes/bartik/templates

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. Templates: Theme Debug Mode
Add this to settings.php:
...or enable / disable with drush
https://www.drupal.org/node/223440

26. Templates: Theme Debug Mode
https://www.drupal.org/node/223440
x = template currently being rendered
*= potential template suggestions

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. Survey Says… Templates!!!
Ease of Use
Flexibility
Markup
Cleanliness
Level of Effort
Comfort Level
with HTML
Comfort Level
with PHP

29. Views

30. Views: Overview
1. Views templates
2. Views UI

31. Views: Example

32. Views: Example

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. Views: Example

35. Views: Example

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

38. Views: Example
/sites/all/themes/example
templates
views
views-view-table.tpl.php

39. Views: Example

40. Views UI: Format ❭ Settings

41. Views UI: Fields ❭ Your Field

42. Views UI: Fields ❭ Your Field

43. Survey Says… Views!!!
Ease of Use
Flexibility
Markup
Cleanliness
Level of Effort
Comfort Level
with HTML
Comfort Level
with PHP

44. template.php

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

46. Preprocessing Functions / Render Arrays

47. Theming Functions

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

49. Survey Says… template.php!!!
Ease of Use
Flexibility
Markup
Cleanliness
Level of Effort
Comfort Level
with HTML
Comfort Level
with PHP

50. Fences Module

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

52. Drupal Default Field Markup
Fences global overrides

53. ahhhh, that’s more like it.

54. 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!)

55. Survey Says… Fences!!!
Ease of Use
Flexibility
Markup
Cleanliness
Level of Effort
Comfort Level
with HTML
Comfort Level
with PHP

56. Display Suite Module

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

58. Back to basics - control of element and CSS classes

59. Cleaning up our act (Just like Marky Mark!)

60. Display Suite Extras - Squeaky clean markup

61. 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)

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

63. Ease of Use
Flexibility
Markup
Cleanliness
Level of Effort
Comfort Level
with HTML
Comfort Level
with PHP
Survey Says… Display Suite!!!

64. Panels Module

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

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

67. Yeah, it’s all kinds of awesome

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

69. Survey Says… Panels!!!
Ease of Use
Flexibility
Markup
Cleanliness
Level of Effort
Comfort Level
with HTML
Comfort Level
with PHP

70. Marky Mark’s Rap Up
WYSIWYG Text Editors
Theme template files (.tpl.php)
Views
template.php functions
Fences Module
Display Suite

71. Thank you!!!
Q & A