Automatically changing the background color of a post based on its images is a fancy effect that you may have noticed on WordPress.com’s Ryu theme. It’s currently WordPress.com’s 7th most popular theme and is also available for self-hosted sites with the same intuitive background changing feature built in.
Jetpack developer Jeremy Herve just released an independent plugin version of the feature cut out of the theme. Color Posts does the following:
- Grabs an image from the post
- Samples it
- Creates a matching color and a contrast value (black or white)
- Changes the post’s background color to match the image
Jetpack must be active in order for Color Posts to do its magic, as it utilizes the Tonesque and Jetpack_PostImages classes.
Here’s how it works: Color Posts uses the Jetpack_PostImages class to run through a few different methods to select an image representative of the post. Tonesque grabs the color index for each of five sample points of the image and then finds the average color of the image based on those five sample points. It creates a color object and checks the contrast against the main color, giving either black or white for use with opacity.
The result is beautifully matching backgrounds for each post. The Ryu theme demo is a good example of this feature in action.
Extend Color Posts to Color Match Other Elements on Your Site
Herve explains in the plugin’s FAQ how it can be used for more than just matching the background of a post to an image. The color matching feature can be applied to post links, image borders, title, etc. He includes example code for building your own CSS from the colors grabbed by the plugin to change other elements on your site.
Herve’s post gives you an example of how he changes the color and contrast of the title on his site based on the values retrieved by the plugin. If you want to use your own image, instead of letting Jetpack pick, Color Posts lets you do that via the colorposts_image_output filter. The plugin also lets you change the default color assigned to posts without an image using the jetpack_open_graph_image_default filter.
Theme developers who already support Jetpack can add color matching to their themes using this method or by offering support for the plugin. Color Posts brings post designs alive with self-aware color matching capabilities. You’d be hard-pressed to do a better job matching your background colors manually each time – but who would want to? This plugin does it all automatically with a little bit of magic.
Color Posts can be downloaded from WordPress.org but be advised that it’s still a work in progress. You can contribute feedback and code on GitHub.
Its really a magic…. Incredible