Sherlock Markup and Sammy Semantic - drupal theming forensic analysis

1,380
-1

Published on

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,380
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
2
Likes
0
Embeds 0
No embeds

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
  • Sherlock Markup and Sammy Semantic - drupal theming forensic analysis

    1. 1. Sherlock Markup and SammySemanticName: Andreas Sahledrupal.org: pixelmordtwitter: @pixelmord
    2. 2. Drupal Theming - Forensic analysis
    3. 3. Personas „To be a good detective, you have to think like a criminal.”„I‘d rather be agangster than acriminal”
    4. 4. vsA criminal is a gangster that got cought...
    5. 5. For a crime there is alwaysmeans, motive and opportunity
    6. 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. 7. Hide something
    8. 8. configuration: hidden preprocess: [..][class][] = .element-invisible; display : none; tpl: hide(); Form API: #access Render API: unset (); .element-invisible
    9. 9. Opportunity whether or not the defendant had the chance to commit the crime• configuration• theme• the APIs + hook_XXX_alter
    10. 10. Opportunity:Configuration
    11. 11. Opportunity: Configuration• theme configuration• Fields UI / view mode• node/comment configuration• views/views field configuration
    12. 12. Opportunity: Theme
    13. 13. Opportunity: Theme• preprocessing• templates• theme functions• (hook_XXX_alter)
    14. 14. Opportunity: Theme• preprocessing• templates• theme functions• (hook_XXX_alter)
    15. 15. Opportunity: The APIs• Field API• Form API• Render API• hook_XXX_alter
    16. 16. Forensic analysis• Firebug• Theme developer• Study similar crimes • Devel module • Search and inspect plus RTFM • Study the master plan
    17. 17. Theme Developer• Heads Up Display• Inspect elements on site• drupal.org/project/devel_themer
    18. 18. Similar crimes• study ZEN and other base themes
    19. 19. check out the master plan • DEVEL the hell out of it • variables and Form/Render API • theme registry
    20. 20. dpm(‘everything‘);
    21. 21. Search, inspect, RTFM• hook_theme();• theme_function();• XXX.tpl.php• http://drupal.org/node/ 173880#theming- overrides
    22. 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. 23. Choose your weapon right,
    24. 24. Choose your weapon right,
    25. 25. theme function? template?
    26. 26. theme function? template? • theme function is faster • template is (pre)processed
    27. 27. Preprocessing• gangstatheme_preprocess_block• gangstatheme_preprocess_node
    28. 28. The second bullet • gangstatheme_process_page
    29. 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. 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. 31. Theming a field
    32. 32. Theming a block
    33. 33. #attached
    34. 34. Theming a form element
    35. 35. views themingconfigure everything / flexible templates
    36. 36. Theming a field view
    37. 37. Thank you!Name: Andreas Sahledrupal.org: pixelmordtwitter: @pixelmord
    38. 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/
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×