Color Thief WordPress Plugin

Color Thief is a slick javascript that grabs a color palette from images. I found it after talking to an art professor who was looking to help future art teachers reflect on their work in different ways. Color palettes seemed an interesting way to get at that.

I was talking to Larry about this earlier and he wanted to look at color usage for ads in different magazines. I didn’t have any handy but thought I’d throw a few other websites in the mix and see what they look like. It opens up some interesting ways to look at all sorts of visual elements. I don’t know if it necessarily means anything but it provides you the opportunity to argue one way or another. It’d be a fun way to look at ads for toys and the whole gender thing. To make it accessible to people, I made a WordPress plugin.

The NRA

I was interested in the caucasian flesh tone. I hadn’t noticed that all but one¹ of the people were white prior to seeing that.

Garden & Gun

(Larry’s suggestion)

CNN

How’s it work?

It took a bit to get somewhere decent-ish mainly because I spent some time solving a problem that didn’t exist.²

If you’ll look at the comments below, it’s chunked out and described. If you want the functioning plugin, grab it from Github.

One problems that’s only sort of fixed is that in order to have multiple instances of color thief on the same page, they need to have unique IDs for the image and divs. I did this for now by grabbing a chunk of the image. That’s all the $unique stuff you see popping up throughout. It works decently unless your have images that share that particular portion of the file name. I didn’t use the rand() option for a few reasons³ but maybe there’s a better alternative out there.

Color Thief can do more than 4 colors. I just chose that randomly. A slicker plugin would let you set the color number via a shortcode option. I think I have an idea how to do that but it’s not happening today.

The colors are set to be 100% width and 20px in height. You can override that in the shortcode and should be able to add additional styling via CSS. The divs are named .stolencolors (the whole set) and .ctcolors for the individual color blocks.

As always, the kind people of the Internet made this possible. The initial plugin is from Lokesh. Roundedbygravity shared the code I used to move from single colors to pallets and I looked up lots of little things along the way which I’ve neglected to adequately document.

//kicks off our wp plugin and sets up the shortcode
function colorthief_shortcode($atts, $content=null) {
    $a = shortcode_atts( array(
         'url' => '',
         'width' => '100%',
         'height' => '20px',
    ), $atts);
//grabs a chunk of the image name to help fake a unique ID
    $unique = substr($a['url'],-8,-4); 

//sticks the image in and creates the divs- if you don't want to show the image you should be able to hide it via CSS 
	return '
    <img class="cthief" id="theimage'.$unique.'" src="'. $a['url'] .'" />
<div class="stolencolors">
      <div id="mydiv_' . $unique . '_a" style="width:'. $a['width'] . ';height:' . $a['height'] . ';"></div>
      <div id="mydiv_' . $unique . '_b" style="width:'. $a['width'] . ';height:' . $a['height'] . ';"></div>
      <div id="mydiv_' . $unique . '_c" style="width:'. $a['width'] . ';height:' . $a['height'] . ';"></div>
      <div id="mydiv_' . $unique . '_d" style="width:'. $a['width'] . ';height:' . $a['height'] . ';"></div>
</div>
  <script type="text/javascript">

    jQuery(document).ready(function() {
      //Make sure image is loaded before running.
      colorChange();
 function colorChange(){
      var $myImage = jQuery("#theimage' . $unique . '");
      var colorThief = new ColorThief();
      
      var cp = colorThief.getPalette('.'$myImage[0], 4, 5'.');
//sets the background color of the various divs      
      jQuery("#mydiv_' . $unique . '_a").css("background-color", "rgb("+cp[0][0]+","+cp[0][1]+","+cp[0][2]+")");
      jQuery("#mydiv_' . $unique . '_b").css("background-color", "rgb("+cp[1][0]+","+cp[1][1]+","+cp[1][2]+")");
      jQuery("#mydiv_' . $unique . '_c").css("background-color", "rgb("+cp[2][0]+","+cp[2][1]+","+cp[2][2]+")");
      jQuery("#mydiv_' . $unique . '_d").css("background-color", "rgb("+cp[3][0]+","+cp[3][1]+","+cp[3][2]+")");
    }

    });


  </script>';
}
//adds the shortcode
add_shortcode( 'colorthief', 'colorthief_shortcode' );

//adds the color thief js
function colorthief_scripts() {
    wp_register_script( 'color_thief', 
                       plugins_url( '/js/color-thief.min.js', __FILE__ ),
                       array(),
                       'scriptversion 1.5.8', 
                       true);
  
//enque scripts
    wp_enqueue_script('color_thief');

 
 
}
add_action( 'wp_enqueue_scripts', 'colorthief_scripts' );