Your SlideShare is downloading. ×
Sherlock Markup and Sammy Semantic - drupal theming forensic analysis
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Sherlock Markup and Sammy Semantic - drupal theming forensic analysis

1,298
views

Published on

Presentation during Drupal Design Camp 2011 in Berlin. An overview of the Drupal 7 theme layer and its technical concepts.

Presentation during Drupal Design Camp 2011 in Berlin. An overview of the Drupal 7 theme layer and its technical concepts.

Published in: Technology, Business

2 Comments
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
1,298
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
2
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • My company is Wunderkraut.\nWe are based in Munich and do development, consulting and training for Drupal projects\n
  • the session is about finding opportunities to do theming\nand which tools to use\n
  • to be able to do all the cool theming stuff you have to do some detective work\n\n
  • if you ask 5 people, themers or developers you will get 5 different answers ho to do theming\nwe are not talking about wrong or right\n
  • means - the ability of the defendant to commit the crime\n
  • change the default\nremove markup or sometimes whole chunks of themed output\n
  • amazing how much time we spent hiding an removing stuff\n
  • there are many levels in the theme layer where you have opportunity to act\n
  • Opportunity is in various levels of drupal.\nThe deeper you go you get more power? Yes and No\nDeeper meens earlier most of the time\n
  • the real power for the theming gangster is not open stage\n
  • \n
  • \n
  • work on the master plan \n
  • sammy likes....\nsherlock recommends ...\n
  • \n
  • example module\nfield formatter + field widget\n
  • Render API also can be used for reordering\nRender API is very similar to Form API\n
  • \n
  • \n
  • the developers point of view\n
  • The severeness is determined by the amount of damage or casualties. \n
  • actually in Drupal 7 you have preprocessing also for theme functions\n
  • \n
  • \n
  • The onion is a good analogy because it’s easy and complex at the same time. \nIt’s easy because it’s just skin on top of skin all the way from inside out. \nBut its also complex, because the skins have different thickness and colour.\n
  • Render array goes from top down, \nbut with markup I‘m always thinking „inside out“\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. Sherlock Markup and SammySemanticName: Andreas Sahledrupal.org: pixelmordtwitter: @pixelmord
    • 2. Drupal Theming - Forensic analysis
    • 3. Personas „To be a good detective, you have to think like a criminal.”„I‘d rather be agangster than acriminal”
    • 4. vsA criminal is a gangster that got cought...
    • 5. For a crime there is alwaysmeans, motive and opportunity
    • 6. Motive the reason the defendant had to commit the crime• Remove Markup / Hide stuff• Change the markup• Add JS/CSS files• Alter the data
    • 7. Hide something
    • 8. configuration: hidden preprocess: [..][class][] = .element-invisible; display : none; tpl: hide(); Form API: #access Render API: unset (); .element-invisible
    • 9. Opportunity whether or not the defendant had the chance to commit the crime• configuration• theme• the APIs + hook_XXX_alter
    • 10. Opportunity:Configuration
    • 11. Opportunity: Configuration• theme configuration• Fields UI / view mode• node/comment configuration• views/views field configuration
    • 12. Opportunity: Theme
    • 13. Opportunity: Theme• preprocessing• templates• theme functions• (hook_XXX_alter)
    • 14. Opportunity: Theme• preprocessing• templates• theme functions• (hook_XXX_alter)
    • 15. Opportunity: The APIs• Field API• Form API• Render API• hook_XXX_alter
    • 16. Forensic analysis• Firebug• Theme developer• Study similar crimes • Devel module • Search and inspect plus RTFM • Study the master plan
    • 17. Theme Developer• Heads Up Display• Inspect elements on site• drupal.org/project/devel_themer
    • 18. Similar crimes• study ZEN and other base themes
    • 19. check out the master plan • DEVEL the hell out of it • variables and Form/Render API • theme registry
    • 20. dpm(‘everything‘);
    • 21. Search, inspect, RTFM• hook_theme();• theme_function();• XXX.tpl.php• http://drupal.org/node/ 173880#theming- overrides
    • 22. theme function call for Drupal 6.xtheme(hook, $arguments) http://api.drupal.org/api/function/theme/6 [ load theme registry ] [ check hook for *wild cards ] if hook is function f.a themeName_hook($arguments) template.php or f.b engineName_hook($arguments) .engine f.c theme_hook($arguments) .module/.inc [ default implementation as function ] else hook is template [ convert $arguments into variables ] [ check for render function, defaults to theme_render_template ] [ check for extension function and run, defaults to ".tpl.php" ] preprocess functions template_preprocess theme.inc t.a[ set variables & suggestions ] template_preprocess_hook .module/.inc moduleName_preprocess .module All variables passed by reference moduleName_preprocess_hook t.b between each preprocess function. As a result, variables are additive engineName_engine_preprocess .engine building the variables array. engineName_engine_preprocess_hook t.c engineName_preprocess template.php engineName_preprocess_hook t.d themeName_preprocess themeName_preprocess_hook [ collect suggestions ] drupal_discover_template [ find implemented suggestion ] theme_render_template [ assemble .tpl.php file ] suggestion default hooksuggestion.tpl.php hook.tpl.php <html> <html> <?php print $variable ?> <?php print $variable ?> </html> </html>
    • 23. Choose your weapon right,
    • 24. Choose your weapon right,
    • 25. theme function? template?
    • 26. theme function? template? • theme function is faster • template is (pre)processed
    • 27. Preprocessing• gangstatheme_preprocess_block• gangstatheme_preprocess_node
    • 28. The second bullet • gangstatheme_process_page
    • 29. „The onion analogy“• Markup wraps data like an onion.• The onion skins are produced in the different stages of the Drupal themeing process.
    • 30. „The onion analogy“• Markup wraps data like an onion.• The onion skins are produced in the different stages of the Drupal themeing process.
    • 31. Theming a field
    • 32. Theming a block
    • 33. #attached
    • 34. Theming a form element
    • 35. views themingconfigure everything / flexible templates
    • 36. Theming a field view
    • 37. Thank you!Name: Andreas Sahledrupal.org: pixelmordtwitter: @pixelmord
    • 38. image credits http://www.flickr.com/photos/nullvalue/4188517246/in/ http://www.flickr.com/photos/urban-spaceman/4311168437/in/ gallery-31964157@N00-72157626883338113/ gallery-31964157@N00-72157626883338113/ http://www.flickr.com/photos/gregwake/209493486/in/ gallery-31964157@N00-72157626883338113/ http://www.flickr.com/photos/dunechaser/2937238366/in/ gallery-31964157@N00-72157626883338113/ http://www.flickr.com/photos/ddalledo/807012017/in/ http://www.flickr.com/photos/elbragon/5455939124/in/ gallery-31964157@N00-72157626883338113/ gallery-31964157@N00-72157626883338113/ http://www.flickr.com/photos/mrcrash/823113691/in/http://www.flickr.com/photos/mskogly/2405945004/ gallery-31964157@N00-72157626883338113/ in/gallery-31964157@N00-72157626883338113/ http://www.flickr.com/photos/wondering_gypsy/3329497063/in/ gallery-31964157@N00-72157626883338113/ http://www.flickr.com/photos/johnmcnab/5499490056/ in/gallery-31964157@N00-72157626883338113/ http://www.flickr.com/photos/geojanitor/2432843590/in/ gallery-31964157@N00-72157626883338113/http://www.flickr.com/photos/skimaskdude/4379613766/in/ gallery-31964157@N00-72157626883338113/ http://www.flickr.com/photos/13218517@N00/3338928294/in/ gallery-31964157@N00-72157627028472076/http://www.flickr.com/photos/leonardlow/4337973246/in/ gallery-31964157@N00-72157627028472076/ http://www.flickr.com/photos/bricknave/4419270183/in/ gallery-31964157@N00-72157627028472076/ http://www.flickr.com/photos/ben_lawson/2039198622/in/ gallery-31964157@N00-72157627028472076/ http://www.flickr.com/photos/21232564@N06/2234726613/in/ gallery-31964157@N00-72157627028472076/ http://www.flickr.com/photos/wscullin/3770015991/in/ gallery-31964157@N00-72157626883338113/ http://www.flickr.com/photos/dvdmerwe/5111063582/in/ gallery-31964157@N00-72157627028472076/ http://www.flickr.com/photos/auntiep/17135231/in/ gallery-31964157@N00-72157627028472076/