Marky Markup and the Funky Bunch
-
Upload
dtraft -
Category
Technology
-
view
926 -
download
5
Transcript of Marky Markup and the Funky Bunch
![Page 1: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/1.jpg)
Marky Markup and the Funky BunchBest Practices for Generating Markup in Drupal
![Page 2: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/2.jpg)
About UsDrew 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
![Page 4: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/4.jpg)
Common strategies for managing markupWYSIWYG Text Editors
Theme template files (.tpl.php)
Views
template.php functions
Fences Module
Display Suite
Panels Module
![Page 5: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/5.jpg)
Evaluation Criteria
User ease of use
Flexibility
Cleanliness of Markup
Level of Effort
Comfort level with PHP
Comfort level with HTML
![Page 6: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/6.jpg)
Drupal Page Lifecycle
![Page 7: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/7.jpg)
Drupal Page Lifecyle
Request path mapped to
internal path
Hooks and Theming functions
.tpl.php
Module loads
content
![Page 8: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/8.jpg)
WYSIWYG Text Editors
![Page 9: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/9.jpg)
OverviewDrupal 7
Install CKEditor or wysiwyg module and the text editor of your choice
Configure
Click the edit tab
Drupal 8
Click the edit tab
![Page 10: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/10.jpg)
More complex layouts, use wysiwyg_templateDownload 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
![Page 11: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/11.jpg)
Wysiwyg Templates
![Page 12: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/12.jpg)
Wysiwyg Templates
![Page 13: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/13.jpg)
Wysiwyg Templates
![Page 14: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/14.jpg)
Wysiwyg Templates
![Page 15: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/15.jpg)
Wysiwyg Templates
![Page 16: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/16.jpg)
Survey Says… Wysiwyg Templates!!!
Ease of Use
Flexibility
Markup Cleanliness
Level of Effort
Comfort Level with HTML
Comfort Level with PHP
![Page 17: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/17.jpg)
Theme Template Files
![Page 18: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/18.jpg)
Overview1.Find the template
2.Override it in your theme
![Page 19: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/19.jpg)
Drupal Temp Plates != Drupal templates
Image: Chris Wells (used by permission)
![Page 20: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/20.jpg)
What are templates?
Image: https://openclipart.org/detail/17506/jigsaw-puzzle
![Page 21: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/21.jpg)
* technically not a template file
*
Image: https://www.drupal.org/node/171194
![Page 22: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/22.jpg)
Templates: D7 Core’s html.tpl.php
/modules/system/
![Page 23: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/23.jpg)
Templates: Bartik’s page.tpl.php
Source: https://www.drupal.org/node/171194
/themes/bartik/templates
![Page 24: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/24.jpg)
Templates: Custom templates
/sites/all/themes/example
templates
1. Create a templates folder2. Copy templates into that
folder3. Customize templates4. Flush the theme registry’s
cache
![Page 25: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/25.jpg)
Templates: Theme Debug ModeAdd this to settings.php:
...or enable / disable with drush
https://www.drupal.org/node/223440
![Page 26: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/26.jpg)
Templates: Theme Debug Mode
https://www.drupal.org/node/223440
x = template currently being rendered
*= potential template suggestions
![Page 27: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/27.jpg)
Templates: Common Drupal Template Suggestionspage.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
block.tpl.php
block--module--delta.tpl.php
block--module.tpl.php
block--region.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
… and many more.
![Page 28: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/28.jpg)
Survey Says… Templates!!!
Ease of Use
Flexibility
Markup Cleanliness
Level of Effort
Comfort Level with HTML
Comfort Level with PHP
![Page 29: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/29.jpg)
Views
![Page 30: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/30.jpg)
Views: Overview1.Views templates
2.Views UI
![Page 31: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/31.jpg)
Views: Example
![Page 32: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/32.jpg)
Views: Example
![Page 33: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/33.jpg)
Views: Example
/sites/all/themes/example
templates
views
views-view-table.tpl.php
1. Create a views folder2. Copy templates into that
folder3. Customize templates4. Check template suggestions
in Views UI5. Flush the theme registry’s
cache
![Page 34: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/34.jpg)
Views: Example
![Page 35: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/35.jpg)
Views: Example
![Page 36: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/36.jpg)
![Page 37: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/37.jpg)
Views: Templatesviews-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
![Page 38: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/38.jpg)
Views: Example
/sites/all/themes/example
templates
views
views-view-table.tpl.php
![Page 39: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/39.jpg)
Views: Example
![Page 40: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/40.jpg)
Views UI: Format ❭ Settings
![Page 41: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/41.jpg)
Views UI: Fields ❭ Your Field
![Page 42: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/42.jpg)
Views UI: Fields ❭ Your Field
![Page 43: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/43.jpg)
Survey Says… Views!!!
Ease of Use
Flexibility
Markup Cleanliness
Level of Effort
Comfort Level with HTML
Comfort Level with PHP
![Page 44: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/44.jpg)
template.php
![Page 45: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/45.jpg)
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
![Page 46: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/46.jpg)
Preprocessing Functions / Render Arrays
![Page 47: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/47.jpg)
Theming Functions
![Page 48: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/48.jpg)
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.
![Page 49: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/49.jpg)
Survey Says… template.php!!!
Ease of Use
Flexibility
Markup Cleanliness
Level of Effort
Comfort Level with HTML
Comfort Level with PHP
![Page 50: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/50.jpg)
Fences Module
![Page 51: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/51.jpg)
About - trimming fat from your field markupThe 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
![Page 52: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/52.jpg)
Drupal Default Field Markup
Fences global overrides
![Page 53: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/53.jpg)
ahhhh, that’s more like it.
![Page 54: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/54.jpg)
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 markupFeatures a long list of HTML elements to wrap your fields in (including HTML5
elements!)
![Page 55: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/55.jpg)
Survey Says… Fences!!!
Ease of Use
Flexibility
Markup Cleanliness
Level of Effort
Comfort Level with HTML
Comfort Level with PHP
![Page 56: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/56.jpg)
Display Suite Module
![Page 57: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/57.jpg)
About - Entity layouts be on fleekA 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
Automatic “read-more” link
Add custom fields outside the node system
plus many more with the Display Suite Extra module
![Page 58: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/58.jpg)
Back to basics - control of element and CSS classes
![Page 59: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/59.jpg)
Cleaning up our act (Just like Marky Mark!)
![Page 60: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/60.jpg)
Display Suite Extras - Squeaky clean markup
![Page 61: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/61.jpg)
As always, tons of customizationCustom layouts (defined in your themes)
drush ds-build “Three columns stacked” --regions=“Header, Left, Middle, Right, Footer”
Custom CSS classesat /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 modesOutside of the core: Full Content, Teaser, Search Results, etc.
Works great with View (which allow you to select a View Mode)
Custom field templates (.tpl.php)helps eliminate markup clutter
![Page 62: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/62.jpg)
Where to deploy Display SuiteCan 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
![Page 63: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/63.jpg)
Ease of Use
Flexibility
Markup Cleanliness
Level of Effort
Comfort Level with HTML
Comfort Level with PHP
Survey Says… Display Suite!!!
![Page 64: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/64.jpg)
Panels Module
![Page 65: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/65.jpg)
About - Layouts with the greatest of easeRe-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
Panel Pages
Panelized Content Types
![Page 66: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/66.jpg)
Panel NodesAllows you to create new content types (just like an article, basic
page, etc.)Allows the addition of custom text, images, and other markup
Panel PagesCompletely outside the Drupal node architecturePanels UI provides a nice balance of simplicity and feature-richness
Powerful tools, such as:
Contexts
Access Control
Panelized Content TypesUses existing content types and allows layout management of the
defined fields
Can place content fields anywhere within a Panel layout
![Page 67: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/67.jpg)
Yeah, it’s all kinds of awesome
![Page 68: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/68.jpg)
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 managersCan be defined in code for easy version control during development
Drop and drop interface makes basic layout templating a breeze
![Page 69: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/69.jpg)
Survey Says… Panels!!!
Ease of Use
Flexibility
Markup Cleanliness
Level of Effort
Comfort Level with HTML
Comfort Level with PHP
![Page 70: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/70.jpg)
Marky Mark’s Rap UpWYSIWYG Text Editors
Theme template files (.tpl.php)
Views
template.php functions
Fences Module
Display Suite
Panels Module
![Page 71: Marky Markup and the Funky Bunch](https://reader038.fdocuments.in/reader038/viewer/2022103105/58f2a43a1a28ab79058b4589/html5/thumbnails/71.jpg)
Thank you!!!Q & A