Sherlock Markup and Sammy Semantic - drupal theming forensic analysis
•Als KEY, PDF herunterladen•
1 gefällt mir•972 views
Presentation during Drupal Design Camp 2011 in Berlin. An overview of the Drupal 7 theme layer and its technical concepts.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (8)
Ähnlich wie Sherlock Markup and Sammy Semantic - drupal theming forensic analysis
Ähnlich wie Sherlock Markup and Sammy Semantic - drupal theming forensic analysis (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Sherlock Markup and Sammy Semantic - drupal theming forensic analysis
- 1. Sherlock Markup and Sammy Semantic Name: Andreas Sahle drupal.org: pixelmord twitter: @pixelmord
- 2. Drupal Theming - Forensic analysis
- 3. Personas „To be a good detective, you have to think like a criminal.” „I‘d rather be a gangster than a criminal”
- 4. vs A criminal is a gangster that got cought...
- 5. For a crime there is always means, 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
- 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
- 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
- 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.x theme('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 hook suggestion.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
- 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
- 34. Theming a block
- 35. #attached
- 36. Theming a form element
- 38. views theming configure everything / flexible templates
- 39. Theming a field view
- 40. Thank you! Name: Andreas Sahle drupal.org: pixelmord twitter: @pixelmord
- 41. 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/
Hinweis der Redaktion
- 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&#x2019;s easy and complex at the same time. \nIt&#x2019;s easy because it&#x2019;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&#x2018;m always thinking &#x201E;inside out&#x201C;\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n