Image painter
Image painter is an API that allows themers to create dynamic graphics by providing a theme hook (theme_painters) to define sequences of image IO, manipulation and drawing operations in a manner similar to form definition. The painter itself provides image loading and saving operations, while additional operations can be added by downloading (or developing) and installing modules that provide these operations.
Modules currently included with the painter, and the operations they provide:
- Painter: Theming hook as well as image loading and saving
- Drawing: Drawing of pixels, lines, rectangles and ellipses, text and vertical or horizontal gradients
- Imaging: Drawing, rotating, flipping, cropping, scaling and creation of images, as well as 'gluing' images together vertically or horizontally
- Reflection: Reflection effect on images and text
The painter uses GD for its imaging operations.
Example: Creating a reflection effect on the site logo and primary links
This example is adapted from the Reflek theme.
In page.tpl.php theme the logo as follows:
<?php if ($logo): ?>
<div id="logo">
<a href="<?php print $base_path; ?>" title="<?php print t('Home'); ?>">
<?php print theme('logo', $logo); ?>
</a>
</div><!-- /logo -->
<?php endif; ?>and for the primary links:
<?php if ($primary_links): ?>
<div id="primary" class="headerBlock">
<?php print theme('menu_links', $primary_links); ?>
</div><!-- /primary -->
<?php endif; ?>In template.php add the following hook implementations:
<?php
/**
* Custom logo theming hook
*/
function development_logo($url){
/* Check if the painter module is installed, and that the theme supports
the 'logo' chain of operations (or painter) */
$doRender = module_exists('painter') && painter_theme_supports('logo');
if ($doRender){ // Render a reflecting logo, as defined in the 'logo' painter
$rendered =
'<img src="'.painter_get_image('logo', $url).'" alt="'.t('Home').'" id="logo" />';
/* the painter_render function can also accept multiple parameters that are
passed on to the 'logo' painter in the form of a keyed array.
Since the 'logo' painter only uses one parameter, it is automatically wrapped
in a keyed array containing one element with 'default' as key */
} else { // Render the logo normally
$rendered = '<img src="'.$url.'" alt="<?php print '.t('Home').'" id="logo" />';
}
return $rendered;
}
/**
* Implementation of theme_menu_links
* Hooked to provide li items with ids, as well as painter images
*/
function development_menu_links($links = array(), $delimiter = ' | ') {
if (!$links) {
return '';
}
$count = 0;
$output = "<ul>\n";
$path = $_GET['q'];
foreach ($links as $index => $link) {
if ($link['href'] == $path || $link['href'] == '<front>' && drupal_is_front_page()){
$link['attributes']['class'] = 'active';
$li_class = ' class="active"';
} else {
$link['attributes']['class'] = NULL;
$li_class = '';
}
// Hook into painter.module
$doImage = module_exists('painter') && painter_theme_supports('main nav');
if ($doImage){
$rendered =
'<img src="'.painter_get_image('main nav', $link['title']).'" alt="'.$link['title'].'"/>';
} else {
$rendered = $link['title'];
}
$output .= '<li id="index'.$count++.'"'.$li_class.'>'.
l($rendered,
$link['href'],
$link['attributes'],
$link['query'],
$link['fragment'],
FALSE, $doImage)."</li>\n";
}
$output .= '</ul>';
return $output;
}
/**
* Implementation of hook_painters
*/
function development_painters($args, $may_cache = FALSE){
$painters = array();
if ($may_cache) {
/* reflecting logo */
$painters['logo'] = array(
// The following operations will be executed in sequence to produce the reflected logo:
array(
'operation' => 'load image',
'filename' => $args['default'], // image url passed to painter_render
'as' => 'logo', // so that we can refer to the loaded image later
),
array(
'operation' => 'reflect image',
'image' => '[logo]',
/* use image loaded in the previous operation,
stored under the key 'logo' */
'background' => '#ffffff',
// Colors may also be in the form:
// array( $red_value, $green_value, $blue_value [, $alpha_value])
'height' => 0.5,
'distance' => 1,
),
);
/* reflecting main navigation */
$painters['main nav'] = array(
array(
'operation' => 'reflect text',
'text' => $args['default'],
// This will be whatever title passed to painter_render function
'font' => 'Tall film.ttf',
/* Make sure whatever font file used is in
mytheme/fonts or moduleDir/painter/fonts */
'size' => 16,
'color' => '#dd6600',
'padding' => 1,
'background' => '#ffffff',
'transparent' => TRUE,
),
);
}
return $painters;
}
?>NOTE:The Reflection modules' functionality is entirely built up of operations provided by the other modules. It may serve as an example of writing your own imaging operations using operations provided by other painter modules