As you probably know, since the last redesign I started indexing and saving the colors of each image in each post. Of these colors, 10 are selected and presented on each image page. You can find these pages by selecting a thumbnail in the ‘Quick Look’ section of a post. (Depending on your screen size this section is in the left sidebar or above the full post). I am slowly working my way back through all posts on this website with the ultimate goal to index every image ever published here on DI. At the moment all images uploaded in July 2012 and later are indexed. Of course this indexing is just the start of something bigger and I am happy to announce that since yesterday it is possible to download the color palettes to your computer. This idea isn’t unique all credits for that go to Dribbble. If you’re a visitor of that website, you know they have downloadable color palettes, I really liked that idea and decided to try the same here on DI.
How does it work?
For you it’s very simple, head over to an image page, for the rest of this post I will use this beautiful photo made by Sergey Semenov as example. When you open the page belonging to the photo you will see a section with information about that image. The first details you see is the color palette. Click on the icon before the palette and your file is being downloaded… Simple as that!
Or not… It isn’t possible to open .aco files directly in photoshop. Of course I checked with aco files from other websites, but for most of them, opening directly after downloading will result in an error message like this one.
The solution is simple, but one step extra. You have to load the swatch in the swatches panel of photoshop. If you don’t have this panel, go to ‘Window’ and select ‘Swatches’.
When you have your swatches panel ready, click on the dropdown icon in the corner and select ‘Load Swatches’. Search for the .aco file you just downloaded and select that file. Once the file is imported you will have 10 colors in your swatches palette. And yes, these are the colors you just saw on the website :).
How did I make this?
I can tell you, it took me some time to get this fully working and I was very, very happy when I got it all working. Here is how I did it (you need to understand a little bit of WP custom taxonomies). There are some files and scripts you need to use to make this work. The first thing you need is this script called Color Thief, which makes it possible to get the colors of each image.
All colors of each image are stored in a database, using custom taxonomies and their terms. The custom taxonomy is ‘Colors’ and all color values are the terms of this taxonomy. When an image is uploaded, up to 200 colors are extracted and saved in the database, but only 10 are shown on the website. To do this I loop through all terms of the color taxonomy, increment the count with one after each loop and do this until the $count variable reaches 9 (count starts at 0 so 0-9 is 10 values).
ID , 'colors');
//Set the count to zero
$count = 0;
//Loop over each item since it's an array
foreach( $terms as $term ) {
//Only output 10 colors
if($count < 10){
//Output every color as a link with its own background-color and add the name.
echo ''.$term->name.'';
//increase $count with one
$count ++;
}
}
?>
This is all you need to get the 10 color on the page. Now it’s time for the tricky part… adding them to an .aco file and make that file downloadable. I am not sure the way I do this is the perfect way, but it works and for now I am happy with it. First of all you need to download the aco.class.php file available here. Upload this file to your server and remember where you put it. Next create a new file and call it something like aco-generator.php (or whatever you want) this is the file which is going to generate the .aco file. Start the file with this:
add(array("Unique name" => array(R, G, B)));
}
//Once done, output the file (this is to download the file to your pc)
$aco->outputAcofile();
?>
So, we have our colors and a function to create and download a palette. But how do we get the colors of the page you’re on into the RGB array on our aco-generator page? You’re on one page, on that page you have the color codes, but these need to be transferred to another page. Normally when you go to another page all variables of the previous page are gone, unless you save them some way. I decided to use PHP Session Variables to do this. Time to go back to the first function where I generated the colors and showed them on the website. Here we need to save the values in a session variable.
ID , 'colors');
//NEW LINE: Get the color code without the '#'
$trimmedterm = substr($term->name, 1);
$count = 0;
foreach( $terms as $term ) {
if($count < 10){
//Output every color as a link with its own background-color and add the name.
echo ''.$term->name.'';
//NEW LINES: check if the session is already set, if so, clear the current value and add a new value. As you can see, my variable is 'colorcode' with a number behind it. So I get 10 variables: colorcode0 - colorcode9.
if(isset($_SESSION['colorcode'.$count])){
unset($_SESSION['colorcode'.$count]);
$_SESSION['colorcode'.$count] = hex2rgb($trimmedterm);
}else{
$_SESSION['colorcode'.$count] = hex2rgb($trimmedterm);
}
//NEW LINES: same as above, but now I want to save the HEX color name. Those two can be combined, that's up to you!
if(isset($_SESSION['colorname'.$count])){
unset($_SESSION['colorname'.$count]);
$_SESSION['colorname'.$count] = $trimmedterm;
}else{
$_SESSION['colorname'.$count] = $trimmedterm;
}
$count ++;
}
?>
And there you have it, now we are able to use these variables on other pages as well. One thing you’ve probably noticed is the hex2rgb which I use to store a value into my variable. Because my term values are HEX color codes, and I need RGB color codes for the .aco palette I need to convert them. So be sure to include this code snippet somewhere on your page.
Next we have to read the values in our aco-generator file:
add(array("#".($colorname) => array($color[0], $color[1], $color[2])));
}
$aco->outputAcofile();
?>
That’s it, our values are now stored on our image page & the generator file can read these values and add them to the .aco file. Now there is one thing left… Giving the user an option to download the palette. We want to do this on the same page as where the palette is present, without the user leaving this page. This is very simple, you can create a link and point that link to your generator file. Because that file only outputs the .aco palette you’re not redirected there, but you stay on the same page and the file is being downloaded to your PC.
Click here to download this color palette
I hope you enjoy this new function, simply click any icon before the palettes and your color palette will be generated and downloaded. If you encounter any errors, or have any questions, feel free to leave a comment.
