Addon: Harmonious Color v1.0

[tomyeah]

-- Addon: Harmonious Color v1.1 --

Description:

This pixelpost addon analyses the image displayed in your image_template.html for example.
It will select the color with the Hue value that occurs the most in the image.
The output will be 3 hex color values, a "dark" one for big background areas, a "normal" color for smaller areas and a "bright" color for fonts.
If you don't like the automatically picked colors, just go into the admin panel and look in the "edit" tab of the corresponding image.
Here you can modify the 3 colors to your needs.


Requirements:

1.) Pixelpost 1.6 or later

2.) This plugin expects that the image folder is "/images" (pixelpost default setting)


Installation:

1.) Extract the file "admin_harmonious.php" into the "/addons" folder of your pixelpost installation.

2.) Create a folder "/cache" in your pixelpost base directory (its the same place with the other pixelpost folders "addons", "admin", "includes", ...)

3.) CHMOD the folder "/cache" to "777" for write access


Usage:

The following tags can be used within your pixelpost template:

/* these tags give you a hex color value beginning with # (for example #ffffff)*/
<HARMONIOUS_DARK>
<HARMONIOUS_NORMAL>
<HARMONIOUS_BRIGHT>

/* these tags give you a hex color value without # in the first place (for example ffffff)*/
<HARMONIOUS_DARK_CLEAN>
<HARMONIOUS_NORMAL_CLEAN>
<HARMONIOUS_BRIGHT_CLEAN>


User-Modifications of the "admin_harmonious.php":

1.) Lines 251 to 269 define the brightness[1] and saturation[2] levels for the 3 output colors.


For users of the old admin panel modification from v1.0:

Just delete the modified "images_edit.php" in the "/admin" folder and revert your old "images_edit.phpold" to "images_edit.php".
Delete the old "harmonious.php" in the "/addons" folder.


For questions and suggestions email to: harmonious(at)tomyeah.com


Download: harmonious_color_v1.1.zip (http://tomyeah.com/images/harmonious_color_v1.1.zip) (8KB) (Last Update: 19.5.2007)

With the help from schonhose (http://forum.pixelpost.org/member.php?u=2683)'s magical fingers it was possible to merge the old admin panel mod and the harmonious addon into one single file. this makes the installation easier and is bullet proof for further pixelpost updates.

[chaoss3]

This is so absolutely awesome, and I'd love to implement on my own site, but I'm a bit unskilled when it comes to putting things like this into action. Where would I place these tags to get this to work? Thanks for the help...and the add on I've been looking for for almost a year! Great work.

[codepoit]

Thanks, Tom! I can't wait until I have some time to implement this on my site!

[witty]

Cool, awesome, cool !!!

I guess the tags won't work when used in CSS file? They didn't for me anyway. I had to add style tags to the head of my various templates. Is this by design or the only way to do it... or am I missing something?

Thanks!


-Witty

[greentraveler]

Cool, awesome, cool !!!

I guess the tags won't work when used in CSS file? They didn't for me anyway. I had to add style tags to the head of my various templates. Is this by design or the only way to do it... or am I missing something?

Thanks!


-Witty

Same thing here...but it's an AWESOME addition to PP! Thanks.

:D

[codepoit]

I haven't updated the code of my site in quite some time, but unless something has changed with v1.6, PP tags have never worked in the CSS file. PP tags are to be used in the template HTML files.

Someone please correct me if I'm wrong...

[jaywilliams]

The easiest way would be to add some inline css into the page header, like so:

<style type="text/css" media="screen">
body{
background-color: <HARMONIOUS_DARK>;
color: <HARMONIOUS_BRIGHT>;
}
</style>

You could set all of the nitty-gritty info in an external css file.
Just use the inline for colors only.

[greentraveler]

The easiest way would be to add some inline css into the page header, like so:

<style type="text/css" media="screen">
body{
background-color: <HARMONIOUS_DARK>;
color: <HARMONIOUS_BRIGHT>;
}
</style>

You could set all of the nitty-gritty info in an external css file.
Just use the inline for colors only.

That's what works for me.

[tomyeah]

@greentraveler: hey, it seems to work on your site :D its good to see that my chunky code works on other sites too ;)

@chaoss3: maybe i'll release a whole theme using this addon ... im currently using it on my site (http://pixelcandy.tomyeah.com). but its not ready ... xhtml validation stuff and so. you can use this addon in general in your "image_template.html" of your template folder, whereever you see a hex color value like #345678 or so. you just replace the whole color with one of my tags ... thats it :D

regards, tom.

[dakwegmo]

Nice work tomyeah I got it working on my site, but the color complements for many of my photos turn out to be purple and pink which makes my blog look very girly. I think I need to go shoot some photos with less girly colors.

[tomyeah]

Nice work tomyeah I got it working on my site, but the color complements for many of my photos turn out to be purple and pink which makes my blog look very girly. I think I need to go shoot some photos with less girly colors.

wow, so wonderful butterflies you got there :D i just came back from butterfly garden this morning, funny coincidence ;)

