Birth of a Mutation

Mutations is a new body of work that I’m putting together that was born out of my participation in The Big 100 Show earlier this month. For those of you who are unfamiliar with shows of this kind, please allow me to explain a few things. The organizers of The Big 100 asked 100 artists to create 20 8″ x 8″ paintings each. The paintings will be available for one night only and each piece is to be priced at $30.00.

Now, I generally have a problem with anyone attempting to control the retail value of my artwork especially when the value is 2 to 3 times less than normal. However, I decided to make an exception in this case for a few different reasons:

1. I really needed some cash. I’ve had a bike on layaway forever and had to borrow some money to pay off the balance before my down payment was forfeited.
2. I’m pretty good friend with the organizers and they were giving all proceeds to different charities.
3. I had came up with a theory as to how I could create work in a shorter period of time that still embodied the basic style of my normal artwork.

So, how did it all work out? Great question! I worked out pretty well, I sold 13 out of 14 (I knew adding a hobbit was a bad idea… noone needs those hairy little toes leaving jam on the carpet…), paid off the bike loan, facilitated the donation of $130.00 to charity and acquired a new way of creating artwork thus giving life to the Mutations series.

Let’s Get Mutated

The basic idea came from an article I read years ago written by Paul Fujita outlining his process of carbon transfer using acrylic medium. I always thought that this was a cool idea, but never really had a way to incorporate it into my own work. Then it dawned on me… I had all these drawings laying around that I think are pretty cool, but people don’t really ever buy them at my shows – I think it’s because they are just black and white? Whatever the reason, I can’t seem to sell them and there’s no chance in hell that I’m coloring them in. So I photocopied a grip of them, splashed a bunch of bright colors on some wood and went to town with the acrylic media transer process. I think it turned out really well in the end. The piece retain the detail of my normal work without me having to make all of those tiny, tiny lines. I was able to cut creation time of the pieces by a landslide which made it much easier for me to fork them over for a third of the cost.

Look! A Picture!

Here’s an example of what I have been talking about. On the left you will see the original drawing and on the right, the Mutation. Notice how the composition has not been radically altered, but elements have changed well beyond that of simple embellishment.

Why Mutations?

I was struggling with a name for this series. The only thing that made any sense was Theme and Variation. I think that the definition fits the series well and I like the musical association, whenever I hear “Theme and Variation” I get this unsettling visualization of sitting on a brightly colored rug in Kindergarden while some mean lady with a fake smile belted out verse after verse of “Do Your Ears Hang Low?”. Hey lady! do you really thing that I want to sing after stomaching warm milk and stale crackers?!?!? I think not! Go stand in the corner no cookies for you…

Anyway, the thesaurus told me the Mutation is a synonym for Variation and the only flashbacks I get when I hear the word are of the warm an soothing variety… much like the Beck album of the same name. And let me get stuck down with lightning as I type if I fail to mention that it was only through the process of mutation that the ninja turtles were able to save New York City from the dastardly deeds of Super Shredder and his Mighty Technodrome. Also, without the process of mutation, atheists would have little or nothing to argue with when they meet an unsuspecting creationist.

Mutation.

It’s a wonderful thing!

The Problem

I had a rather large chunk of css that I needed to print during the wp_head action, but I only wanted it to be printed on pages and posts that use the shortcode. This was a bit of an issue because you cannot include any logic inside your shortcode handler function that would help you out with the wp_head action. The shortcode is parsed during the the_content filter which fires afters the wp_head action… errrrr… it still hurts to think about… but it doesn’t have to!

Lets Define a Class

class red_text{
	var $shortcode_name = 'red';
	var $pattern = '<!-- red-text plugin -->';
	var $posts_content = '';
}

Here we have defined a class named “red_text” which contains 3 properties:

1. $shortcode_name: This is the actual name of the shortocode that a user would type in between square brackets. In this scenario a user would use [red] if they wanted to use this shortcode in a post or a page.
2. $pattern: This is a string that contains an html comment which serves two purposes… it will enable users to easily identify code that our plugin prints and it will give us something to test against… basically, if this string is in the post_content, our script will know that it should include the css.
3. The third and final property is $posts_content. We are declaring it as an empty string.

Adding a Constructor

class red_text{

	var $shortcode_name = 'red';
	var $pattern = '<!-- red-text plugin -->';
	var $posts_content = '';

	function red_text() {

	}
}

Since we are using an object, we will need to define a constructor. The constructor is a method that is called whenever a new instance of the object is called. For this example, we will store all of our hooks in this method. It is important to note that I am using php4 object syntax here, meaning that the name of the constructor is the same as the name of the class.

The Shortcode

function red_text() {
	add_shortcode( $this->shortcode_name, array( &$this, 'shortcode' ) );
}

function shortcode( $atts, $content = null ) {
	$o = '';
	$o.= "\n\t" . $this->pattern;
	$o.= "\n\t" . '<span class="' . $this->shortcode_name . '">' . $content . '</span>';
	return $o;
}

