Modern Theming: BeyondPreprocessing and .tplsBADCampOctober 22, 2011Tim Cosgrove
Modern ThemingTim Cosgrove                BADCamp, 2011, Tim Cosgrove
Modern ThemingTim Cosgrove‣ Engineer and Tech PM                         BADCamp, 2011, Tim Cosgrove
Modern ThemingTim Cosgrove‣ Engineer and Tech PM‣ Treehouse Agency                         BADCamp, 2011, Tim Cosgrove
Modern ThemingTim Cosgrove‣ Engineer and Tech PM‣ Treehouse Agency‣ Drupal.org member since  February 2007                ...
Modern ThemingTim Cosgrove‣ Engineer and Tech PM‣ Treehouse Agency‣ Drupal.org member since  February 2007‣ Web Developer ...
Modern ThemingTim Cosgrove‣ Engineer and Tech PM‣ Treehouse Agency‣ Drupal.org member since  February 2007‣ Web Developer ...
Modern ThemingModern Theming          BADCamp, 2011, Tim Cosgrove
Modern ThemingThemers are Developers              BADCamp, 2011, Tim Cosgrove
Modern ThemingThemers are Developers              BADCamp, 2011, Tim Cosgrove
Modern ThemingThemers are Developers              BADCamp, 2011, Tim Cosgrove
Modern ThemingThemers are Developers‣ Much of what is display-related  ends up in modules, not themes.                    ...
Modern ThemingThemers are Developers‣ Much of what is display-related  ends up in modules, not themes.‣ In Drupal, there i...
Modern ThemingThemers are Developers‣ Much of what is display-related  ends up in modules, not themes.‣ In Drupal, there i...
Modern Theming“Modern Theming”?            BADCamp, 2011, Tim Cosgrove
Modern Theming   “Modern Theming”?‣ Use as much of Core as possible                       BADCamp, 2011, Tim Cosgrove
Modern Theming   “Modern Theming”?‣ Use as much of Core as possible‣ Use module code, write module code                   ...
Modern Theming   “Modern Theming”?‣ Use as much of Core as possible‣ Use module code, write module code ‣ Or, learn what c...
Modern Theming   “Modern Theming”?‣ Use as much of Core as possible‣ Use module code, write module code ‣ Or, learn what c...
Modern Theming    “Modern Theming”?‣ Use as much of Core as possible‣ Use module code, write module code ‣ Or, learn what ...
Modern Theming BADCamp, 2011, Tim Cosgrove
Modern Theming BADCamp, 2011, Tim Cosgrove
Modern Theming BADCamp, 2011, Tim Cosgrove
Modern Theming BADCamp, 2011, Tim Cosgrove
Modern Theming BADCamp, 2011, Tim Cosgrove
Modern Theming BADCamp, 2011, Tim Cosgrove
Modern Theming BADCamp, 2011, Tim Cosgrove
Modern Theming BADCamp, 2011, Tim Cosgrove
Modern Theming BADCamp, 2011, Tim Cosgrove
Modern Theming BADCamp, 2011, Tim Cosgrove
Modern Theming BADCamp, 2011, Tim Cosgrove
Modern Theming BADCamp, 2011, Tim Cosgrove
Modern Theming BADCamp, 2011, Tim Cosgrove
Modern Theming BADCamp, 2011, Tim Cosgrove
Modern Theming BADCamp, 2011, Tim Cosgrove
Modern Theming BADCamp, 2011, Tim Cosgrove
Modern ThemingDO NOT DO        BADCamp, 2011, Tim Cosgrove
Modern ThemingIn general, try to forgetDrupal 5 and 6.                  BADCamp, 2011, Tim Cosgrove
Modern ThemingIn general, try to forgetDrupal 5 and 6.‣ Forget dozens of templates.                       BADCamp, 2011, T...
Modern ThemingIn general, try to forgetDrupal 5 and 6.‣ Forget dozens of templates.‣ Forget dozens of preprocess  function...
Modern ThemingIn general, try to forgetDrupal 5 and 6.‣ Forget dozens of templates.‣ Forget dozens of preprocess  function...
Modern ThemingIn general, try to forgetDrupal 5 and 6.‣ Forget dozens of templates.‣ Forget dozens of preprocess  function...
Modern ThemingTheming Modernly: GRIDS               BADCamp, 2011, Tim Cosgrove
Modern ThemingTheming Modernly: GRIDS‣ You should insist on a grid design.                        BADCamp, 2011, Tim Cosgr...
Modern ThemingTheming Modernly: GRIDS‣ You should insist on a grid design. ‣ The coherent visual layout makes   finding inf...
Modern ThemingTheming Modernly: GRIDS‣ You should insist on a grid design. ‣ The coherent visual layout makes   finding inf...
Modern ThemingTheming Modernly: GRIDS‣ You should insist on a grid design. ‣ The coherent visual layout makes   finding inf...
screenshot of listingblock example, withhighlights like previousslide
screenshot of listingblock example, withhighlights like previousslide
Modern ThemingWhy Grids are Helpful                BADCamp, 2011, Tim Cosgrove
Modern ThemingWhy Grids are Helpful‣ Items of the same number of units  are interchangeable                       BADCamp,...
Modern ThemingWhy Grids are Helpful‣ Items of the same number of units  are interchangeable‣ With the right image style se...
`
Modern ThemingRepeating elements               BADCamp, 2011, Tim Cosgrove
Modern ThemingRepeating elements‣ Look for items that are similar and  can be reused                         BADCamp, 2011...
Modern ThemingRepeating elements‣ Look for items that are similar and  can be reused‣ Look for inconsistencies; see if the...
Modern ThemingRepeating elements‣ Look for items that are similar and  can be reused‣ Look for inconsistencies; see if the...
Modern ThemingDifferent Content,  Same Display            BADCamp, 2011, Tim Cosgrove
Modern Theming BADCamp, 2011, Tim Cosgrove
Modern Theming BADCamp, 2011, Tim Cosgrove
Modern Theming BADCamp, 2011, Tim Cosgrove
Modern Theming BADCamp, 2011, Tim Cosgrove
Modern Theming BADCamp, 2011, Tim Cosgrove
Modern Theming BADCamp, 2011, Tim Cosgrove
Modern Theming BADCamp, 2011, Tim Cosgrove
Modern Theming BADCamp, 2011, Tim Cosgrove
Modern Theming BADCamp, 2011, Tim Cosgrove
Modern Theming BADCamp, 2011, Tim Cosgrove
Modern Theming Same Content,Different Displays            BADCamp, 2011, Tim Cosgrove
Modern Theming BADCamp, 2011, Tim Cosgrove
Modern Theming BADCamp, 2011, Tim Cosgrove
Modern Theming BADCamp, 2011, Tim Cosgrove
Modern Theming BADCamp, 2011, Tim Cosgrove
Modern Theming BADCamp, 2011, Tim Cosgrove
Core
Modern ThemingDrupal 7 only - why?             BADCamp, 2011, Tim Cosgrove
Modern Theming  Drupal 7 only - why?‣ Released January 5, 2011 - coming  up on a year                       BADCamp, 2011,...
Modern Theming  Drupal 7 only - why?‣ Released January 5, 2011 - coming  up on a year‣ Drupal 6 will stopped being  suppor...
Modern Theming  Drupal 7 only - why?‣ Released January 5, 2011 - coming  up on a year‣ Drupal 6 will stopped being  suppor...
Modern Theming  Drupal 7 only - why?‣ Released January 5, 2011 - coming  up on a year‣ Drupal 6 will stopped being  suppor...
Modern Themingalso...          BADCamp, 2011, Tim Cosgrove
Modern ThemingDrupal 7 is actually good!                BADCamp, 2011, Tim Cosgrove
Modern ThemingDrupal 7 is actually good!‣ Theming improvements:                     BADCamp, 2011, Tim Cosgrove
Modern ThemingDrupal 7 is actually good!‣ Theming improvements: ‣ Fields in core                     BADCamp, 2011, Tim Co...
Modern ThemingDrupal 7 is actually good!‣ Theming improvements: ‣ Fields in core ‣ preprocess() and process()             ...
Modern ThemingDrupal 7 is actually good!‣ Theming improvements: ‣ Fields in core ‣ preprocess() and process() ‣ Render arr...
Modern ThemingDrupal 7 is actually good!‣ Theming improvements: ‣ Fields in core ‣ preprocess() and process() ‣ Render arr...
Modern ThemingDrupal 7 is actually good!‣ Theming improvements: ‣ Fields in core ‣ preprocess() and process() ‣ Render arr...
Modern ThemingDrupal 7 is actually good!‣ Theming improvements: ‣ Fields in core ‣ preprocess() and process() ‣ Render arr...
Modern ThemingBase theme? Nope.            BADCamp, 2011, Tim Cosgrove
Modern Theming    Base theme? Nope.‣ We use core theming as our starting  point.                        BADCamp, 2011, Tim...
Modern Theming    Base theme? Nope.‣ We use core theming as our starting  point. ‣ .info, reset.css, and a grid system.   ...
Modern Theming    Base theme? Nope.‣ We use core theming as our starting  point. ‣ .info, reset.css, and a grid system.‣ C...
Modern Theming    Base theme? Nope.‣ We use core theming as our starting  point. ‣ .info, reset.css, and a grid system.‣ C...
Modern Theming        Base theme? Nope.‣ We use core theming as our starting  point.    ‣ .info, reset.css, and a grid sys...
Modern ThemingView Modes        BADCamp, 2011, Tim Cosgrove
Modern ThemingWhat are View Modes?               BADCamp, 2011, Tim Cosgrove
Modern ThemingWhat are View Modes?‣ View Modes are awesome.                      BADCamp, 2011, Tim Cosgrove
Modern ThemingWhat are View Modes?‣ View Modes are awesome.‣ Named ways of displaying the same  entity differently (node, ...
Modern ThemingWhat are View Modes?‣ View Modes are awesome.‣ Named ways of displaying the same  entity differently (node, ...
Modern ThemingWhat are View Modes?‣ View Modes are awesome.‣ Named ways of displaying the same  entity differently (node, ...
View Modes
Modern ThemingBuilt-in View Modes                BADCamp, 2011, Tim Cosgrove
Modern ThemingBuilt-in View Modes‣ Teaser and Default, active by default                         BADCamp, 2011, Tim Cosgrove
Modern ThemingBuilt-in View Modes‣ Teaser and Default, active by default‣ Core also includes view modes for               ...
Modern ThemingBuilt-in View Modes‣ Teaser and Default, active by default‣ Core also includes view modes for ‣ “full”      ...
Modern ThemingBuilt-in View Modes‣ Teaser and Default, active by default‣ Core also includes view modes for ‣ “full” ‣ RSS...
Modern ThemingBuilt-in View Modes‣ Teaser and Default, active by default‣ Core also includes view modes for ‣ “full” ‣ RSS...
Modern ThemingBuilt-in View Modes‣ Teaser and Default, active by default‣ Core also includes view modes for ‣ “full” ‣ RSS...
Modern ThemingBut why stop there?             BADCamp, 2011, Tim Cosgrove
Modern Theming    But why stop there?All of these are potential view modes                      BADCamp, 2011, Tim Cosgrove
Modern Theming    But why stop there?All of these are potential view modes                      BADCamp, 2011, Tim Cosgrove
Modern Theming    But why stop there?All of these are potential view modes                      BADCamp, 2011, Tim Cosgrove
Modern Theming    But why stop there?All of these are potential view modes                      BADCamp, 2011, Tim Cosgrove
Modern Theming    But why stop there?All of these are potential view modes                      BADCamp, 2011, Tim Cosgrove
Modern Theming    But why stop there?All of these are potential view modes                      BADCamp, 2011, Tim Cosgrove
Modern Theming    But why stop there?All of these are potential view modes                      BADCamp, 2011, Tim Cosgrove
Modern Theming    But why stop there?All of these are potential view modes                      BADCamp, 2011, Tim Cosgrove
Modern ThemingWhy is this useful?                 BADCamp, 2011, Tim Cosgrove
Modern ThemingWhy is this useful?‣ Different node types (or entities) can  share view mode names.                         ...
Modern ThemingWhy is this useful?‣ Different node types (or entities) can  share view mode names. Contributor             ...
Modern ThemingWhy is this useful?‣ Different node types (or entities) can  share view mode names. Contributor     Article ...
Modern ThemingWhy is this useful?‣ Different node types (or entities) can  share view mode names. Contributor     Article ...
Modern ThemingWhy is this useful? ‣ Different node types (or entities) can   share view mode names. Contributor      Artic...
Modern ThemingDifferent contexts            BADCamp, 2011, Tim Cosgrove
Modern Theming    Different contexts‣ View Modes can be used to render  entities in:                       BADCamp, 2011, ...
Modern Theming    Different contexts‣ View Modes can be used to render  entities in: ‣ Views                       BADCamp...
Modern Theming    Different contexts‣ View Modes can be used to render  entities in: ‣ Views ‣ Reference fields            ...
Modern Theming    Different contexts‣ View Modes can be used to render  entities in: ‣ Views ‣ Reference fields ‣ Beans / b...
Modern Theming    Different contexts‣ View Modes can be used to render  entities in: ‣ Views ‣ Reference fields ‣ Beans / b...
Modern Theming BADCamp, 2011, Tim Cosgrove
Modern Theming             View Modes in Code/*** Implements hook_entity_info_alter().*/function energy_content_entity_inf...
Modern Theming             View Modes in Code/*** Implements hook_entity_info_alter().*/function energy_content_entity_inf...
Modern Theming             View Modes in Code/*** Implements hook_entity_info_alter().*/function energy_content_entity_inf...
Modern Theming             View Modes in Code/*** Implements hook_entity_info_alter().*/function energy_content_entity_inf...
Modern Theming             View Modes in Code/*** Implements hook_entity_info_alter().*/function energy_content_entity_inf...
Modern Theming             View Modes in Code/*** Implements hook_entity_info_alter().*/function energy_content_entity_inf...
Modern Theming             View Modes in Code/*** Implements hook_entity_info_alter().*/function energy_content_entity_inf...
Modern Theming...or you can use  Display Suite.   But we’ll come back to that.                           BADCamp, 2011, Ti...
O HAI
O HAI
Modern ThemingView Modes entity settings in code            BADCamp, 2011, Tim Cosgrove
Modern Theming    View Modes entity     settings in code‣ If you export node or other entity  settings with Features, all ...
Modern Theming    View Modes entity     settings in code‣ If you export node or other entity  settings with Features, all ...
Modern ThemingField Formatters           BADCamp, 2011, Tim Cosgrove
Modern Theming      Field Formatters‣ Field API lets you add fields to  entities, to construct complex  content types      ...
Modern Theming      Field Formatters‣ Field API lets you add fields to  entities, to construct complex  content types‣ Also...
Modern Theming      Field Formatters‣ Field API lets you add fields to  entities, to construct complex  content types‣ Also...
Modern ThemingExample: External Links               BADCamp, 2011, Tim Cosgrove
Modern ThemingExample: External Links‣ On Energy.gov, used  ext_link_page.module                         BADCamp, 2011, Ti...
Modern ThemingExample: External Links‣ On Energy.gov, used  ext_link_page.module‣ Module provides a url_outbound  alter an...
Modern ThemingExample: External Links‣ On Energy.gov, used  ext_link_page.module‣ Module provides a url_outbound  alter an...
Modern ThemingSolution: custom formatter                BADCamp, 2011, Tim Cosgrove
Modern ThemingSolution: custom formatter‣ Establish a new formatter type                        BADCamp, 2011, Tim Cosgrove
Modern ThemingSolution: custom formatter‣ Establish a new formatter type‣ Apply it to existing field types: text,  long tex...
Modern Theming            hook_field_formatter_info()/*** Implements hook_field_formatter_info().*/function energy_content_fi...
Modern Theming            hook_field_formatter_info()/*** Implements hook_field_formatter_info().*/function energy_content_fi...
Modern Theming            hook_field_formatter_info()/*** Implements hook_field_formatter_info().*/function energy_content_fi...
Modern Theming            hook_field_formatter_info()/*** Implements hook_field_formatter_info().*/function energy_content_fi...
Modern Theming            hook_field_formatter_info()/*** Implements hook_field_formatter_info().*/function energy_content_fi...
Modern Theming      hook_field_formatter_view()/*** Implements hook_field_formatter_view().*/function energy_content_field_fo...
Modern Theming      hook_field_formatter_view()/*** Implements hook_field_formatter_view().*/function energy_content_field_fo...
Modern Theming      hook_field_formatter_view()/*** Implements hook_field_formatter_view().*/function energy_content_field_fo...
Modern Theming      hook_field_formatter_view()/*** Implements hook_field_formatter_view().*/function energy_content_field_fo...
Modern Theming      hook_field_formatter_view()/*** Implements hook_field_formatter_view().*/function energy_content_field_fo...
Modern Theming                 hook_field_formatter_view()// ... continued        foreach ($items as $delta => $item) {    ...
Modern Theming                 hook_field_formatter_view()// ... continued        foreach ($items as $delta => $item) {    ...
Modern Theming                 hook_field_formatter_view()// ... continued        foreach ($items as $delta => $item) {    ...
Modern ThemingMeanwhile, in Manage Display...                    BADCamp, 2011, Tim Cosgrove
Modern ThemingMeanwhile, in Manage Display...                    BADCamp, 2011, Tim Cosgrove
Modern ThemingField Formatters           BADCamp, 2011, Tim Cosgrove
Modern Theming     Field Formatters‣ Advantages                BADCamp, 2011, Tim Cosgrove
Modern Theming     Field Formatters‣ Advantages ‣ Highly reusable and extensible                       BADCamp, 2011, Tim ...
Modern Theming     Field Formatters‣ Advantages ‣ Highly reusable and extensible ‣ Distributable as module code           ...
Modern Theming     Field Formatters‣ Advantages ‣ Highly reusable and extensible ‣ Distributable as module code ‣ Good in ...
Modern ThemingField Formatters           BADCamp, 2011, Tim Cosgrove
Modern Theming     Field Formatters‣ Disadvantages                   BADCamp, 2011, Tim Cosgrove
Modern Theming     Field Formatters‣ Disadvantages ‣ If you need style, you need style.   You still have to theme.        ...
Modern Theming     Field Formatters‣ Disadvantages ‣ If you need style, you need style.   You still have to theme. ‣ Code ...
Contrib
Modern ThemingSASS        BADCamp, 2011, Tim Cosgrove
Modern Theming              SASS‣ Syntactically Awesome Style Sheets                        BADCamp, 2011, Tim Cosgrove
Modern Theming               SASS‣ Syntactically Awesome Style Sheets‣ A Ruby project, but there is a PHP  port of it and ...
Modern Theming               SASS‣ Syntactically Awesome Style Sheets‣ A Ruby project, but there is a PHP  port of it and ...
Modern Theming               SASS‣ Syntactically Awesome Style Sheets‣ A Ruby project, but there is a PHP  port of it and ...
Modern Theming               SASS‣ Syntactically Awesome Style Sheets‣ A Ruby project, but there is a PHP  port of it and ...
Modern ThemingWhy use SASS?          BADCamp, 2011, Tim Cosgrove
Modern Theming        Why use SASS?‣ It is incredibly faster than writing  CSS.                          BADCamp, 2011, Ti...
Modern Theming        Why use SASS?‣ It is incredibly faster than writing  CSS.‣ Your loved ones miss you, and you  are wa...
Modern Theming        Why use SASS?‣ It is incredibly faster than writing  CSS.‣ Your loved ones miss you, and you  are wa...
Modern Theming        Why use SASS?‣ It is incredibly faster than writing  CSS.‣ Your loved ones miss you, and you  are wa...
Modern Theming        Why use SASS?‣ It is incredibly faster than writing  CSS.‣ Your loved ones miss you, and you  are wa...
Modern Theming                  SASS Syntax: Nesting                           SASS                        CSS.my-selector...
Modern Theming                  SASS Syntax: Nesting                           SASS                        CSS.my-selector...
SASS Syntax: Nesting                                    SASS                                           CSS.ie8, .ie7, .ie6...
Modern Theming           SASS Syntax: Variables                        SASS                                   CSS$standard...
Modern ThemingSASS Syntax: Mixins             BADCamp, 2011, Tim Cosgrove
Modern Theming          SASS Syntax: Mixins                  SASS/* border-radius */@mixin border-radius($values) {  -webk...
Modern Theming             SASS Syntax: Mixins                     SASS/* border-radius */@mixin border-radius($values) { ...
Modern Theming             SASS Syntax: Mixins                     SASS                                                   ...
Modern Theming               SASS Syntax: Mixins                                               CSS/* border-radius */.my-b...
Modern ThemingMore about SASS           BADCamp, 2011, Tim Cosgrove
Modern Theming     More about SASS‣ Fully CSS compatible (with SASS 3.0  syntax)                        BADCamp, 2011, Tim...
Modern Theming     More about SASS‣ Fully CSS compatible (with SASS 3.0  syntax) ‣ You can drop in existing style, or   ma...
Modern Theming     More about SASS‣ Fully CSS compatible (with SASS 3.0  syntax) ‣ You can drop in existing style, or   ma...
Modern Theming      More about SASS‣ Fully CSS compatible (with SASS 3.0  syntax) ‣ You can drop in existing style, or   m...
Modern ThemingFieldgroups (field_group)               BADCamp, 2011, Tim Cosgrove
Modern ThemingFieldgroups (field_group)‣ Used to be part of CCK; now a  separate contrib module                       BADCa...
Modern ThemingFieldgroups (field_group)‣ Used to be part of CCK; now a  separate contrib module‣ Used to create fieldsets, d...
Modern ThemingFieldgroups (field_group)‣ Used to be part of CCK; now a  separate contrib module‣ Used to create fieldsets, d...
Modern ThemingFieldgroups (field_group)‣ Used to be part of CCK; now a  separate contrib module‣ Used to create fieldsets, d...
Modern ThemingExample: simple column               BADCamp, 2011, Tim Cosgrove
Modern ThemingExample: simple column               BADCamp, 2011, Tim Cosgrove
Modern ThemingExample: simple column               BADCamp, 2011, Tim Cosgrove
Modern ThemingSolution: div with grid classes                    BADCamp, 2011, Tim Cosgrove
Modern ThemingSolution: div with grid classes                    BADCamp, 2011, Tim Cosgrove
Modern ThemingSolution: div with grid classes                    BADCamp, 2011, Tim Cosgrove
Modern Theming     Custom FieldgroupsFieldgroups are CTools Exportables, sothey are (somewhat) easy to write.             ...
Modern Theming     Custom FieldgroupsFieldgroups are CTools Exportables, sothey are (somewhat) easy to write.             ...
Modern Theming     Custom FieldgroupsFieldgroups are CTools Exportables, sothey are (somewhat) easy to write.             ...
Modern ThemingFieldgroups on admin forms                 BADCamp, 2011, Tim Cosgrove
Modern ThemingFieldgroups on admin forms                 BADCamp, 2011, Tim Cosgrove
Modern ThemingFieldgroups on admin forms                 BADCamp, 2011, Tim Cosgrove
Modern ThemingBEANs        BADCamp, 2011, Tim Cosgrove
Modern Theming             BEANs‣ BEANs - Bean Entities Aren’t Nodes                       BADCamp, 2011, Tim Cosgrove
Modern Theming             BEANs‣ BEANs - Bean Entities Aren’t Nodes ‣ Fieldable entities that are exposed   to Drupal’s b...
Modern Theming             BEANs‣ BEANs - Bean Entities Aren’t Nodes ‣ Fieldable entities that are exposed   to Drupal’s b...
Modern Theming             BEANs‣ BEANs - Bean Entities Aren’t Nodes ‣ Fieldable entities that are exposed   to Drupal’s b...
Modern ThemingBEANs: Advantages            BADCamp, 2011, Tim Cosgrove
Modern Theming    BEANs: Advantages‣ Fieldable; build a block out of  existing fields                         BADCamp, 2011...
Modern Theming    BEANs: Advantages‣ Fieldable; build a block out of  existing fields‣ Permissions per BEAN type and per  fi...
Modern Theming    BEANs: Advantages‣ Fieldable; build a block out of  existing fields‣ Permissions per BEAN type and per  fi...
Modern Theming    BEANs: Advantages‣ Fieldable; build a block out of  existing fields‣ Permissions per BEAN type and per  fi...
Modern ThemingExample: Image & Text              BADCamp, 2011, Tim Cosgrove
Modern ThemingExample: Image & Text                    ‣   Label for                        admin use              BADCamp...
Modern ThemingExample: Image & Text                    ‣   Label for                        admin use                    ‣...
Modern ThemingExample: Image & Text                    ‣   Label for                        admin use                    ‣...
Modern ThemingExample: Image & Text                    ‣   Label for                        admin use                    ‣...
Modern ThemingExample: Image & Text                    ‣   Label for                        admin use                    ‣...
Modern ThemingBlockreference          BADCamp, 2011, Tim Cosgrove
Modern Theming       Blockreference‣ Like Node Reference for blocks                        BADCamp, 2011, Tim Cosgrove
Modern Theming       Blockreference‣ Like Node Reference for blocks‣ Allows you to pull rendered blocks  into a field conte...
Modern Theming       Blockreference‣ Like Node Reference for blocks‣ Allows you to pull rendered blocks  into a field conte...
Modern Theming       Blockreference‣ Like Node Reference for blocks‣ Allows you to pull rendered blocks  into a field conte...
Modern Theming       Blockreference‣ Like Node Reference for blocks‣ Allows you to pull rendered blocks  into a field conte...
Modern ThemingBeans & Blockreference              BADCamp, 2011, Tim Cosgrove
screenshot of listingblock example, withhighlights like previousslide
Modern Theming        Display Suite‣ Display Suite gives access to many  of the things described here: ‣ View Modes ‣ Regi...
Modern Theming         Display Suite‣ More capabilities ‣ Views and Panels integration ‣ Ability to send node content to  ...
Modern Theming    Display Suite Excellent screencasts athttp://bit.ly/ds-d7                   BADCamp, 2011, Tim Cosgrove
Modern ThemingQuestions?        BADCamp, 2011, Tim Cosgrove
Modern ThemingResources‣ BEAN  http://drupal.org/project/bean‣ Block Reference  http://drupal.org/project/blockreference‣ ...
Modern Theming: Beyond Proprocessing and .tpls
Modern Theming: Beyond Proprocessing and .tpls
Modern Theming: Beyond Proprocessing and .tpls
Modern Theming: Beyond Proprocessing and .tpls
Modern Theming: Beyond Proprocessing and .tpls
Modern Theming: Beyond Proprocessing and .tpls
Modern Theming: Beyond Proprocessing and .tpls
Modern Theming: Beyond Proprocessing and .tpls
Modern Theming: Beyond Proprocessing and .tpls
Modern Theming: Beyond Proprocessing and .tpls
Modern Theming: Beyond Proprocessing and .tpls
Modern Theming: Beyond Proprocessing and .tpls
Modern Theming: Beyond Proprocessing and .tpls
Modern Theming: Beyond Proprocessing and .tpls
Modern Theming: Beyond Proprocessing and .tpls
Modern Theming: Beyond Proprocessing and .tpls
Modern Theming: Beyond Proprocessing and .tpls
Upcoming SlideShare
Loading in …5
×

Modern Theming: Beyond Proprocessing and .tpls

2,141 views
2,068 views

Published on

Published in: Technology
3 Comments
2 Likes
Statistics
Notes
  • Ah thanks! In the recording he says the slides are available for download to copy the code samples. Just wanted to point out, they aren't.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • http://www.archive.org/details/ModernThemingBeyondPreprocessingAnd.tpls
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Is there a recording of this presentation?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
2,141
On SlideShare
0
From Embeds
0
Number of Embeds
723
Actions
Shares
0
Downloads
27
Comments
3
Likes
2
Embeds 0
No embeds

No notes for slide
  • \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
  • Modern Theming: Beyond Proprocessing and .tpls

    1. 1. Modern Theming: BeyondPreprocessing and .tplsBADCampOctober 22, 2011Tim Cosgrove
    2. 2. Modern ThemingTim Cosgrove BADCamp, 2011, Tim Cosgrove
    3. 3. Modern ThemingTim Cosgrove‣ Engineer and Tech PM BADCamp, 2011, Tim Cosgrove
    4. 4. Modern ThemingTim Cosgrove‣ Engineer and Tech PM‣ Treehouse Agency BADCamp, 2011, Tim Cosgrove
    5. 5. Modern ThemingTim Cosgrove‣ Engineer and Tech PM‣ Treehouse Agency‣ Drupal.org member since February 2007 BADCamp, 2011, Tim Cosgrove
    6. 6. Modern ThemingTim Cosgrove‣ Engineer and Tech PM‣ Treehouse Agency‣ Drupal.org member since February 2007‣ Web Developer since 1998 BADCamp, 2011, Tim Cosgrove
    7. 7. Modern ThemingTim Cosgrove‣ Engineer and Tech PM‣ Treehouse Agency‣ Drupal.org member since February 2007‣ Web Developer since 1998‣ @timcosgrove BADCamp, 2011, Tim Cosgrove
    8. 8. Modern ThemingModern Theming BADCamp, 2011, Tim Cosgrove
    9. 9. Modern ThemingThemers are Developers BADCamp, 2011, Tim Cosgrove
    10. 10. Modern ThemingThemers are Developers BADCamp, 2011, Tim Cosgrove
    11. 11. Modern ThemingThemers are Developers BADCamp, 2011, Tim Cosgrove
    12. 12. Modern ThemingThemers are Developers‣ Much of what is display-related ends up in modules, not themes. BADCamp, 2011, Tim Cosgrove
    13. 13. Modern ThemingThemers 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. 14. Modern ThemingThemers 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. 15. Modern Theming“Modern Theming”? BADCamp, 2011, Tim Cosgrove
    16. 16. Modern Theming “Modern Theming”?‣ Use as much of Core as possible BADCamp, 2011, Tim Cosgrove
    17. 17. Modern Theming “Modern Theming”?‣ Use as much of Core as possible‣ Use module code, write module code BADCamp, 2011, Tim Cosgrove
    18. 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. 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. 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. 21. Modern Theming BADCamp, 2011, Tim Cosgrove
    22. 22. Modern Theming BADCamp, 2011, Tim Cosgrove
    23. 23. Modern Theming BADCamp, 2011, Tim Cosgrove
    24. 24. Modern Theming BADCamp, 2011, Tim Cosgrove
    25. 25. Modern Theming BADCamp, 2011, Tim Cosgrove
    26. 26. Modern Theming BADCamp, 2011, Tim Cosgrove
    27. 27. Modern Theming BADCamp, 2011, Tim Cosgrove
    28. 28. Modern Theming BADCamp, 2011, Tim Cosgrove
    29. 29. Modern Theming BADCamp, 2011, Tim Cosgrove
    30. 30. Modern Theming BADCamp, 2011, Tim Cosgrove
    31. 31. Modern Theming BADCamp, 2011, Tim Cosgrove
    32. 32. Modern Theming BADCamp, 2011, Tim Cosgrove
    33. 33. Modern Theming BADCamp, 2011, Tim Cosgrove
    34. 34. Modern Theming BADCamp, 2011, Tim Cosgrove
    35. 35. Modern Theming BADCamp, 2011, Tim Cosgrove
    36. 36. Modern Theming BADCamp, 2011, Tim Cosgrove
    37. 37. Modern ThemingDO NOT DO BADCamp, 2011, Tim Cosgrove
    38. 38. Modern ThemingIn general, try to forgetDrupal 5 and 6. BADCamp, 2011, Tim Cosgrove
    39. 39. Modern ThemingIn general, try to forgetDrupal 5 and 6.‣ Forget dozens of templates. BADCamp, 2011, Tim Cosgrove
    40. 40. Modern ThemingIn general, try to forgetDrupal 5 and 6.‣ Forget dozens of templates.‣ Forget dozens of preprocess functions. BADCamp, 2011, Tim Cosgrove
    41. 41. Modern ThemingIn general, try to forgetDrupal 5 and 6.‣ Forget dozens of templates.‣ Forget dozens of preprocess functions.‣ Forget base themes. BADCamp, 2011, Tim Cosgrove
    42. 42. Modern ThemingIn general, try to forgetDrupal 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. 43. Modern ThemingTheming Modernly: GRIDS BADCamp, 2011, Tim Cosgrove
    44. 44. Modern ThemingTheming Modernly: GRIDS‣ You should insist on a grid design. BADCamp, 2011, Tim Cosgrove
    45. 45. Modern ThemingTheming Modernly: GRIDS‣ You should insist on a grid design. ‣ The coherent visual layout makes finding information easier. BADCamp, 2011, Tim Cosgrove
    46. 46. Modern ThemingTheming 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. 47. Modern ThemingTheming 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
    48. 48. screenshot of listingblock example, withhighlights like previousslide
    49. 49. screenshot of listingblock example, withhighlights like previousslide
    50. 50. Modern ThemingWhy Grids are Helpful BADCamp, 2011, Tim Cosgrove
    51. 51. Modern ThemingWhy Grids are Helpful‣ Items of the same number of units are interchangeable BADCamp, 2011, Tim Cosgrove
    52. 52. Modern ThemingWhy 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
    53. 53. `
    54. 54. Modern ThemingRepeating elements BADCamp, 2011, Tim Cosgrove
    55. 55. Modern ThemingRepeating elements‣ Look for items that are similar and can be reused BADCamp, 2011, Tim Cosgrove
    56. 56. Modern ThemingRepeating elements‣ Look for items that are similar and can be reused‣ Look for inconsistencies; see if they can be unified BADCamp, 2011, Tim Cosgrove
    57. 57. Modern ThemingRepeating 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
    58. 58. Modern ThemingDifferent Content, Same Display BADCamp, 2011, Tim Cosgrove
    59. 59. Modern Theming BADCamp, 2011, Tim Cosgrove
    60. 60. Modern Theming BADCamp, 2011, Tim Cosgrove
    61. 61. Modern Theming BADCamp, 2011, Tim Cosgrove
    62. 62. Modern Theming BADCamp, 2011, Tim Cosgrove
    63. 63. Modern Theming BADCamp, 2011, Tim Cosgrove
    64. 64. Modern Theming BADCamp, 2011, Tim Cosgrove
    65. 65. Modern Theming BADCamp, 2011, Tim Cosgrove
    66. 66. Modern Theming BADCamp, 2011, Tim Cosgrove
    67. 67. Modern Theming BADCamp, 2011, Tim Cosgrove
    68. 68. Modern Theming BADCamp, 2011, Tim Cosgrove
    69. 69. Modern Theming Same Content,Different Displays BADCamp, 2011, Tim Cosgrove
    70. 70. Modern Theming BADCamp, 2011, Tim Cosgrove
    71. 71. Modern Theming BADCamp, 2011, Tim Cosgrove
    72. 72. Modern Theming BADCamp, 2011, Tim Cosgrove
    73. 73. Modern Theming BADCamp, 2011, Tim Cosgrove
    74. 74. Modern Theming BADCamp, 2011, Tim Cosgrove
    75. 75. Core
    76. 76. Modern ThemingDrupal 7 only - why? BADCamp, 2011, Tim Cosgrove
    77. 77. Modern Theming Drupal 7 only - why?‣ Released January 5, 2011 - coming up on a year BADCamp, 2011, Tim Cosgrove
    78. 78. 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
    79. 79. 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
    80. 80. 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
    81. 81. Modern Themingalso... BADCamp, 2011, Tim Cosgrove
    82. 82. Modern ThemingDrupal 7 is actually good! BADCamp, 2011, Tim Cosgrove
    83. 83. Modern ThemingDrupal 7 is actually good!‣ Theming improvements: BADCamp, 2011, Tim Cosgrove
    84. 84. Modern ThemingDrupal 7 is actually good!‣ Theming improvements: ‣ Fields in core BADCamp, 2011, Tim Cosgrove
    85. 85. Modern ThemingDrupal 7 is actually good!‣ Theming improvements: ‣ Fields in core ‣ preprocess() and process() BADCamp, 2011, Tim Cosgrove
    86. 86. Modern ThemingDrupal 7 is actually good!‣ Theming improvements: ‣ Fields in core ‣ preprocess() and process() ‣ Render array BADCamp, 2011, Tim Cosgrove
    87. 87. Modern ThemingDrupal 7 is actually good!‣ Theming improvements: ‣ Fields in core ‣ preprocess() and process() ‣ Render array ‣ Theme hook suggestions BADCamp, 2011, Tim Cosgrove
    88. 88. Modern ThemingDrupal 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
    89. 89. Modern ThemingDrupal 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
    90. 90. Modern ThemingBase theme? Nope. BADCamp, 2011, Tim Cosgrove
    91. 91. Modern Theming Base theme? Nope.‣ We use core theming as our starting point. BADCamp, 2011, Tim Cosgrove
    92. 92. Modern Theming Base theme? Nope.‣ We use core theming as our starting point. ‣ .info, reset.css, and a grid system. BADCamp, 2011, Tim Cosgrove
    93. 93. 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
    94. 94. 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
    95. 95. 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
    96. 96. Modern ThemingView Modes BADCamp, 2011, Tim Cosgrove
    97. 97. Modern ThemingWhat are View Modes? BADCamp, 2011, Tim Cosgrove
    98. 98. Modern ThemingWhat are View Modes?‣ View Modes are awesome. BADCamp, 2011, Tim Cosgrove
    99. 99. Modern ThemingWhat are View Modes?‣ View Modes are awesome.‣ Named ways of displaying the same entity differently (node, user, custom) BADCamp, 2011, Tim Cosgrove
    100. 100. Modern ThemingWhat 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
    101. 101. Modern ThemingWhat 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
    102. 102. View Modes
    103. 103. Modern ThemingBuilt-in View Modes BADCamp, 2011, Tim Cosgrove
    104. 104. Modern ThemingBuilt-in View Modes‣ Teaser and Default, active by default BADCamp, 2011, Tim Cosgrove
    105. 105. Modern ThemingBuilt-in View Modes‣ Teaser and Default, active by default‣ Core also includes view modes for BADCamp, 2011, Tim Cosgrove
    106. 106. Modern ThemingBuilt-in View Modes‣ Teaser and Default, active by default‣ Core also includes view modes for ‣ “full” BADCamp, 2011, Tim Cosgrove
    107. 107. Modern ThemingBuilt-in View Modes‣ Teaser and Default, active by default‣ Core also includes view modes for ‣ “full” ‣ RSS BADCamp, 2011, Tim Cosgrove
    108. 108. Modern ThemingBuilt-in View Modes‣ Teaser and Default, active by default‣ Core also includes view modes for ‣ “full” ‣ RSS ‣ search index BADCamp, 2011, Tim Cosgrove
    109. 109. Modern ThemingBuilt-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
    110. 110. Modern ThemingBut why stop there? BADCamp, 2011, Tim Cosgrove
    111. 111. Modern Theming But why stop there?All of these are potential view modes BADCamp, 2011, Tim Cosgrove
    112. 112. Modern Theming But why stop there?All of these are potential view modes BADCamp, 2011, Tim Cosgrove
    113. 113. Modern Theming But why stop there?All of these are potential view modes BADCamp, 2011, Tim Cosgrove
    114. 114. Modern Theming But why stop there?All of these are potential view modes BADCamp, 2011, Tim Cosgrove
    115. 115. Modern Theming But why stop there?All of these are potential view modes BADCamp, 2011, Tim Cosgrove
    116. 116. Modern Theming But why stop there?All of these are potential view modes BADCamp, 2011, Tim Cosgrove
    117. 117. Modern Theming But why stop there?All of these are potential view modes BADCamp, 2011, Tim Cosgrove
    118. 118. Modern Theming But why stop there?All of these are potential view modes BADCamp, 2011, Tim Cosgrove
    119. 119. Modern ThemingWhy is this useful? BADCamp, 2011, Tim Cosgrove
    120. 120. Modern ThemingWhy is this useful?‣ Different node types (or entities) can share view mode names. BADCamp, 2011, Tim Cosgrove
    121. 121. Modern ThemingWhy is this useful?‣ Different node types (or entities) can share view mode names. Contributor BADCamp, 2011, Tim Cosgrove
    122. 122. Modern ThemingWhy is this useful?‣ Different node types (or entities) can share view mode names. Contributor Article BADCamp, 2011, Tim Cosgrove
    123. 123. Modern ThemingWhy is this useful?‣ Different node types (or entities) can share view mode names. Contributor Article Video BADCamp, 2011, Tim Cosgrove
    124. 124. Modern ThemingWhy 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
    125. 125. Modern ThemingDifferent contexts BADCamp, 2011, Tim Cosgrove
    126. 126. Modern Theming Different contexts‣ View Modes can be used to render entities in: BADCamp, 2011, Tim Cosgrove
    127. 127. Modern Theming Different contexts‣ View Modes can be used to render entities in: ‣ Views BADCamp, 2011, Tim Cosgrove
    128. 128. Modern Theming Different contexts‣ View Modes can be used to render entities in: ‣ Views ‣ Reference fields BADCamp, 2011, Tim Cosgrove
    129. 129. Modern Theming Different contexts‣ View Modes can be used to render entities in: ‣ Views ‣ Reference fields ‣ Beans / block entities BADCamp, 2011, Tim Cosgrove
    130. 130. 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
    131. 131. Modern Theming BADCamp, 2011, Tim Cosgrove
    132. 132. 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
    133. 133. 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
    134. 134. 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
    135. 135. 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
    136. 136. 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
    137. 137. 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
    138. 138. 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
    139. 139. Modern Theming...or you can use Display Suite. But we’ll come back to that. BADCamp, 2011, Tim Cosgrove
    140. 140. O HAI
    141. 141. O HAI
    142. 142. Modern ThemingView Modes entity settings in code BADCamp, 2011, Tim Cosgrove
    143. 143. 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
    144. 144. 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
    145. 145. Modern ThemingField Formatters BADCamp, 2011, Tim Cosgrove
    146. 146. Modern Theming Field Formatters‣ Field API lets you add fields to entities, to construct complex content types BADCamp, 2011, Tim Cosgrove
    147. 147. 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
    148. 148. 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
    149. 149. Modern ThemingExample: External Links BADCamp, 2011, Tim Cosgrove
    150. 150. Modern ThemingExample: External Links‣ On Energy.gov, used ext_link_page.module BADCamp, 2011, Tim Cosgrove
    151. 151. Modern ThemingExample: External Links‣ On Energy.gov, used ext_link_page.module‣ Module provides a url_outbound alter and an input filter BADCamp, 2011, Tim Cosgrove
    152. 152. Modern ThemingExample: 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
    153. 153. Modern ThemingSolution: custom formatter BADCamp, 2011, Tim Cosgrove
    154. 154. Modern ThemingSolution: custom formatter‣ Establish a new formatter type BADCamp, 2011, Tim Cosgrove
    155. 155. Modern ThemingSolution: 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
    156. 156. 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
    157. 157. 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
    158. 158. 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
    159. 159. 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
    160. 160. 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
    161. 161. 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
    162. 162. 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
    163. 163. 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
    164. 164. 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
    165. 165. 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
    166. 166. 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
    167. 167. 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
    168. 168. 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
    169. 169. Modern ThemingMeanwhile, in Manage Display... BADCamp, 2011, Tim Cosgrove
    170. 170. Modern ThemingMeanwhile, in Manage Display... BADCamp, 2011, Tim Cosgrove
    171. 171. Modern ThemingField Formatters BADCamp, 2011, Tim Cosgrove
    172. 172. Modern Theming Field Formatters‣ Advantages BADCamp, 2011, Tim Cosgrove
    173. 173. Modern Theming Field Formatters‣ Advantages ‣ Highly reusable and extensible BADCamp, 2011, Tim Cosgrove
    174. 174. Modern Theming Field Formatters‣ Advantages ‣ Highly reusable and extensible ‣ Distributable as module code BADCamp, 2011, Tim Cosgrove
    175. 175. 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
    176. 176. Modern ThemingField Formatters BADCamp, 2011, Tim Cosgrove
    177. 177. Modern Theming Field Formatters‣ Disadvantages BADCamp, 2011, Tim Cosgrove
    178. 178. Modern Theming Field Formatters‣ Disadvantages ‣ If you need style, you need style. You still have to theme. BADCamp, 2011, Tim Cosgrove
    179. 179. 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
    180. 180. Contrib
    181. 181. Modern ThemingSASS BADCamp, 2011, Tim Cosgrove
    182. 182. Modern Theming SASS‣ Syntactically Awesome Style Sheets BADCamp, 2011, Tim Cosgrove
    183. 183. 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
    184. 184. 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
    185. 185. 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
    186. 186. 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
    187. 187. Modern ThemingWhy use SASS? BADCamp, 2011, Tim Cosgrove
    188. 188. Modern Theming Why use SASS?‣ It is incredibly faster than writing CSS. BADCamp, 2011, Tim Cosgrove
    189. 189. 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
    190. 190. 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
    191. 191. 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
    192. 192. 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
    193. 193. 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
    194. 194. 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
    195. 195. 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
    196. 196. 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
    197. 197. Modern ThemingSASS Syntax: Mixins BADCamp, 2011, Tim Cosgrove
    198. 198. 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
    199. 199. 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, lefttop, left bottom, from($color1), to($color2)); /* for webkit browsers */ background: -moz-linear-gradient(top,$color1, $color2); /* for firefox 3.6+ */} BADCamp, 2011, Tim Cosgrove
    200. 200. 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, lefttop, left bottom, from($color1), to($color2)); /* for webkit browsers */ background: -moz-linear-gradient(top,$color1, $color2); /* for firefox 3.6+ */} BADCamp, 2011, Tim Cosgrove
    201. 201. 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
    202. 202. Modern ThemingMore about SASS BADCamp, 2011, Tim Cosgrove
    203. 203. Modern Theming More about SASS‣ Fully CSS compatible (with SASS 3.0 syntax) BADCamp, 2011, Tim Cosgrove
    204. 204. 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
    205. 205. 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
    206. 206. 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
    207. 207. Modern ThemingFieldgroups (field_group) BADCamp, 2011, Tim Cosgrove
    208. 208. Modern ThemingFieldgroups (field_group)‣ Used to be part of CCK; now a separate contrib module BADCamp, 2011, Tim Cosgrove
    209. 209. Modern ThemingFieldgroups (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
    210. 210. Modern ThemingFieldgroups (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
    211. 211. Modern ThemingFieldgroups (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
    212. 212. Modern ThemingExample: simple column BADCamp, 2011, Tim Cosgrove
    213. 213. Modern ThemingExample: simple column BADCamp, 2011, Tim Cosgrove
    214. 214. Modern ThemingExample: simple column BADCamp, 2011, Tim Cosgrove
    215. 215. Modern ThemingSolution: div with grid classes BADCamp, 2011, Tim Cosgrove
    216. 216. Modern ThemingSolution: div with grid classes BADCamp, 2011, Tim Cosgrove
    217. 217. Modern ThemingSolution: div with grid classes BADCamp, 2011, Tim Cosgrove
    218. 218. Modern Theming Custom FieldgroupsFieldgroups are CTools Exportables, sothey are (somewhat) easy to write. BADCamp, 2011, Tim Cosgrove
    219. 219. Modern Theming Custom FieldgroupsFieldgroups are CTools Exportables, sothey are (somewhat) easy to write. BADCamp, 2011, Tim Cosgrove
    220. 220. Modern Theming Custom FieldgroupsFieldgroups are CTools Exportables, sothey are (somewhat) easy to write. BADCamp, 2011, Tim Cosgrove
    221. 221. Modern ThemingFieldgroups on admin forms BADCamp, 2011, Tim Cosgrove
    222. 222. Modern ThemingFieldgroups on admin forms BADCamp, 2011, Tim Cosgrove
    223. 223. Modern ThemingFieldgroups on admin forms BADCamp, 2011, Tim Cosgrove
    224. 224. Modern ThemingBEANs BADCamp, 2011, Tim Cosgrove
    225. 225. Modern Theming BEANs‣ BEANs - Bean Entities Aren’t Nodes BADCamp, 2011, Tim Cosgrove
    226. 226. Modern Theming BEANs‣ BEANs - Bean Entities Aren’t Nodes ‣ Fieldable entities that are exposed to Drupal’s block system BADCamp, 2011, Tim Cosgrove
    227. 227. 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
    228. 228. 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
    229. 229. Modern ThemingBEANs: Advantages BADCamp, 2011, Tim Cosgrove
    230. 230. Modern Theming BEANs: Advantages‣ Fieldable; build a block out of existing fields BADCamp, 2011, Tim Cosgrove
    231. 231. 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
    232. 232. 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
    233. 233. 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
    234. 234. Modern ThemingExample: Image & Text BADCamp, 2011, Tim Cosgrove
    235. 235. Modern ThemingExample: Image & Text ‣ Label for admin use BADCamp, 2011, Tim Cosgrove
    236. 236. Modern ThemingExample: Image & Text ‣ Label for admin use ‣ Title for display BADCamp, 2011, Tim Cosgrove
    237. 237. Modern ThemingExample: Image & Text ‣ Label for admin use ‣ Title for display ‣ Media field for image BADCamp, 2011, Tim Cosgrove
    238. 238. Modern ThemingExample: Image & Text ‣ Label for admin use ‣ Title for display ‣ Media field for image ‣ User can choose an image style BADCamp, 2011, Tim Cosgrove
    239. 239. Modern ThemingExample: 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
    240. 240. Modern ThemingBlockreference BADCamp, 2011, Tim Cosgrove
    241. 241. Modern Theming Blockreference‣ Like Node Reference for blocks BADCamp, 2011, Tim Cosgrove
    242. 242. Modern Theming Blockreference‣ Like Node Reference for blocks‣ Allows you to pull rendered blocks into a field context BADCamp, 2011, Tim Cosgrove
    243. 243. 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
    244. 244. 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
    245. 245. 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
    246. 246. Modern ThemingBeans & Blockreference BADCamp, 2011, Tim Cosgrove
    247. 247. screenshot of listingblock example, withhighlights like previousslide
    248. 248. 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
    249. 249. 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
    250. 250. Modern Theming Display Suite Excellent screencasts athttp://bit.ly/ds-d7 BADCamp, 2011, Tim Cosgrove
    251. 251. Modern ThemingQuestions? BADCamp, 2011, Tim Cosgrove
    252. 252. Modern ThemingResources‣ 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

    ×