Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Im looking for a smart way to change the background color for a page, but taking the #xxxxxx value from the dominant color of the headline picture.

In twenty eleven theme, I can set a random image for each page loaded, I would change the background color to match the picture.

I know that's possible but I don't know how to modify the CSS or the template to take the value from a specific function (I found this that seems promising:

http://stackoverflow.com/questions/2541481/get-average-color-of-image-via-javascript

Is that too complicated?

thanks alot

share|improve this question
    
If you want to use php instead of jQuery take a look at this post: board.phpbuilder.com/… Cheers, Ari. –  WPMU-DEV Ari Apr 5 '13 at 15:14
    
The code just works with JPG and I've PNG obviously :) But anyway... I'm supposed to put the code in the funcion.php and to call it from the header.php, so I can get back the array with colors (even just one that is supposed to be the dominant). But now I don't know how to pass the value to the CSS, otherwise I'm supposed to write code in the php to overpass the CSS and assign the color to the background (or the menu) directly. –  Apteryx Apr 5 '13 at 15:57

1 Answer 1

You can use a jQuery plugin called Color Thief.

Files needed:

  1. jquery.js (is included in WordPress)
  2. quantize.js (download from color-thief github page)
  3. color-thief.js (download from color-thief github page)

Wordpress setup:

Open functions.php (located in your theme's folder) and add the code below to load the files in WordPress. In this case I placed all files in the "js" folder.

//color thief demo

wp_register_script('quantize', $base . '/js/quantize.js');
wp_enqueue_script('quantize');

wp_register_script('colorThief', $base . '/js/color-thief.js');
wp_enqueue_script('colorThief');

wp_register_script('main', $base . '/js/main.js');
wp_enqueue_script('main');

As you can see I also created a main.js file to store the code that will run the color-thief code.

main.js code:

jQuery(document).ready(function($) {

    $("#target").load(function(){

        // Dominant Color
        var dominantColor = getDominantColor($(this));

        //change background
        $("body").css("background-color", "rgb("+dominantColor+")");
    });        
});

The code above will look for an image with id = target.
The load() function will ensure that the image has already loaded before the code is executed.

Next the value of the dominant color is stored in a variable (the value returned is 3 numbers, which form the RGB color)

We use that same variable to change the color of the background.

The HTML setup:

The TwentyEleven theme loads the image through a function in the file header.php, but you can still edit the image tag and add an image ID to be able to find it easily with jQuery.

In this case my image ID is target:

<img 
    src="<?php header_image(); ?>" 
    width="<?php echo HEADER_IMAGE_WIDTH; ?>" 
    height="<?php echo HEADER_IMAGE_HEIGHT; ?>" 
    alt="" 
    id="target" />

And that should do it. Once the page loads, the jQuery script will look for an image with id = target. Get the dominant color of that image, and then apply it to the background of the page automatically.

You can see a demo of this working here. (refresh the page a few times to until it loads a different image)

share|improve this answer
    
+1, though I still think the question ought to be closed as off-topic –  Johannes Pille Apr 5 '13 at 14:23
    
@JohannesPille would be a pity, lots of interesting info here already! –  dalbaeb Apr 5 '13 at 15:27
    
I'm not smart enough, I'm trying to do this in a Wordpress based site, with twentyeleven theme. I understand the process but I don't really know how to call js functions in php pages and how to pass the color value to the CSS that control the background color... i'm DUMB –  Apteryx Apr 5 '13 at 15:55
    
You don't need to "pass the value to the css", gdaniel's last line of code sets the css. You just have to figure how to insert JS. The preferred method would be via wp_enqueue_script. And to return to less constructive commenting: "not yet knowledgeable enough" != "not smart". And @dalbaeb: "interesting" != "within the scope of WPSE". –  Johannes Pille Apr 5 '13 at 16:01
    
OK i'm not yet knowledgeable enough to do that.. but thank you :) –  Apteryx Apr 5 '13 at 16:24

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.