Here we have registered a shortcode in the constructor and defined a handler method for it. Notice that the handler will return a string that includes the $pattern property. This is crucial!

Should I include the css?

function include_css() {
	global $posts;
	$o = false;
	if( !empty( $posts ) && is_array( $posts ) )
		foreach( $posts as $post )
			$this->posts_content.= apply_filters( 'the_content', $post->post_content );

	if( !empty( $this->posts_content ) )
		if( strstr( $this->posts_content, $this->pattern ) )
			$o = true;

	return $o;
}

The next method that we will need to add is include_css(). When I read the name of the method, it is a question: “Should I include the css?”. Let’s take a closer look on what is going on here:

1. The scope of the $posts variable is set to global. This is a variable that WordPress generates for us by default, if there is a post, page or attachment in the loop, $posts will be an array of objects.
2. Next, we define variable $o as false. This is the default answer to the question: “Should I include the css?”.
3. Now we will need to loop over the $posts array. Each iteration, we will append the value of $post->post_content to the property $posts_content. This will give us a string containing the contents of all posts in the current WordPress Loop. Please note the the value of $post->post_content is filtered using the “the_content” filter, This filter will parse our shortcodes, thus rendering the html comment stored in the $pattern property.
4. The next set of code is a nested conditional. Basically, it searches through our $posts_content property and tries to find a match for $pattern. If a match is found, it will change the value of $o to true.
5. Finally, the value of $o is returned.

Time to Print The CSS

function css() {
	$o = <<<EOF
{$this->pattern}
<style type="text/css">
.{$this->shortcode_name}{
	color: #f00;
	}
</style>
EOF;
	print ( $this->include_css() ) ? $o : '';
}

This method is simply named “css” and will print a style tag only if the include_css() method returns true. Please bear in mind that we will need to add a hook for this new method. See below for finished class.

The Complete Object

$my_red_text_shortcode = new red_text();
class red_text{

	var $shortcode_name = 'red';
	var $pattern = '<!-- red-text plugin -->';
	var $posts_content = '';

	function red_text() {
		add_shortcode( $this->shortcode_name, array( &$this, 'shortcode' ) );
		add_action( 'wp_head', array( &$this, 'css' ) );
	}

	function shortcode( $atts, $content = null ) {
		$o = '';
		$o.= "\n\t" . $this->pattern;
		$o.= "\n\t" . '<span class="' . $this->shortcode_name . '">' . $content . '</span>';
		return $o;
	}

	function include_css() {
		global $posts;
		$o = false;
		if( !empty( $posts ) )
			foreach( $posts as $post )
				$this->posts_content.= apply_filters( 'the_content', $post->post_content );

		if( !empty( $this->posts_content ) )
			if( strstr( $this->posts_content, $this->pattern ) )
				$o = true;

		return $o;
	}

	/* Style the Shortcode's Output */
	function css() {
		$o = <<<EOF
	{$this->pattern}
	<style type="text/css">
	.{$this->shortcode_name}{
		color: #f00;
		}
	</style>
EOF;
		print ( $this->include_css() ) ? $o : '';
	}
}

You can use this code in your themes’ functions.php file or turn it into a plugin by adding the appropriate code to the top.

I’ve been working on a new plugin for WordPress which enables users to update all of their uploaded images after they have changed the Media Settings for their installation. The Bulk Image Resize Utility is currently in the beta stages of development and I would like your input on it’s usability. If you have a minute or two, please download the plugin and take it for a test run on your development server.

Shockingly, I was meet with questioning eyes… So a few websites were loaded up – on two separate operating systems + multiple browsers and to my surprise, all browser-rendered text was anti-aliased…

The conversation ended with me saying something like, I’ll have to show you a screenshot sometime. Here is that screenshot, taken from this very post:

A Screenshot of this post taken from Firefox 3.5.3 running on Windows XP

Please compare the screenshot’s title with the actual, browser-rendered title at the top of the page. Notice how in the screenshot, all text is aliased. Your browser may or may not be anti-aliasing the text.

So this leaves me a bit confused. What controls this? Why do I see aliased text while others see anti-aliased?

Is it my machine…

The operating system…

The Browser…

If you have any input, please post below.

One thing that I noticed was that the value of the constant TEMPLATEPATH always points to the “parent” theme. Which, after some thought, is to be expected. However, I was left wondering, How do I access custom files that I have put inside my child theme’s folder?

After some digging around in the core, I was able to piece together this solution:

$themes = get_themes();
$current_theme_name = get_current_theme();
$current_theme = $themes[ $current_theme_name ];
$templatepath = WP_CONTENT_DIR . $current_theme['Stylesheet Dir'];

Here, we have defined the variable $templatepath which we can use to find the path to any custom file in our child theme.

Hope this is useful to someone.

Please note, this solution will only work on versions of WordPress 2.6 or greater.

Second ever screen-cast highlighting the Custom Header functionality of the Platypus Theme.