Your SlideShare is downloading. ×
CTools Style Plugins: Demo & Code Walk-Thru
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CTools Style Plugins: Demo & Code Walk-Thru


Published on

Published in: Technology
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. CTools Style Plugin Demo & Code Walk-Through Amber Himes IRC/d.o: agentolivia | Twitter: @amberhimes
  • 2. What is CTools? • CTools = Chaos Tool Suite • A contrib project on • Developer APIs and Tools • Page Manager •
  • 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. Style Plugins • With a Style Plugin, define: • a settings form • how to render settings in a template
  • 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. Demo • Weber County Library in Ogden, UT • Panopoly distro, Panels IPE (In-Place Editor) • Live Preview of panel pane styles
  • 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. My Module Files
  • 9. ...explained My Module Files
  • 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. $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. $plugin array Follow along... => <=
  • 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. ‘render pane’
  • 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. ‘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. ‘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. hook theme key
  • 19. hook theme variables
  • 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. 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. vars gotchas • $settings is an array • $content is an object
  • 23. tpl vars gotchas • $settings is an array • i.e. $settings[‘heading_classes’] • $content is an object • i.e. $content->title
  • 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. build settings form
  • 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. $settings in .tpl.php
  • 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. Inspect!
  • 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. Questions? • Slides: • Code: • Twitter: @amberhimes • IRC/ agentolivia