Color Posts plugin: how to use Jetpack libs in your own plugin

I’ve talked about customizing Jetpack in the past, and I also mentioned how you can integrate Jetpack features in your theme.

How about including these features in a plugin? As a proof of concept I just released Color Posts, a plugin that uses 2 very useful classes that are bundled with Jetpack.

Are you familiar with the Ryu Theme? It’s a great photography theme, and it comes with a nice small feature: Background color for an image post will automatically match the uploaded image.

Color Posts allows you to do just that. Write a post, insert an image (or set a Featured Image), and hit publish. The background color for that post will match the image you used in the post.

This very post is a good example: I didn’t insert any image in the post but I added a Featured Image. That image is mostly green since it’s the Jetpack logo. As a result, this post’s background is green.

I used 2 Jetpack classes to achieve this result: Tonesque and Jetpack_PostImages.
– Tonesque grabs an average color representation from an image. (ref)
– Jetpack_PostImages finds an image to display alongside/in representation of a specific post. (ref)

Take a look at how I did it on GitHub, or install the plugin on your site and give it a try!

Customize the plugin to fit your needs

While a custom background fits well with the theme I use here, you might want to use the plugin to change other colors on your site; it could be the links in the posts or borders around the images: that’s up to you!

I included an example in the plugin’s FAQ show you how to use the colorposts_css_output filter to customize the CSS output of the plugin.

It’s worth noting that the plugin gives you 2 values to choose from: the first one is the color that was created from the image, and the second is the contrast of the image.

I use that second value on this site to adjust the color of the title: if the image (and consequently the post background) is mostly dark, the title will be white; if the image is light, the title will be black. Here is how it’s done (note the use of $contrast):

// Adjust site title color depending on body's background color
function jeherve_adjust_title_color( $colors_css, $color, $contrast ) {
	$post_id = get_the_ID();

	$tonesque = get_post_meta( $post_id, '_post_colors', true );
	extract( $tonesque );

	$colors_css = "body { background: #{$color} !important; }
		.site-header .site-branding, .site-header .site-branding a { border-color: rgb({$contrast}); color: rgb({$contrast}); }";

	return $colors_css;
}
add_filter( 'colorposts_css_output', 'jeherve_adjust_title_color', 10, 3 );

Any questions? Any changes you think I should make in the plugin? Let me know!