Modern Theming: Beyond Proprocessing and .tpls
•Download as KEY, PDF•
2 likes•1,190 views
Recommended
Recommended
More Related Content
Similar to Modern Theming: Beyond Proprocessing and .tpls
Similar to Modern Theming: Beyond Proprocessing and .tpls (20)
More from Treehouse Agency
More from Treehouse Agency (10)
Recently uploaded
Recently uploaded (20)
Modern Theming: Beyond Proprocessing and .tpls
- 1. Modern Theming: Beyond Preprocessing and .tpls BADCamp October 22, 2011 Tim Cosgrove
- 2. Modern Theming Tim Cosgrove BADCamp, 2011, Tim Cosgrove
- 3. Modern Theming Tim Cosgrove ‣ Engineer and Tech PM BADCamp, 2011, Tim Cosgrove
- 4. Modern Theming Tim Cosgrove ‣ Engineer and Tech PM ‣ Treehouse Agency BADCamp, 2011, Tim Cosgrove
- 5. Modern Theming Tim Cosgrove ‣ Engineer and Tech PM ‣ Treehouse Agency ‣ Drupal.org member since February 2007 BADCamp, 2011, Tim Cosgrove
- 6. Modern Theming Tim Cosgrove ‣ Engineer and Tech PM ‣ Treehouse Agency ‣ Drupal.org member since February 2007 ‣ Web Developer since 1998 BADCamp, 2011, Tim Cosgrove
- 7. Modern Theming Tim Cosgrove ‣ Engineer and Tech PM ‣ Treehouse Agency ‣ Drupal.org member since February 2007 ‣ Web Developer since 1998 ‣ @timcosgrove BADCamp, 2011, Tim Cosgrove
- 8. Modern Theming Modern Theming BADCamp, 2011, Tim Cosgrove
- 9. Modern Theming Themers are Developers BADCamp, 2011, Tim Cosgrove
- 10. Modern Theming Themers are Developers BADCamp, 2011, Tim Cosgrove
- 11. Modern Theming Themers are Developers BADCamp, 2011, Tim Cosgrove
- 12. Modern Theming Themers are Developers ‣ Much of what is display-related ends up in modules, not themes. BADCamp, 2011, Tim Cosgrove
- 13. Modern Theming Themers are Developers ‣ Much of what is display-related ends up in modules, not themes. ‣ In Drupal, there is a grey area between what is theming and what is not theming. BADCamp, 2011, Tim Cosgrove
- 14. Modern Theming Themers are Developers ‣ Much of what is display-related ends up in modules, not themes. ‣ In Drupal, there is a grey area between what is theming and what is not theming. ‣ You write PHP. You are a nerd. Embrace it! BADCamp, 2011, Tim Cosgrove
- 15. Modern Theming “Modern Theming”? BADCamp, 2011, Tim Cosgrove
- 16. Modern Theming “Modern Theming”? ‣ Use as much of Core as possible BADCamp, 2011, Tim Cosgrove
- 17. Modern Theming “Modern Theming”? ‣ Use as much of Core as possible ‣ Use module code, write module code BADCamp, 2011, Tim Cosgrove
- 18. Modern Theming “Modern Theming”? ‣ Use as much of Core as possible ‣ Use module code, write module code ‣ Or, learn what can be done so you can tell your developers what you need BADCamp, 2011, Tim Cosgrove
- 19. Modern Theming “Modern Theming”? ‣ Use as much of Core as possible ‣ Use module code, write module code ‣ Or, learn what can be done so you can tell your developers what you need ‣ Use newer technologies where appropriate BADCamp, 2011, Tim Cosgrove
- 20. Modern Theming “Modern Theming”? ‣ Use as much of Core as possible ‣ Use module code, write module code ‣ Or, learn what can be done so you can tell your developers what you need ‣ Use newer technologies where appropriate ‣ Avoid the pile-up of .tpls BADCamp, 2011, Tim Cosgrove
- 21. Modern Theming BADCamp, 2011, Tim Cosgrove
- 22. Modern Theming BADCamp, 2011, Tim Cosgrove
- 23. Modern Theming BADCamp, 2011, Tim Cosgrove
- 24. Modern Theming BADCamp, 2011, Tim Cosgrove
- 25. Modern Theming BADCamp, 2011, Tim Cosgrove
- 26. Modern Theming BADCamp, 2011, Tim Cosgrove
- 27. Modern Theming BADCamp, 2011, Tim Cosgrove
- 28. Modern Theming BADCamp, 2011, Tim Cosgrove
- 29. Modern Theming BADCamp, 2011, Tim Cosgrove
- 30. Modern Theming BADCamp, 2011, Tim Cosgrove
- 31. Modern Theming BADCamp, 2011, Tim Cosgrove
- 32. Modern Theming BADCamp, 2011, Tim Cosgrove
- 33. Modern Theming BADCamp, 2011, Tim Cosgrove
- 34. Modern Theming BADCamp, 2011, Tim Cosgrove
- 35. Modern Theming BADCamp, 2011, Tim Cosgrove
- 36. Modern Theming BADCamp, 2011, Tim Cosgrove
- 37. Modern Theming DO NOT DO BADCamp, 2011, Tim Cosgrove
- 38. Modern Theming In general, try to forget Drupal 5 and 6. BADCamp, 2011, Tim Cosgrove
- 39. Modern Theming In general, try to forget Drupal 5 and 6. ‣ Forget dozens of templates. BADCamp, 2011, Tim Cosgrove
- 40. Modern Theming In general, try to forget Drupal 5 and 6. ‣ Forget dozens of templates. ‣ Forget dozens of preprocess functions. BADCamp, 2011, Tim Cosgrove
- 41. Modern Theming In general, try to forget Drupal 5 and 6. ‣ Forget dozens of templates. ‣ Forget dozens of preprocess functions. ‣ Forget base themes. BADCamp, 2011, Tim Cosgrove
- 42. Modern Theming In general, try to forget Drupal 5 and 6. ‣ Forget dozens of templates. ‣ Forget dozens of preprocess functions. ‣ Forget base themes. ‣ (...though, you can still use all that, and it might be appropriate.) BADCamp, 2011, Tim Cosgrove
- 43. Modern Theming Theming Modernly: GRIDS BADCamp, 2011, Tim Cosgrove
- 44. Modern Theming Theming Modernly: GRIDS ‣ You should insist on a grid design. BADCamp, 2011, Tim Cosgrove
- 45. Modern Theming Theming Modernly: GRIDS ‣ You should insist on a grid design. ‣ The coherent visual layout makes finding information easier. BADCamp, 2011, Tim Cosgrove
- 46. Modern Theming Theming Modernly: GRIDS ‣ You should insist on a grid design. ‣ The coherent visual layout makes finding information easier. ‣ It allows for design and editorial elements to move around. BADCamp, 2011, Tim Cosgrove
- 47. Modern Theming Theming Modernly: GRIDS ‣ You should insist on a grid design. ‣ The coherent visual layout makes finding information easier. ‣ It allows for design and editorial elements to move around. ‣ It saves you time which saves them money. BADCamp, 2011, Tim Cosgrove
- 52. screenshot of listing block example, with highlights like previous slide
- 53. screenshot of listing block example, with highlights like previous slide
- 54. Modern Theming Why Grids are Helpful BADCamp, 2011, Tim Cosgrove
- 55. Modern Theming Why Grids are Helpful ‣ Items of the same number of units are interchangeable BADCamp, 2011, Tim Cosgrove
- 56. Modern Theming Why Grids are Helpful ‣ Items of the same number of units are interchangeable ‣ With the right image style settings and CSS, you can drop things in and they will just work BADCamp, 2011, Tim Cosgrove
- 59. `
- 60. Modern Theming Repeating elements BADCamp, 2011, Tim Cosgrove
- 61. Modern Theming Repeating elements ‣ Look for items that are similar and can be reused BADCamp, 2011, Tim Cosgrove
- 62. Modern Theming Repeating elements ‣ Look for items that are similar and can be reused ‣ Look for inconsistencies; see if they can be unified BADCamp, 2011, Tim Cosgrove
- 63. Modern Theming Repeating elements ‣ Look for items that are similar and can be reused ‣ Look for inconsistencies; see if they can be unified ‣ Again, saves time and money BADCamp, 2011, Tim Cosgrove
- 64. Modern Theming Different Content, Same Display BADCamp, 2011, Tim Cosgrove
- 65. Modern Theming BADCamp, 2011, Tim Cosgrove
- 66. Modern Theming BADCamp, 2011, Tim Cosgrove
- 67. Modern Theming BADCamp, 2011, Tim Cosgrove
- 68. Modern Theming BADCamp, 2011, Tim Cosgrove
- 69. Modern Theming BADCamp, 2011, Tim Cosgrove
- 70. Modern Theming BADCamp, 2011, Tim Cosgrove
- 71. Modern Theming BADCamp, 2011, Tim Cosgrove
- 72. Modern Theming BADCamp, 2011, Tim Cosgrove
- 73. Modern Theming BADCamp, 2011, Tim Cosgrove
- 74. Modern Theming BADCamp, 2011, Tim Cosgrove
- 75. Modern Theming Same Content, Different Displays BADCamp, 2011, Tim Cosgrove
- 76. Modern Theming BADCamp, 2011, Tim Cosgrove
- 77. Modern Theming BADCamp, 2011, Tim Cosgrove
- 78. Modern Theming BADCamp, 2011, Tim Cosgrove
- 79. Modern Theming BADCamp, 2011, Tim Cosgrove
- 80. Modern Theming BADCamp, 2011, Tim Cosgrove
- 81. Core
- 82. Modern Theming Drupal 7 only - why? BADCamp, 2011, Tim Cosgrove
- 83. Modern Theming Drupal 7 only - why? ‣ Released January 5, 2011 - coming up on a year BADCamp, 2011, Tim Cosgrove
- 84. Modern Theming Drupal 7 only - why? ‣ Released January 5, 2011 - coming up on a year ‣ Drupal 6 will stopped being supported in about 2-3 years BADCamp, 2011, Tim Cosgrove
- 85. Modern Theming Drupal 7 only - why? ‣ Released January 5, 2011 - coming up on a year ‣ Drupal 6 will stopped being supported in about 2-3 years ‣ No security updates BADCamp, 2011, Tim Cosgrove
- 86. Modern Theming Drupal 7 only - why? ‣ Released January 5, 2011 - coming up on a year ‣ Drupal 6 will stopped being supported in about 2-3 years ‣ No security updates ‣ Most widely-used contrib modules have at least an alpha out now BADCamp, 2011, Tim Cosgrove
- 87. Modern Theming also... BADCamp, 2011, Tim Cosgrove
- 88. Modern Theming Drupal 7 is actually good! BADCamp, 2011, Tim Cosgrove
- 89. Modern Theming Drupal 7 is actually good! ‣ Theming improvements: BADCamp, 2011, Tim Cosgrove
- 90. Modern Theming Drupal 7 is actually good! ‣ Theming improvements: ‣ Fields in core BADCamp, 2011, Tim Cosgrove
- 91. Modern Theming Drupal 7 is actually good! ‣ Theming improvements: ‣ Fields in core ‣ preprocess() and process() BADCamp, 2011, Tim Cosgrove
- 92. Modern Theming Drupal 7 is actually good! ‣ Theming improvements: ‣ Fields in core ‣ preprocess() and process() ‣ Render array BADCamp, 2011, Tim Cosgrove
- 93. Modern Theming Drupal 7 is actually good! ‣ Theming improvements: ‣ Fields in core ‣ preprocess() and process() ‣ Render array ‣ Theme hook suggestions BADCamp, 2011, Tim Cosgrove
- 94. Modern Theming Drupal 7 is actually good! ‣ Theming improvements: ‣ Fields in core ‣ preprocess() and process() ‣ Render array ‣ Theme hook suggestions ‣ Core theming is usable! BADCamp, 2011, Tim Cosgrove
- 95. Modern Theming Drupal 7 is actually good! ‣ Theming improvements: ‣ Fields in core ‣ preprocess() and process() ‣ Render array ‣ Theme hook suggestions ‣ Core theming is usable! ‣ No, really! BADCamp, 2011, Tim Cosgrove
- 96. Modern Theming Base theme? Nope. BADCamp, 2011, Tim Cosgrove
- 97. Modern Theming Base theme? Nope. ‣ We use core theming as our starting point. BADCamp, 2011, Tim Cosgrove
- 98. Modern Theming Base theme? Nope. ‣ We use core theming as our starting point. ‣ .info, reset.css, and a grid system. BADCamp, 2011, Tim Cosgrove
- 99. Modern Theming Base theme? Nope. ‣ We use core theming as our starting point. ‣ .info, reset.css, and a grid system. ‣ Core templates produce usable markup. BADCamp, 2011, Tim Cosgrove
- 100. Modern Theming Base theme? Nope. ‣ We use core theming as our starting point. ‣ .info, reset.css, and a grid system. ‣ Core templates produce usable markup. ‣ Base themes make assumptions about how you want to theme. BADCamp, 2011, Tim Cosgrove
- 101. Modern Theming Base theme? Nope. ‣ We use core theming as our starting point. ‣ .info, reset.css, and a grid system. ‣ Core templates produce usable markup. ‣ Base themes make assumptions about how you want to theme. ‣ ...which is maybe OK. BADCamp, 2011, Tim Cosgrove
- 102. Modern Theming View Modes BADCamp, 2011, Tim Cosgrove
- 103. Modern Theming What are View Modes? BADCamp, 2011, Tim Cosgrove
- 104. Modern Theming What are View Modes? ‣ View Modes are awesome. BADCamp, 2011, Tim Cosgrove
- 105. Modern Theming What are View Modes? ‣ View Modes are awesome. ‣ Named ways of displaying the same entity differently (node, user, custom) BADCamp, 2011, Tim Cosgrove
- 106. Modern Theming What are View Modes? ‣ View Modes are awesome. ‣ Named ways of displaying the same entity differently (node, user, custom) ‣ Allows you to define display settings for anything fieldable BADCamp, 2011, Tim Cosgrove
- 107. Modern Theming What are View Modes? ‣ View Modes are awesome. ‣ Named ways of displaying the same entity differently (node, user, custom) ‣ Allows you to define display settings for anything fieldable ‣ You’re already using them BADCamp, 2011, Tim Cosgrove
- 110. View Modes
- 111. Modern Theming Built-in View Modes BADCamp, 2011, Tim Cosgrove
- 112. Modern Theming Built-in View Modes ‣ Teaser and Default, active by default BADCamp, 2011, Tim Cosgrove
- 113. Modern Theming Built-in View Modes ‣ Teaser and Default, active by default ‣ Core also includes view modes for BADCamp, 2011, Tim Cosgrove
- 114. Modern Theming Built-in View Modes ‣ Teaser and Default, active by default ‣ Core also includes view modes for ‣ “full” BADCamp, 2011, Tim Cosgrove
- 115. Modern Theming Built-in View Modes ‣ Teaser and Default, active by default ‣ Core also includes view modes for ‣ “full” ‣ RSS BADCamp, 2011, Tim Cosgrove
- 116. Modern Theming Built-in View Modes ‣ Teaser and Default, active by default ‣ Core also includes view modes for ‣ “full” ‣ RSS ‣ search index BADCamp, 2011, Tim Cosgrove
- 117. Modern Theming Built-in View Modes ‣ Teaser and Default, active by default ‣ Core also includes view modes for ‣ “full” ‣ RSS ‣ search index ‣ search results BADCamp, 2011, Tim Cosgrove
- 120. Modern Theming But why stop there? BADCamp, 2011, Tim Cosgrove
- 121. Modern Theming But why stop there? All of these are potential view modes BADCamp, 2011, Tim Cosgrove
- 122. Modern Theming But why stop there? All of these are potential view modes BADCamp, 2011, Tim Cosgrove
- 123. Modern Theming But why stop there? All of these are potential view modes BADCamp, 2011, Tim Cosgrove
- 124. Modern Theming But why stop there? All of these are potential view modes BADCamp, 2011, Tim Cosgrove
- 125. Modern Theming But why stop there? All of these are potential view modes BADCamp, 2011, Tim Cosgrove
- 126. Modern Theming But why stop there? All of these are potential view modes BADCamp, 2011, Tim Cosgrove
- 127. Modern Theming But why stop there? All of these are potential view modes BADCamp, 2011, Tim Cosgrove
- 128. Modern Theming But why stop there? All of these are potential view modes BADCamp, 2011, Tim Cosgrove
- 129. Modern Theming Why is this useful? BADCamp, 2011, Tim Cosgrove
- 130. Modern Theming Why is this useful? ‣ Different node types (or entities) can share view mode names. BADCamp, 2011, Tim Cosgrove
- 131. Modern Theming Why is this useful? ‣ Different node types (or entities) can share view mode names. Contributor BADCamp, 2011, Tim Cosgrove
- 132. Modern Theming Why is this useful? ‣ Different node types (or entities) can share view mode names. Contributor Article BADCamp, 2011, Tim Cosgrove
- 133. Modern Theming Why is this useful? ‣ Different node types (or entities) can share view mode names. Contributor Article Video BADCamp, 2011, Tim Cosgrove
- 134. Modern Theming Why is this useful? ‣ Different node types (or entities) can share view mode names. Contributor Article Video ‣ Different field sources, same (or similar) display BADCamp, 2011, Tim Cosgrove
- 135. Modern Theming Different contexts BADCamp, 2011, Tim Cosgrove
- 136. Modern Theming Different contexts ‣ View Modes can be used to render entities in: BADCamp, 2011, Tim Cosgrove
- 137. Modern Theming Different contexts ‣ View Modes can be used to render entities in: ‣ Views BADCamp, 2011, Tim Cosgrove
- 138. Modern Theming Different contexts ‣ View Modes can be used to render entities in: ‣ Views ‣ Reference fields BADCamp, 2011, Tim Cosgrove
- 139. Modern Theming Different contexts ‣ View Modes can be used to render entities in: ‣ Views ‣ Reference fields ‣ Beans / block entities BADCamp, 2011, Tim Cosgrove
- 140. Modern Theming Different contexts ‣ View Modes can be used to render entities in: ‣ Views ‣ Reference fields ‣ Beans / block entities ‣ Any custom callback or block BADCamp, 2011, Tim Cosgrove
- 141. Modern Theming BADCamp, 2011, Tim Cosgrove
- 142. Modern Theming View Modes in Code /** * Implements hook_entity_info_alter(). */ function energy_content_entity_info_alter(&$info) { $info['node']['view modes'] += array( 'block_teaser' => array( 'label' => t('Block teaser'), 'custom settings' => TRUE, ), ); } BADCamp, 2011, Tim Cosgrove
- 143. Modern Theming View Modes in Code /** * Implements hook_entity_info_alter(). */ function energy_content_entity_info_alter(&$info) { $info['node']['view modes'] += array( 'block_teaser' => array( 'label' => t('Block teaser'), 'custom settings' => TRUE, ), ); } BADCamp, 2011, Tim Cosgrove
- 144. Modern Theming View Modes in Code /** * Implements hook_entity_info_alter(). */ function energy_content_entity_info_alter(&$info) { $info['node']['view modes'] += array( 'block_teaser' => array( 'label' => t('Block teaser'), 'custom settings' => TRUE, ), ); } BADCamp, 2011, Tim Cosgrove
- 145. Modern Theming View Modes in Code /** * Implements hook_entity_info_alter(). */ function energy_content_entity_info_alter(&$info) { $info['node']['view modes'] += array( 'block_teaser' => array( 'label' => t('Block teaser'), 'custom settings' => TRUE, ), ); } BADCamp, 2011, Tim Cosgrove
- 146. Modern Theming View Modes in Code /** * Implements hook_entity_info_alter(). */ function energy_content_entity_info_alter(&$info) { $info['node']['view modes'] += array( 'block_teaser' => array( 'label' => t('Block teaser'), 'custom settings' => TRUE, ), ); } BADCamp, 2011, Tim Cosgrove
- 147. Modern Theming View Modes in Code /** * Implements hook_entity_info_alter(). */ function energy_content_entity_info_alter(&$info) { $info['node']['view modes'] += array( 'block_teaser' => array( 'label' => t('Block teaser'), 'custom settings' => TRUE, ), ); } BADCamp, 2011, Tim Cosgrove
- 148. Modern Theming View Modes in Code /** * Implements hook_entity_info_alter(). */ function energy_content_entity_info_alter(&$info) { $info['node']['view modes'] += array( 'block_teaser' => array( 'label' => t('Block teaser'), 'custom settings' => TRUE, ), ); } BADCamp, 2011, Tim Cosgrove
- 149. Modern Theming ...or you can use Display Suite. But we’ll come back to that. BADCamp, 2011, Tim Cosgrove
- 150. O HAI
- 151. O HAI
- 152. Modern Theming View Modes entity settings in code BADCamp, 2011, Tim Cosgrove
- 153. Modern Theming View Modes entity settings in code ‣ If you export node or other entity settings with Features, all view mode settings information will come with the code BADCamp, 2011, Tim Cosgrove
- 154. Modern Theming View Modes entity settings in code ‣ If you export node or other entity settings with Features, all view mode settings information will come with the code ‣ Also getable by field_read_instance() and settable via field_update_instance() BADCamp, 2011, Tim Cosgrove
- 155. Modern Theming Field Formatters BADCamp, 2011, Tim Cosgrove
- 156. Modern Theming Field Formatters ‣ Field API lets you add fields to entities, to construct complex content types BADCamp, 2011, Tim Cosgrove
- 157. Modern Theming Field Formatters ‣ Field API lets you add fields to entities, to construct complex content types ‣ Also lets you construct entirely new, custom fields BADCamp, 2011, Tim Cosgrove
- 158. Modern Theming Field Formatters ‣ Field API lets you add fields to entities, to construct complex content types ‣ Also lets you construct entirely new, custom fields ‣ Or, make custom additions to existing fields. BADCamp, 2011, Tim Cosgrove
- 159. Modern Theming Example: External Links BADCamp, 2011, Tim Cosgrove
- 160. Modern Theming Example: External Links ‣ On Energy.gov, used ext_link_page.module BADCamp, 2011, Tim Cosgrove
- 161. Modern Theming Example: External Links ‣ On Energy.gov, used ext_link_page.module ‣ Module provides a url_outbound alter and an input filter BADCamp, 2011, Tim Cosgrove
- 162. Modern Theming Example: External Links ‣ On Energy.gov, used ext_link_page.module ‣ Module provides a url_outbound alter and an input filter ‣ Problem: we needed to alter links in fields where no input filter was enabled BADCamp, 2011, Tim Cosgrove
- 163. Modern Theming Solution: custom formatter BADCamp, 2011, Tim Cosgrove
- 164. Modern Theming Solution: custom formatter ‣ Establish a new formatter type BADCamp, 2011, Tim Cosgrove
- 165. Modern Theming Solution: custom formatter ‣ Establish a new formatter type ‣ Apply it to existing field types: text, long text, and long text with summary BADCamp, 2011, Tim Cosgrove
- 166. Modern Theming hook_field_formatter_info() /** * Implements hook_field_formatter_info(). */ function energy_content_field_formatter_info() { return array( 'energy_content_text_links' => array( 'label' => t('Plain text with links'), 'field types' => array('text', 'text_long', 'text_with_summary'), ), ); } BADCamp, 2011, Tim Cosgrove
- 167. Modern Theming hook_field_formatter_info() /** * Implements hook_field_formatter_info(). */ function energy_content_field_formatter_info() { return array( 'energy_content_text_links' => array( 'label' => t('Plain text with links'), 'field types' => array('text', 'text_long', 'text_with_summary'), ), ); } BADCamp, 2011, Tim Cosgrove
- 168. Modern Theming hook_field_formatter_info() /** * Implements hook_field_formatter_info(). */ function energy_content_field_formatter_info() { return array( 'energy_content_text_links' => array( 'label' => t('Plain text with links'), 'field types' => array('text', 'text_long', 'text_with_summary'), ), ); } BADCamp, 2011, Tim Cosgrove
- 169. Modern Theming hook_field_formatter_info() /** * Implements hook_field_formatter_info(). */ function energy_content_field_formatter_info() { return array( 'energy_content_text_links' => array( 'label' => t('Plain text with links'), 'field types' => array('text', 'text_long', 'text_with_summary'), ), ); } BADCamp, 2011, Tim Cosgrove
- 170. Modern Theming hook_field_formatter_info() /** * Implements hook_field_formatter_info(). */ function energy_content_field_formatter_info() { return array( 'energy_content_text_links' => array( 'label' => t('Plain text with links'), 'field types' => array('text', 'text_long', 'text_with_summary'), ), ); } BADCamp, 2011, Tim Cosgrove
- 171. Modern Theming hook_field_formatter_view() /** * Implements hook_field_formatter_view(). */ function energy_content_field_formatter_view($entity_type, $entity, $field, $instance, $langcode, $items, $display) { $element = array(); if ($display['type'] === 'energy_content_text_links') { // continued... BADCamp, 2011, Tim Cosgrove
- 172. Modern Theming hook_field_formatter_view() /** * Implements hook_field_formatter_view(). */ function energy_content_field_formatter_view($entity_type, $entity, $field, $instance, $langcode, $items, $display) { $element = array(); if ($display['type'] === 'energy_content_text_links') { // continued... BADCamp, 2011, Tim Cosgrove
- 173. Modern Theming hook_field_formatter_view() /** * Implements hook_field_formatter_view(). */ function energy_content_field_formatter_view($entity_type, $entity, $field, $instance, $langcode, $items, $display) { $element = array(); if ($display['type'] === 'energy_content_text_links') { // continued... BADCamp, 2011, Tim Cosgrove
- 174. Modern Theming hook_field_formatter_view() /** * Implements hook_field_formatter_view(). */ function energy_content_field_formatter_view($entity_type, $entity, $field, $instance, $langcode, $items, $display) { $element = array(); if ($display['type'] === 'energy_content_text_links') { // continued... BADCamp, 2011, Tim Cosgrove
- 175. Modern Theming hook_field_formatter_view() /** * Implements hook_field_formatter_view(). */ function energy_content_field_formatter_view($entity_type, $entity, $field, $instance, $langcode, $items, $display) { $element = array(); if ($display['type'] === 'energy_content_text_links') { // continued... BADCamp, 2011, Tim Cosgrove
- 176. Modern Theming hook_field_formatter_view() // ... continued foreach ($items as $delta => $item) { $output = filter_xss($item['value'], array('a')); if (function_exists('_ext_link_page_filter_process')) { $output = _ext_link_page_filter_process($output, NULL); } $element[$delta] = array('#markup' => $output); } } return $element; } BADCamp, 2011, Tim Cosgrove
- 177. Modern Theming hook_field_formatter_view() // ... continued foreach ($items as $delta => $item) { $output = filter_xss($item['value'], array('a')); if (function_exists('_ext_link_page_filter_process')) { $output = _ext_link_page_filter_process($output, NULL); } $element[$delta] = array('#markup' => $output); } } return $element; } BADCamp, 2011, Tim Cosgrove
- 178. Modern Theming hook_field_formatter_view() // ... continued foreach ($items as $delta => $item) { $output = filter_xss($item['value'], array('a')); if (function_exists('_ext_link_page_filter_process')) { $output = _ext_link_page_filter_process($output, NULL); } $element[$delta] = array('#markup' => $output); } } return $element; } BADCamp, 2011, Tim Cosgrove
- 179. Modern Theming Meanwhile, in Manage Display... BADCamp, 2011, Tim Cosgrove
- 180. Modern Theming Meanwhile, in Manage Display... BADCamp, 2011, Tim Cosgrove
- 181. Modern Theming Field Formatters BADCamp, 2011, Tim Cosgrove
- 182. Modern Theming Field Formatters ‣ Advantages BADCamp, 2011, Tim Cosgrove
- 183. Modern Theming Field Formatters ‣ Advantages ‣ Highly reusable and extensible BADCamp, 2011, Tim Cosgrove
- 184. Modern Theming Field Formatters ‣ Advantages ‣ Highly reusable and extensible ‣ Distributable as module code BADCamp, 2011, Tim Cosgrove
- 185. Modern Theming Field Formatters ‣ Advantages ‣ Highly reusable and extensible ‣ Distributable as module code ‣ Good in cases where the output is not highly stylized BADCamp, 2011, Tim Cosgrove
- 186. Modern Theming Field Formatters BADCamp, 2011, Tim Cosgrove
- 187. Modern Theming Field Formatters ‣ Disadvantages BADCamp, 2011, Tim Cosgrove
- 188. Modern Theming Field Formatters ‣ Disadvantages ‣ If you need style, you need style. You still have to theme. BADCamp, 2011, Tim Cosgrove
- 189. Modern Theming Field Formatters ‣ Disadvantages ‣ If you need style, you need style. You still have to theme. ‣ Code level required may be daunting. BADCamp, 2011, Tim Cosgrove
- 190. Contrib
- 191. Modern Theming SASS BADCamp, 2011, Tim Cosgrove
- 192. Modern Theming SASS ‣ Syntactically Awesome Style Sheets BADCamp, 2011, Tim Cosgrove
- 193. Modern Theming SASS ‣ Syntactically Awesome Style Sheets ‣ A Ruby project, but there is a PHP port of it and a Drupal module BADCamp, 2011, Tim Cosgrove
- 194. Modern Theming SASS ‣ Syntactically Awesome Style Sheets ‣ A Ruby project, but there is a PHP port of it and a Drupal module ‣ Greatly enhanced syntax for writing stylesheets BADCamp, 2011, Tim Cosgrove
- 195. Modern Theming SASS ‣ Syntactically Awesome Style Sheets ‣ A Ruby project, but there is a PHP port of it and a Drupal module ‣ Greatly enhanced syntax for writing stylesheets ‣ Allows variables and ‘mixins’ BADCamp, 2011, Tim Cosgrove
- 196. Modern Theming SASS ‣ Syntactically Awesome Style Sheets ‣ A Ruby project, but there is a PHP port of it and a Drupal module ‣ Greatly enhanced syntax for writing stylesheets ‣ Allows variables and ‘mixins’ ‣ Allows nesting BADCamp, 2011, Tim Cosgrove
- 197. Modern Theming Why use SASS? BADCamp, 2011, Tim Cosgrove
- 198. Modern Theming Why use SASS? ‣ It is incredibly faster than writing CSS. BADCamp, 2011, Tim Cosgrove
- 199. Modern Theming Why use SASS? ‣ It is incredibly faster than writing CSS. ‣ Your loved ones miss you, and you are wasting your life writing CSS. BADCamp, 2011, Tim Cosgrove
- 200. Modern Theming Why use SASS? ‣ It is incredibly faster than writing CSS. ‣ Your loved ones miss you, and you are wasting your life writing CSS. BADCamp, 2011, Tim Cosgrove
- 201. Modern Theming Why use SASS? ‣ It is incredibly faster than writing CSS. ‣ Your loved ones miss you, and you are wasting your life writing CSS. BADCamp, 2011, Tim Cosgrove
- 202. Modern Theming Why use SASS? ‣ It is incredibly faster than writing CSS. ‣ Your loved ones miss you, and you are wasting your life writing CSS. BADCamp, 2011, Tim Cosgrove
- 203. Modern Theming SASS Syntax: Nesting SASS CSS .my-selector { .my-selector { padding-top: 10px; padding-top: 10px; } ul { .my-selector ul { overflow: hidden; overflow: hidden; } li { .my-selector ul li { float: left; float: left; margin-right: 10px; margin-right: 10px; } } .my-selector ul li.last { li.last { margin-right: 0; } margin-right: 0; } } } BADCamp, 2011, Tim Cosgrove
- 204. Modern Theming SASS Syntax: Nesting SASS CSS .my-selector, .my-selector-2 { .my-selector, .my-selector-2 { padding-top: 10px; padding-top: 10px; } ul, ol { .my-selector ol, .my-selector ul, overflow: hidden; .my-selector-2 ol, li { .my-selector-2 ul { overflow: hidden; } float: left; .my-selector ol li, .my-selector ul li, margin-right: 10px; .my-selector-2 ol li, } .my-selector-2 ul li { float: left; li.last { margin-right: 10px; } margin-right: 0; .my-selector ol li.last, .my-selector ul li.last, } .my-selector-2 ol li.last, } .my-selector-2 ul li.last { margin-right: 0; } } BADCamp, 2011, Tim Cosgrove
- 205. SASS Syntax: Nesting SASS CSS .ie8, .ie7, .ie6 { .ie6 .primary-nav, .primary-nav { .ie7 .primary-nav, float: left; .ie8 .primary-nav { ul.menu li { float: left; } background-image: url(nav_bg.png); background-position: 50%; .ie6 .primary-nav ul.menu li, :hover { .ie7 .primary-nav ul.menu li, background-image: url(nav_bg_active.png); .ie8 .primary-nav ul.menu li { } background-image: url(nav_bg.png); li { background-position: 50%; background-image: none; :hover { hover-background-image: url(nav_bg_active.png); } background-image: none; } .ie6 .primary-nav ul.menu li li, } .ie7 .primary-nav ul.menu li li, } .ie8 .primary-nav ul.menu li li { } background-image: none; } hover-background-image: none; } BADCamp, 2011, Tim Cosgrove
- 206. Modern Theming SASS Syntax: Variables SASS CSS $standard-border: 1px solid #ededed; h2 { $standard-link-color: #138BBA; border: 1px solid #ededed; $header-font-family: 'Avenir LT W02 85 font-family: 'Avenir LT W02 85 Heavy', Heavy', verdana, sans-serif; verdana, sans-serif; } h2 a { h2 { color: #138bba; } border: $standard-border; font-family: $header-font-family; a{ color: $standard-link-color; } } BADCamp, 2011, Tim Cosgrove
- 207. Modern Theming SASS Syntax: Mixins BADCamp, 2011, Tim Cosgrove
- 208. Modern Theming SASS Syntax: Mixins SASS /* border-radius */ @mixin border-radius($values) { -webkit-border-radius: $values; -moz-border-radius: $values; border-radius: $values; } BADCamp, 2011, Tim Cosgrove
- 209. Modern Theming SASS Syntax: Mixins SASS /* border-radius */ @mixin border-radius($values) { -webkit-border-radius: $values; -moz-border-radius: $values; border-radius: $values; } @mixin basic-gradient($color1, $color2) { background-color: $color2; filter: progid:DXImageTransform.Microsoft.gradient (startColorstr=$color1, endColorstr= $color2); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from($color1), to($color2)); / * for webkit browsers */ background: -moz-linear-gradient(top, $color1, $color2); /* for firefox 3.6+ */ } BADCamp, 2011, Tim Cosgrove
- 210. Modern Theming SASS Syntax: Mixins SASS @mixin standard-button { /* border-radius */ @mixin border-radius($values) { @include basic-gradient(#33a8d6, #0092cc); -webkit-border-radius: $values; @include border-radius(200px); -moz-border-radius: $values; } border-radius: $values; } .my-button { @include standard-button; @mixin basic-gradient($color1, $color2) { } background-color: $color2; filter: progid:DXImageTransform.Microsoft.gradient (startColorstr=$color1, endColorstr= $color2); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from($color1), to($color2)); / * for webkit browsers */ background: -moz-linear-gradient(top, $color1, $color2); /* for firefox 3.6+ */ } BADCamp, 2011, Tim Cosgrove
- 211. Modern Theming SASS Syntax: Mixins CSS /* border-radius */ .my-button { background-color: #0092cc; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= #33a8d6, endColorstr= #0092cc); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#33a8d6), to(#0092cc)); /* for webkit browsers */ background: -moz-linear-gradient(top, #33a8d6, #0092cc); /* for firefox 3.6+ */ -webkit-border-radius: 200px; -moz-border-radius: 200px; border-radius: 200px; } BADCamp, 2011, Tim Cosgrove
- 212. Modern Theming More about SASS BADCamp, 2011, Tim Cosgrove
- 213. Modern Theming More about SASS ‣ Fully CSS compatible (with SASS 3.0 syntax) BADCamp, 2011, Tim Cosgrove
- 214. Modern Theming More about SASS ‣ Fully CSS compatible (with SASS 3.0 syntax) ‣ You can drop in existing style, or make an existing stylesheet SASSy BADCamp, 2011, Tim Cosgrove
- 215. Modern Theming More about SASS ‣ Fully CSS compatible (with SASS 3.0 syntax) ‣ You can drop in existing style, or make an existing stylesheet SASSy ‣ Drupal module aggregates the resulting CSS BADCamp, 2011, Tim Cosgrove
- 216. Modern Theming More about SASS ‣ Fully CSS compatible (with SASS 3.0 syntax) ‣ You can drop in existing style, or make an existing stylesheet SASSy ‣ Drupal module aggregates the resulting CSS ‣ It’s super-fun BADCamp, 2011, Tim Cosgrove
- 217. Modern Theming Fieldgroups (field_group) BADCamp, 2011, Tim Cosgrove
- 218. Modern Theming Fieldgroups (field_group) ‣ Used to be part of CCK; now a separate contrib module BADCamp, 2011, Tim Cosgrove
- 219. Modern Theming Fieldgroups (field_group) ‣ Used to be part of CCK; now a separate contrib module ‣ Used to create fieldsets, divs, or other containers around groups of field output BADCamp, 2011, Tim Cosgrove
- 220. Modern Theming Fieldgroups (field_group) ‣ Used to be part of CCK; now a separate contrib module ‣ Used to create fieldsets, divs, or other containers around groups of field output ‣ Extensible BADCamp, 2011, Tim Cosgrove
- 221. Modern Theming Fieldgroups (field_group) ‣ Used to be part of CCK; now a separate contrib module ‣ Used to create fieldsets, divs, or other containers around groups of field output ‣ Extensible ‣ Can be used to create grid layouts BADCamp, 2011, Tim Cosgrove
- 222. Modern Theming Example: simple column BADCamp, 2011, Tim Cosgrove
- 223. Modern Theming Example: simple column BADCamp, 2011, Tim Cosgrove
- 224. Modern Theming Example: simple column BADCamp, 2011, Tim Cosgrove
- 225. Modern Theming Solution: div with grid classes BADCamp, 2011, Tim Cosgrove
- 226. Modern Theming Solution: div with grid classes BADCamp, 2011, Tim Cosgrove
- 227. Modern Theming Solution: div with grid classes BADCamp, 2011, Tim Cosgrove
- 228. Modern Theming Custom Fieldgroups Fieldgroups are CTools Exportables, so they are (somewhat) easy to write. BADCamp, 2011, Tim Cosgrove
- 229. Modern Theming Custom Fieldgroups Fieldgroups are CTools Exportables, so they are (somewhat) easy to write. BADCamp, 2011, Tim Cosgrove
- 230. Modern Theming Custom Fieldgroups Fieldgroups are CTools Exportables, so they are (somewhat) easy to write. BADCamp, 2011, Tim Cosgrove
- 233. Modern Theming Fieldgroups on admin forms BADCamp, 2011, Tim Cosgrove
- 234. Modern Theming Fieldgroups on admin forms BADCamp, 2011, Tim Cosgrove
- 235. Modern Theming Fieldgroups on admin forms BADCamp, 2011, Tim Cosgrove
- 236. Modern Theming BEANs BADCamp, 2011, Tim Cosgrove
- 237. Modern Theming BEANs ‣ BEANs - Bean Entities Aren’t Nodes BADCamp, 2011, Tim Cosgrove
- 238. Modern Theming BEANs ‣ BEANs - Bean Entities Aren’t Nodes ‣ Fieldable entities that are exposed to Drupal’s block system BADCamp, 2011, Tim Cosgrove
- 239. Modern Theming BEANs ‣ BEANs - Bean Entities Aren’t Nodes ‣ Fieldable entities that are exposed to Drupal’s block system ‣ Can make any number of BEAN types which can be re-used BADCamp, 2011, Tim Cosgrove
- 240. Modern Theming BEANs ‣ BEANs - Bean Entities Aren’t Nodes ‣ Fieldable entities that are exposed to Drupal’s block system ‣ Can make any number of BEAN types which can be re-used ‣ View modes apply to BEANs, like any entity BADCamp, 2011, Tim Cosgrove
- 241. Modern Theming BEANs: Advantages BADCamp, 2011, Tim Cosgrove
- 242. Modern Theming BEANs: Advantages ‣ Fieldable; build a block out of existing fields BADCamp, 2011, Tim Cosgrove
- 243. Modern Theming BEANs: Advantages ‣ Fieldable; build a block out of existing fields ‣ Permissions per BEAN type and per field, like nodes BADCamp, 2011, Tim Cosgrove
- 244. Modern Theming BEANs: Advantages ‣ Fieldable; build a block out of existing fields ‣ Permissions per BEAN type and per field, like nodes ‣ Admin is familiar to users BADCamp, 2011, Tim Cosgrove
- 245. Modern Theming BEANs: Advantages ‣ Fieldable; build a block out of existing fields ‣ Permissions per BEAN type and per field, like nodes ‣ Admin is familiar to users ‣ Use of the blocks is familiar to site builders. BADCamp, 2011, Tim Cosgrove
- 246. Modern Theming Example: Image & Text BADCamp, 2011, Tim Cosgrove
- 247. Modern Theming Example: Image & Text ‣ Label for admin use BADCamp, 2011, Tim Cosgrove
- 248. Modern Theming Example: Image & Text ‣ Label for admin use ‣ Title for display BADCamp, 2011, Tim Cosgrove
- 249. Modern Theming Example: Image & Text ‣ Label for admin use ‣ Title for display ‣ Media field for image BADCamp, 2011, Tim Cosgrove
- 250. Modern Theming Example: Image & Text ‣ Label for admin use ‣ Title for display ‣ Media field for image ‣ User can choose an image style BADCamp, 2011, Tim Cosgrove
- 251. Modern Theming Example: Image & Text ‣ Label for admin use ‣ Title for display ‣ Media field for image ‣ User can choose an image style ‣ Optional Text BADCamp, 2011, Tim Cosgrove
- 254. Modern Theming Blockreference BADCamp, 2011, Tim Cosgrove
- 255. Modern Theming Blockreference ‣ Like Node Reference for blocks BADCamp, 2011, Tim Cosgrove
- 256. Modern Theming Blockreference ‣ Like Node Reference for blocks ‣ Allows you to pull rendered blocks into a field context BADCamp, 2011, Tim Cosgrove
- 257. Modern Theming Blockreference ‣ Like Node Reference for blocks ‣ Allows you to pull rendered blocks into a field context ‣ All benefits of fields BADCamp, 2011, Tim Cosgrove
- 258. Modern Theming Blockreference ‣ Like Node Reference for blocks ‣ Allows you to pull rendered blocks into a field context ‣ All benefits of fields ‣ Reorderable BADCamp, 2011, Tim Cosgrove
- 259. Modern Theming Blockreference ‣ Like Node Reference for blocks ‣ Allows you to pull rendered blocks into a field context ‣ All benefits of fields ‣ Reorderable ‣ Rendered blocks get search indexed as part of node BADCamp, 2011, Tim Cosgrove
- 260. Modern Theming Beans & Blockreference BADCamp, 2011, Tim Cosgrove
- 262. screenshot of listing block example, with highlights like previous slide
- 265. Modern Theming Display Suite ‣ Display Suite gives access to many of the things described here: ‣ View Modes ‣ Regions in node content (similar to Field Groups) BADCamp, 2011, Tim Cosgrove
- 266. Modern Theming Display Suite ‣ More capabilities ‣ Views and Panels integration ‣ Ability to send node content to blocks ‣ Exportables of all this BADCamp, 2011, Tim Cosgrove
- 267. Modern Theming Display Suite Excellent screencasts at http://bit.ly/ds-d7 BADCamp, 2011, Tim Cosgrove
- 268. Modern Theming Questions? BADCamp, 2011, Tim Cosgrove
- 269. Modern Theming Resources ‣ BEAN http://drupal.org/project/bean ‣ Block Reference http://drupal.org/project/blockreference ‣ SASS http://drupal.org/project/bean ‣ Fieldgroup http://drupal.org/project/fieldgroup ‣ Display Suite http://drupal.org/project/ds BADCamp, 2011, Tim Cosgrove
Editor's Notes
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- Here we have not only block reference fields, but additional text fields to use as headers for the groupings.\n
- Here we have not only block reference fields, but additional text fields to use as headers for the groupings.\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- *** Different node types can share view modes. This means that you can configure nodes with relatively different content to look similarly when those nodes share the same location. Video, Photo gallery, articles, stored documents, may all have very different field content but can be configured to show in a similar manner in a given context.\n
- *** Different node types can share view modes. This means that you can configure nodes with relatively different content to look similarly when those nodes share the same location. Video, Photo gallery, articles, stored documents, may all have very different field content but can be configured to show in a similar manner in a given context.\n
- *** Different node types can share view modes. This means that you can configure nodes with relatively different content to look similarly when those nodes share the same location. Video, Photo gallery, articles, stored documents, may all have very different field content but can be configured to show in a similar manner in a given context.\n
- *** Different node types can share view modes. This means that you can configure nodes with relatively different content to look similarly when those nodes share the same location. Video, Photo gallery, articles, stored documents, may all have very different field content but can be configured to show in a similar manner in a given context.\n
- *** Different node types can share view modes. This means that you can configure nodes with relatively different content to look similarly when those nodes share the same location. Video, Photo gallery, articles, stored documents, may all have very different field content but can be configured to show in a similar manner in a given context.\n
- View modes can be used to render nodes in very different contexts. Views, node references, beans, and programmatic display of nodes can all use view modes. This means that you always know how your node is going to render; you don't need to keep redefining it.\n
- View modes can be used to render nodes in very different contexts. Views, node references, beans, and programmatic display of nodes can all use view modes. This means that you always know how your node is going to render; you don't need to keep redefining it.\n
- View modes can be used to render nodes in very different contexts. Views, node references, beans, and programmatic display of nodes can all use view modes. This means that you always know how your node is going to render; you don't need to keep redefining it.\n
- View modes can be used to render nodes in very different contexts. Views, node references, beans, and programmatic display of nodes can all use view modes. This means that you always know how your node is going to render; you don't need to keep redefining it.\n
- View modes can be used to render nodes in very different contexts. Views, node references, beans, and programmatic display of nodes can all use view modes. This means that you always know how your node is going to render; you don't need to keep redefining it.\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- Here we have not only block reference fields, but additional text fields to use as headers for the groupings.\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n