[dakwegmo]

wow, so wonderful butterflies you got there :D i just came back from butterfly garden this morning, funny coincidence ;)

Thanks! I'll be watching your blog to see how your butterflies turned out.

[witty]

Nice work tomyeah I got it working on my site, but the color complements for many of my photos turn out to be purple and pink which makes my blog look very girly. I think I need to go shoot some photos with less girly colors.

Dude... they're pictures of butterflies. Only mermaids and unicorns get more girly than that. Your "problem" isn't the background-color. You need images of dumptrucks and guns. :p

Just pokin' fun. Great images!


-Witty

[dakwegmo]

Dude... they're pictures of butterflies. Only mermaids and unicorns get more girly than that. Your "problem" isn't the background-color. You need images of dumptrucks and guns. :p

Just pokin' fun. Great images!


-Witty

LOL -- I've got some bulldozers I shot from a helicopter, that should do the trick.

[apoc]

pretty cool. i implemented it on my site. thanks for writing the code.

[ArchY]

Yes very nice, I like it, I use it now http://www.suomi.fr/gallery

[witty]

Hi,

Just wanted to add my site (in my signature) to the list of "I'm using this addon" people. Thanks!


-Witty

[SnowScan]

Thanks, good work

I am using it on my site...

[greentraveler]

Gotta toss more props up for the Admin Interface update...it's working like a champ for me on two different PP installs.

:D

[Spudooli]

What a superb addon Tomyeah. All the sites that are using it look great.
If I wasn't so keen on writing so much to go with my photos, I'd be all over it too.
Just wanted to say thanks for contributing!

[tomyeah]

@greentraveler: i might enhance the admin interface with some color picker on the photo soon or i'll give a limited selection of picked colors to the user ... we'll see :D

regards, tom.

[jdleung]

Great addon!

[greentraveler]

@greentraveler: i might enhance the admin interface with some color picker on the photo soon or i'll give a limited selection of picked colors to the user ... we'll see :D

