Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
CTools Style Plugin
Demo & Code Walk-Through
Amber Himes
IRC/d.o: agentolivia | Twitter: @amberhimes
What is CTools?
• CTools = Chaos Tool Suite
• A contrib project on drupal.org
• Developer APIs and Tools
• Page Manager
• ...
What is a CTools
plugin?
• A plugin is way for a module to allow
another module or theme to implement a
piece of functiona...
Style Plugins
• With a Style Plugin, define:
• a settings form
• how to render settings in a template
Where do I use it?
• In the Panels interface,
click on gear of pane
and select “Style”
• In Panelizer or
Panopoly, click t...
Demo
• Weber County Library in Ogden, UT
• Panopoly distro, Panels IPE (In-Place Editor)
• Live Preview of panel pane styl...
Overview of steps
• Create a custom module
• Tell CTools about our plugin files
• Define our $plugin array
• Define our theme...
My Module Files
...explained
My Module Files
weber_styles.module
Implements hook_ctools_plugin_directory
1 <?php
2 function
weber_styles_ctools_plugin_directory(
$modu...
$plugin gotchas
• Define $plugin array inside our .inc but
outside any function
• CTools knows to look for $plugin because
...
$plugin array
Follow along...
https://gist.github.com/agentolivia/5745929
=> http://tinyurl.com/ctools-style-gist <=
‘render pane’
• corresponds to the theme function that
renders the pane, without “theme_”
• If the theme function is named...
‘render pane’
‘region pane’
• corresponds to the theme function that
renders the region, without “theme_”
• If the theme function is nam...
‘pane settings form’
• The full name of the function that returns
the settings form. For example:
panesandblocks_settings_...
‘hook theme’
• Defines theme functions and variables for
pane and region
• Pane and Region will each have their own
arrays ...
hook
theme
key
hook theme variables
render pane theme fxn
1 function
theme_panesandblocks_render_pane($vars)
{
2 $settings = $vars['settings'];
3 $content = $...
vars in template files
• Whatever variables I listed in $plugin’s
‘hook theme’ are passed into the theme
function which mak...
vars gotchas
• $settings is an array
• $content is an object
tpl vars gotchas
• $settings is an array
• i.e. $settings[‘heading_classes’]
• $content is an object
• i.e. $content->title
use of vars in tpl
1 <?php if (isset($content->title)): ?>
2 <h3 class="<?php print
(isset($settings['heading_classes'])) ...
build settings form
Print values from
settings form in tpl.php
• Use php print statements to output
settings form values as CSS classes
in you...
$settings in .tpl.php
Apply CSS
• No need to bury a CSS file in a plugin
directory
• Do inspect the elements to make sure
classes have been appli...
Inspect!
Troubleshooting tips
• Add a css file through drupal_add_css at
the top of your template file to get the
preview working rig...
Questions?
• Slides: http://tinyurl.com/ctools-style
• Code: http://tinyurl.com/ctools-style-gist
• Twitter: @amberhimes
•...
Upcoming SlideShare
Loading in …5
×

CTools Style Plugins: Demo & Code Walk-Thru

2,503 views

Published on

Published in: Technology

CTools Style Plugins: Demo & Code Walk-Thru

  1. 1. CTools Style Plugin Demo & Code Walk-Through Amber Himes IRC/d.o: agentolivia | Twitter: @amberhimes
  2. 2. What is CTools? • CTools = Chaos Tool Suite • A contrib project on drupal.org • Developer APIs and Tools • Page Manager • drupal.org/project/ctools
  3. 3. What is a CTools plugin? • A plugin is way for a module to allow another module or theme to implement a piece of functionality • Useful when you want to add or alter existing features of a module. • Types of plugins include contexts, content types, layouts, and style
  4. 4. Style Plugins • With a Style Plugin, define: • a settings form • how to render settings in a template
  5. 5. Where do I use it? • In the Panels interface, click on gear of pane and select “Style” • In Panelizer or Panopoly, click the Paintbrush icon Panopoly Example
  6. 6. Demo • Weber County Library in Ogden, UT • Panopoly distro, Panels IPE (In-Place Editor) • Live Preview of panel pane styles
  7. 7. Overview of steps • Create a custom module • Tell CTools about our plugin files • Define our $plugin array • Define our theme and form hooks • Create our template file and make use of returned values
  8. 8. My Module Files
  9. 9. ...explained My Module Files
  10. 10. weber_styles.module Implements hook_ctools_plugin_directory 1 <?php 2 function weber_styles_ctools_plugin_directory( $module, $plugin) { 3 return 'plugins/' . $plugin; 4 }
  11. 11. $plugin gotchas • Define $plugin array inside our .inc but outside any function • CTools knows to look for $plugin because we told it to in: hook_ctools_plugin_directory()
  12. 12. $plugin array Follow along... https://gist.github.com/agentolivia/5745929 => http://tinyurl.com/ctools-style-gist <=
  13. 13. ‘render pane’ • corresponds to the theme function that renders the pane, without “theme_” • If the theme function is named theme_panesandblocks_render_pane then the value for ‘render pane’ is ‘panesandblocks_render_pane’
  14. 14. ‘render pane’
  15. 15. ‘region pane’ • corresponds to the theme function that renders the region, without “theme_” • If the theme function is named theme_panesandblocks_render_region then the value for ‘render region’ is ‘panesandblocks_render_region’
  16. 16. ‘pane settings form’ • The full name of the function that returns the settings form. For example: panesandblocks_settings_form • The corresponding function: function panesandblocks_settings_form ($style_settings) • Use Form API to build form components. Set default values using $style_settings
  17. 17. ‘hook theme’ • Defines theme functions and variables for pane and region • Pane and Region will each have their own arrays of hook theme information • Array key = the first parameter of theme() returned in the corresponding theme_ function
  18. 18. hook theme key
  19. 19. hook theme variables
  20. 20. render pane theme fxn 1 function theme_panesandblocks_render_pane($vars) { 2 $settings = $vars['settings']; 3 $content = $vars['content']; 4 5 return theme('panesandblocks_theme_pane', array('content' => $content, 6 'settings' => $settings)); 7 }
  21. 21. vars in template files • Whatever variables I listed in $plugin’s ‘hook theme’ are passed into the theme function which make these values available in my template files • $content and $settings seem to be the two preferred choices for variables in hook theme
  22. 22. vars gotchas • $settings is an array • $content is an object
  23. 23. tpl vars gotchas • $settings is an array • i.e. $settings[‘heading_classes’] • $content is an object • i.e. $content->title
  24. 24. use of vars in tpl 1 <?php if (isset($content->title)): ?> 2 <h3 class="<?php print (isset($settings['heading_classes'])) ? $settings['heading_classes'] : ''; ?>"> <?php print $content->title; ?></h3> 3 <?php endif; ?>
  25. 25. build settings form
  26. 26. Print values from settings form in tpl.php • Use php print statements to output settings form values as CSS classes in your pane template file
  27. 27. $settings in .tpl.php
  28. 28. Apply CSS • No need to bury a CSS file in a plugin directory • Do inspect the elements to make sure classes have been applied as expected
  29. 29. Inspect!
  30. 30. Troubleshooting tips • Add a css file through drupal_add_css at the top of your template file to get the preview working right away • Check all instances of panel panes to make sure they are rendering correctly, as this template file will override the panels- pane.tpl.php. • Add logic to theme function as needed
  31. 31. Questions? • Slides: http://tinyurl.com/ctools-style • Code: http://tinyurl.com/ctools-style-gist • Twitter: @amberhimes • IRC/drupal.org agentolivia

×