ctools style plugins: demo & code walk-thru
TRANSCRIPT
![Page 1: CTools Style Plugins: Demo & Code Walk-Thru](https://reader033.vdocuments.site/reader033/viewer/2022052906/558a1e67d8b42a0b188b46c7/html5/thumbnails/1.jpg)
CTools Style PluginDemo & Code Walk-Through
Amber HimesIRC/d.o: agentolivia | Twitter: @amberhimes
![Page 2: CTools Style Plugins: Demo & Code Walk-Thru](https://reader033.vdocuments.site/reader033/viewer/2022052906/558a1e67d8b42a0b188b46c7/html5/thumbnails/2.jpg)
What is CTools?
• CTools = Chaos Tool Suite
• A contrib project on drupal.org
• Developer APIs and Tools
• Page Manager
• drupal.org/project/ctools
![Page 3: CTools Style Plugins: Demo & Code Walk-Thru](https://reader033.vdocuments.site/reader033/viewer/2022052906/558a1e67d8b42a0b188b46c7/html5/thumbnails/3.jpg)
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
![Page 4: CTools Style Plugins: Demo & Code Walk-Thru](https://reader033.vdocuments.site/reader033/viewer/2022052906/558a1e67d8b42a0b188b46c7/html5/thumbnails/4.jpg)
Style Plugins
• With a Style Plugin, define:
• a settings form
• how to render settings in a template
![Page 5: CTools Style Plugins: Demo & Code Walk-Thru](https://reader033.vdocuments.site/reader033/viewer/2022052906/558a1e67d8b42a0b188b46c7/html5/thumbnails/5.jpg)
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
![Page 6: CTools Style Plugins: Demo & Code Walk-Thru](https://reader033.vdocuments.site/reader033/viewer/2022052906/558a1e67d8b42a0b188b46c7/html5/thumbnails/6.jpg)
Demo
• Weber County Library in Ogden, UT
• Panopoly distro, Panels IPE (In-Place Editor)
• Live Preview of panel pane styles
![Page 7: CTools Style Plugins: Demo & Code Walk-Thru](https://reader033.vdocuments.site/reader033/viewer/2022052906/558a1e67d8b42a0b188b46c7/html5/thumbnails/7.jpg)
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
![Page 8: CTools Style Plugins: Demo & Code Walk-Thru](https://reader033.vdocuments.site/reader033/viewer/2022052906/558a1e67d8b42a0b188b46c7/html5/thumbnails/8.jpg)
My Module Files
![Page 9: CTools Style Plugins: Demo & Code Walk-Thru](https://reader033.vdocuments.site/reader033/viewer/2022052906/558a1e67d8b42a0b188b46c7/html5/thumbnails/9.jpg)
...explained
My Module Files
![Page 10: CTools Style Plugins: Demo & Code Walk-Thru](https://reader033.vdocuments.site/reader033/viewer/2022052906/558a1e67d8b42a0b188b46c7/html5/thumbnails/10.jpg)
weber_styles.moduleImplements hook_ctools_plugin_directory
1 <?php2 function weber_styles_ctools_plugin_directory($module, $plugin) {3 return 'plugins/' . $plugin;4 }
![Page 11: CTools Style Plugins: Demo & Code Walk-Thru](https://reader033.vdocuments.site/reader033/viewer/2022052906/558a1e67d8b42a0b188b46c7/html5/thumbnails/11.jpg)
$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()
![Page 12: CTools Style Plugins: Demo & Code Walk-Thru](https://reader033.vdocuments.site/reader033/viewer/2022052906/558a1e67d8b42a0b188b46c7/html5/thumbnails/12.jpg)
$plugin array
Follow along...
https://gist.github.com/agentolivia/5745929
=> http://tinyurl.com/ctools-style-gist <=
![Page 13: CTools Style Plugins: Demo & Code Walk-Thru](https://reader033.vdocuments.site/reader033/viewer/2022052906/558a1e67d8b42a0b188b46c7/html5/thumbnails/13.jpg)
‘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’
![Page 14: CTools Style Plugins: Demo & Code Walk-Thru](https://reader033.vdocuments.site/reader033/viewer/2022052906/558a1e67d8b42a0b188b46c7/html5/thumbnails/14.jpg)
‘render pane’
![Page 15: CTools Style Plugins: Demo & Code Walk-Thru](https://reader033.vdocuments.site/reader033/viewer/2022052906/558a1e67d8b42a0b188b46c7/html5/thumbnails/15.jpg)
‘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’
![Page 16: CTools Style Plugins: Demo & Code Walk-Thru](https://reader033.vdocuments.site/reader033/viewer/2022052906/558a1e67d8b42a0b188b46c7/html5/thumbnails/16.jpg)
‘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
![Page 17: CTools Style Plugins: Demo & Code Walk-Thru](https://reader033.vdocuments.site/reader033/viewer/2022052906/558a1e67d8b42a0b188b46c7/html5/thumbnails/17.jpg)
‘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
![Page 18: CTools Style Plugins: Demo & Code Walk-Thru](https://reader033.vdocuments.site/reader033/viewer/2022052906/558a1e67d8b42a0b188b46c7/html5/thumbnails/18.jpg)
hook theme
key
![Page 19: CTools Style Plugins: Demo & Code Walk-Thru](https://reader033.vdocuments.site/reader033/viewer/2022052906/558a1e67d8b42a0b188b46c7/html5/thumbnails/19.jpg)
hook theme variables
![Page 20: CTools Style Plugins: Demo & Code Walk-Thru](https://reader033.vdocuments.site/reader033/viewer/2022052906/558a1e67d8b42a0b188b46c7/html5/thumbnails/20.jpg)
render pane theme fxn1 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 }
![Page 21: CTools Style Plugins: Demo & Code Walk-Thru](https://reader033.vdocuments.site/reader033/viewer/2022052906/558a1e67d8b42a0b188b46c7/html5/thumbnails/21.jpg)
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
![Page 22: CTools Style Plugins: Demo & Code Walk-Thru](https://reader033.vdocuments.site/reader033/viewer/2022052906/558a1e67d8b42a0b188b46c7/html5/thumbnails/22.jpg)
vars gotchas
• $settings is an array
• $content is an object
![Page 23: CTools Style Plugins: Demo & Code Walk-Thru](https://reader033.vdocuments.site/reader033/viewer/2022052906/558a1e67d8b42a0b188b46c7/html5/thumbnails/23.jpg)
tpl vars gotchas
• $settings is an array
• i.e. $settings[‘heading_classes’]
• $content is an object
• i.e. $content->title
![Page 24: CTools Style Plugins: Demo & Code Walk-Thru](https://reader033.vdocuments.site/reader033/viewer/2022052906/558a1e67d8b42a0b188b46c7/html5/thumbnails/24.jpg)
use of vars in tpl1 <?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; ?>
![Page 25: CTools Style Plugins: Demo & Code Walk-Thru](https://reader033.vdocuments.site/reader033/viewer/2022052906/558a1e67d8b42a0b188b46c7/html5/thumbnails/25.jpg)
build settings form
![Page 26: CTools Style Plugins: Demo & Code Walk-Thru](https://reader033.vdocuments.site/reader033/viewer/2022052906/558a1e67d8b42a0b188b46c7/html5/thumbnails/26.jpg)
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
![Page 27: CTools Style Plugins: Demo & Code Walk-Thru](https://reader033.vdocuments.site/reader033/viewer/2022052906/558a1e67d8b42a0b188b46c7/html5/thumbnails/27.jpg)
$settings in .tpl.php
![Page 28: CTools Style Plugins: Demo & Code Walk-Thru](https://reader033.vdocuments.site/reader033/viewer/2022052906/558a1e67d8b42a0b188b46c7/html5/thumbnails/28.jpg)
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
![Page 29: CTools Style Plugins: Demo & Code Walk-Thru](https://reader033.vdocuments.site/reader033/viewer/2022052906/558a1e67d8b42a0b188b46c7/html5/thumbnails/29.jpg)
Inspect!
![Page 30: CTools Style Plugins: Demo & Code Walk-Thru](https://reader033.vdocuments.site/reader033/viewer/2022052906/558a1e67d8b42a0b188b46c7/html5/thumbnails/30.jpg)
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
![Page 31: CTools Style Plugins: Demo & Code Walk-Thru](https://reader033.vdocuments.site/reader033/viewer/2022052906/558a1e67d8b42a0b188b46c7/html5/thumbnails/31.jpg)
Questions?
• Slides: http://tinyurl.com/ctools-style
• Code: http://tinyurl.com/ctools-style-gist
• Twitter: @amberhimes
• IRC/drupal.org agentolivia