I use this set-up (http://www.macosxhints.com/article.php?story=20060408050920158&lsrc=osxh) as my color picker and it works beautifully on my Mac in concert with your modified Admin Page.

[tomyeah]

With the help from schonhose (http://forum.pixelpost.org/member.php?u=2683)'s magical fingers it was possible to merge the old admin panel mod and the harmonious addon into one single file. this makes the installation easier and is bullet proof for further pixelpost updates.

regards, tom.

[Dennis]

really, there was nothing to it. There are some things to add before I consider it done. Tom and I had contact over MSN and we'll keep you posted. :)

[davenewt]

I love it tomyeah, thanks... have implemented it on my site, http://www.mondaymorningphoto.com

One thing though - I had to change a couple of the paths... in case anyone else gets a lot of errors popping up when they log in to their admin page (I'm using PP 1.5)... I changed lines 241 and 242 of the admin_harmonious.php from:

$image_path = "images/".$image_name;
$cached_string = "cache/" . md5($image_name);

to...

$image_path = "../images/".$image_name;
$cached_string = "../cache/" . md5($image_name);

...which got everything working (well, no errors when I log in to the admin part of the site... the colours were working fine before that anyway!)

Thanks again for a cool addon!
D.

[davenewt]

Wait a minute. I've just noticed that changing those lines ^^^ breaks the addon when viewing the site.

If I change the lines back again, the colours work... but the admin part of my site throws up a whole bunch of errors...!

Warning: getimagesize(images/20070526002326_1576_deep_blue_20070412.jpg): failed to open stream: No such file or directory in /addons/admin_harmonious.php on line 185

Warning: imagecreatetruecolor(): Invalid image dimensions in /addons/admin_harmonious.php on line 196

Warning: imagecopyresampled(): supplied argument is not a valid Image resource in /addons/admin_harmonious.php on line 203

Warning: imagesx(): supplied argument is not a valid Image resource in /addons/admin_harmonious.php on line 205

Warning: imagesy(): supplied argument is not a valid Image resource in /addons/admin_harmonious.php on line 206

Warning: array_count_values(): The argument should be an array in /addons/admin_harmonious.php on line 218

Warning: natsort(): The argument should be an array in /addons/admin_harmonious.php on line 219

Warning: array_reverse(): The argument should be an array in /addons/admin_harmonious.php on line 220

Warning: array_keys(): The first argument should be an array in /addons/admin_harmonious.php on line 245

Warning: fopen(cache/15fdbaa26b4821a84c2de120ac7d64a4): failed to open stream: No such file or directory in /addons/admin_harmonious.php on line 277

Warning: fwrite(): supplied argument is not a valid stream resource in /addons/admin_harmonious.php on line 278

Warning: fclose(): supplied argument is not a valid stream resource in /addons/admin_harmonious.php on line 279

I guess it's better that way (so people actually see the coloured backgrounds), but any suggestions on how to get rid of the errors in the admin panel?!

D.

[tomyeah]

it needs pixelpost v1.6 ... just get the latest version from the front page www.pixelpost.org ... sorry i forgot to change that in the description :D

[davenewt]

That worked, thanks tomyeah :-)

[mike]

At first I would like to say thanks for this great addon.

I have implemented it to my side but their is a problem with it.:confused:
It works only for the footer not for the background.
www.three-deuces.de/blog/
Did anyone knows this issue?

Thanks a lot in advance!

Cheers, Michael

[witty]

Mike,

In your .css file, you have the background-color specified as #000 (black) for the header and photobox, which will override the background-color of the body. Either remove those lines, or change them to transparent.


-Witty

[mike]

Witty,

thanks a lot.
I removed the color settings in the css file and now it's running fine.

Cheers, Michael

[marc]

wow very nice idea, exactly what I was looking for. I have to check it out asap! thanks for that contribution!

[curank]

It works fine, Thank You!

[Jeff A]

Awesome add-on. Works great on my site. Thanks for sharing this!

[John Warren]

Looks good, but I cannot figure out what files to modify.

I've gotten to the CHMOD part but then I get lost. Can someone please post which files I need to edit and where to place the modifications? I'm not familiar with HTML or CSS for that matter, so it's a little confusing.

Any help would be greatly appreciated!

[dawn]

John Warren,

What you have to do next is put some code into your image template file (the html file in your templates file). For instance, mine is under the Simple template and I adjusted the image_template.html file.

While it was said above to put this into the heading, that didn't work for me. I put the following code in right after the body tag: <body>

So, you would then see this:

<body>
<style type="text/css" media="screen">
body{
background-color: <HARMONIOUS_DARK>;
color: <HARMONIOUS_BRIGHT>;
}
</style>

Then I saved and reuploaded.

You may need to play with your template. Put it between the "head" tags or between the "body" tags to see which works for you.

The code you need to put in:


<style type="text/css" media="screen">
body{
background-color: <HARMONIOUS_DARK>;
color: <HARMONIOUS_BRIGHT>;
}
</style>


I hope that helps.

[pengrus]

Hello Dawn,

Thank you for your instruction. I tried to change the code like you instructed, but the header, navigation, photo title and comment section are still old colors. Do I need to change anywhere else to make them all look seamless?

Many thanks for your help!

[dawn]

Hi, Pengrus,

So, you probably have defined the colors for those in your CSS. Find the CSS you are using. Go through that code and look for things that say background or background-color. You'll want to change those to "transparent." That will allow the other code to come through.

I hope that works for you. :-)

[pengrus]

Thanks Dawn. I tried it and it works. Thanks for the transparent tip.

I have one more question. On the pixelpost default style, Simple template, how can I make the change so that only the thin photo border (frame) changes color per this addon? This will be a nice touch.

thanks in advance!

[wcleong]

Great Addon! I've implemented it on my site, though there is one quirk i've noticed, for some reason, it's not putting the color values in for the most recent image, and replacing the tags <HARMONIOUS_BRIGHT>, etc, with two spaces (looking at the html). for all the other images it seems to work.

Actually, it seems to not work if the showimage variable isn't in the URL. It looks to work on other sites, so i'm not sure what the issue is. though I did notice dakwegmo's (http://www.invisiblegreen.com/) site shows a different color depending on whether the showimage variable is present or not, maybe the same issue?

So, for example, http://pixels.cardboardshanty.com/index.php doesn't work but http://pixels.cardboardshanty.com/index.php?showimage=238 does, even though they are pointing to the same image.

I tried removing all other plugins except this one and it still didn't work, Any ideas?

btw, i'm using the PP 1.6.0

[dakwegmo]

It seems to be a bug in the addon. With showimage specified in the URL, the colors match the colors in the admin panel for the current image. However, when showimage is not specified, either going to / or /index.php then the colors are different.

I did a little digging, and when it's using the wrong colors, it's pulling them from the last photo in the database. Checking the addon I found this:

// basic functions at the frontpage
if ( (!isset($_GET['showimage'])) || ($_GET['showimage'] == "")){
$row = sql_array("SELECT * FROM ".$pixelpost_db_prefix."pixelpost ORDER BY datetime DESC limit 0,1");
} else {

but it should be:

// basic functions at the frontpage
if ( (!isset($_GET['showimage'])) || ($_GET['showimage'] == "")){
$row = sql_array("SELECT * FROM ".$pixelpost_db_prefix."pixelpost WHERE datetime<='$cdate' ORDER BY datetime DESC limit 0,1");
} else {

[wcleong]

Thanks dakwegmo! That was very helpful. I had to make one more change to get it to work, because i wasn't able to login to the admin area once I made that change. so I added one line to set $admin_panel to a global var. This looks to be working on my blog...

Originally (without any modifications):
// we don't do comments if there is no image on display.
if ( $admin_panel != 1 ){
global $pixelpost_db_prefix;
// basic functions at the frontpage
if ( (!isset($_GET['showimage'])) || ($_GET['showimage'] == "")){
$row = sql_array("SELECT * FROM ".$pixelpost_db_prefix."pixelpost ORDER BY datetime DESC limit 0,1");
} else {
$row = sql_array("SELECT * FROM ".$pixelpost_db_prefix."pixelpost WHERE (id='".$_GET['showimage']."')");
}


is now:
// we don't do comments if there is no image on display.
global $admin_panel;
if ( $admin_panel != 1 ){
global $pixelpost_db_prefix;
// basic functions at the frontpage
if ( (!isset($_GET['showimage'])) || ($_GET['showimage'] == "")){
$row = sql_array("SELECT * FROM ".$pixelpost_db_prefix."pixelpost WHERE datetime<='$cdate' ORDER BY datetime DESC limit 0,1");
} else {
$row = sql_array("SELECT * FROM ".$pixelpost_db_prefix."pixelpost WHERE (id='".$_GET['showimage']."')");
}

[marie]

hello,
first:thanks for this addon!
well,i want to change the color for my Black and White image! and i don't understand what i must change in the admin harmonious php...for me it is chinese!:rolleyes:
is there anybody here to help me? please...
thanks
Marie

[DMalty]

I want to be able to give the option of background but the only way I can figure out is through CSS files (which, to my understanding can't be done with harmonious).

Anyone have a suggestion?

http://www.thislldotoo.com

[JETC]

Nope, this addon picks a color that occurs most in the current photo you have. It's really good since it makes your site flows along with your photo. You may want to take a look at this instead http://www.alistapart.com/stories/alternate/

The site tells you how your visitors can pick which alternative css stylesheet they want.

[cipro]

a great piece of instructions thax guys

[DMalty]

If I understand correctly, the issue is that you can not use variables in a CSS sheet (yes/no?). What about a java function. I have never programed java though it seems that if there were a way to put the html code body...background-color:<HORIZONyadayada>...etc into java The stylesheet.js could either do that or send it back to html page that called it.

Please, if I am talking out of my rear, let me know. I am a network administrator, not a coder and trying to learn.

[GeoS]

Yes - you can modify HTML code of site where is called/executed JS function. Thanks to this you can set some logical variables and play with documents CSS dynamicly.

[johnysquid]

I LOVE this add-on but I am having troubles with it working on all my images. I have changed nothing whatsoever in my blog outside of uploading photos on a semi-regular basis, but I haven’t touched any of the HTML or CSS since I installed Harmonious1.1. Does anyone have any advice on this.

Thank you,
Scott

http://thebarm.com/pixelpost

[JETC]

Hrmm....I seem to have problems with harmonious working in pixelpost v1.7.1. Is still suppose to be working or needs updating? It's behaving pretty weird. The couple new images I uploaded kept using the same harmonious hex colors and on the the last (current) one, it didn't generate any hex color code. I tried to add one but nothing happens.

Any thoughts? I really like this add-on

-=edit=-
I can't edit the color in the admin but if I delete the cache file for the image then display the image on a different new page per image then it works. Oh well, beggars can't be choosers :]