template that picks its colors from each picture

[tomyeah]

hi,

i wrote some pixelpost addon that picks the primary, most used, most saturated color tone (Hue of HLS color space) and creates 3 basic shades of it to be used in the template. its done "live" at the moment, i think it could be done as and upload- or admin-addon and the color data would be saved in the database.

check it out and tell me what you think about the changing color shemes sample here (http://pixelcandy.tomyeah.com/) . click through a few pics ...


regards, tom.
http://tomyeah.com/images/theme.jpg (http://pixelcandy.tomyeah.com/index.php?showimage=285)

note: this template is not published yet, since it would be too difficult to implement or modify for common users.

i've made an addon out of the color changing module which can be downloaded here (http://forum.pixelpost.org/showthread.php?p=45525).

[jaywilliams]

Very neat addon.
The template seems a little "boxy" (is that a word?), but I really LOVE the concept. Very well done!

It reminds me of those LCD screens that have a backlight that changes the wall color depending on what you are viewing. (Supposedly, it boosts contrast in the image)

[tomyeah]

boxy ? i tried to find some minimalistic themes without image elements ... (didnt want to color tone each button in gd)

couldnt find one, so i made a quick one myself ... maybe you can recommend some nice fully css template (without any images as graphic elements).

i could add some nifty-corners script maybe :D

[austriaka]

I like the idea very much. Only thing is that many colours get some shade of brown with your algorythm what I don't like at all.
It is logical, there is a very funny little program which does similar thing with google keywords:
http://douweosinga.com/projects/wordcolor
It is a very funny thing playing around with that, but with "common words" you get a lot of brown...

KArin

edit: sorry, the program doesn't seem to work anymore...

[dhdesign]

I also like this idea - very nice!

[mike]

Like the idea, too.
Nice one!

Cheers, Mike

[tomyeah]

@austriaka

mhm, brown ... i like that color :)
but it would be easy to walk down the color table to bypass certain tones or tone ranges ... or to select certain tones or ranges that you prefer.

ive tried a 2 tone version before. but its not that easy to find 2 harmonious colors that really fit to the picture ...

i could think of this beeing used as an upload addon. like when you uploaded the pic via the admin interface you pick at least one color from the given color table of primary tones in that picture ... so it would be one or two clicks more per upload.

regards, tom.

[babyben]

I think that's a brilliant idea - would love to see this as an addon! :)

[tomyeah]

i just updated my theme. the graphics are now fully generated by php + gd + freetype, all live :D

click here (http://pixelcandy.tomyeah.com/index.php?showimage=225) and click through a few images ...

(i know i have a few xhtml errors because of the php calls, but maybe i can fix that later)

regards, tom.

[jaywilliams]

It just keeps getting better and better!

This theme works great with the color-changeing addon.

Great job!

I Love it!

If you want to improve search engine indexing, I would recommend including all of the text that your images contain and putting them in the html code.
Then by using CSS, you can hide the text from normal viewers, while letting the search engines see it, and index it.

You may also want to build a caching system, so php doesn't have to recreate the images every time a viewer loads the page.

[tomyeah]

ive added some comments slide down div. but somehow it flickers sometimes when jumping to next picture ... i dont know if its because the javascript or the css is not cached or so ... maybe somebody knows how to fix that ?!

regards, tom.

[Dkozikowski]

What you're seeing is normal for the way you are hiding the div.

The problem is that your javascript does not hide the div until the page has loaded 100%

Some get around this by hiding the content with a hidden div using css.

There are a few options to search for. Hit up google and I'm sure you will be able to find what you need.

[jaywilliams]

Edit your "hide-wrapper" so it looks like this:

<div id="hide-wrapper" style="display:none;">

Problem solved.

[tomyeah]

thanks jay, i had it in the stylesheet before. but it works better directly in the div tag. do you have some more suggestions how to improve the functionality or visual appearance of the theme ? ive noticed that the form elements cant be styled for safari ... they look a bit wierd with the darker fill color, maybe i should switch dark and bright colors for that area ...

regards, tom.

[jaywilliams]

Actually, after looking at your code, there are a few things you might want to do.

First off, you can remove the "onload" text <body onload="init_effect();"> from the body tag, as it shouldn't be necessary now that you are hiding the div box using that inline CSS.

Secondly, you may wish to export your CSS code to an external file. That way browsers can cache it, which will improve page loading a bit.

Obviously, you would want to keep the CSS entries that are automatically generated by the script, but all of the others could be exported.

For example, this is all of the css that you would want to have in the page itself:
/* @group Keep Embeded */

body {
background-color: #3D3D29;
color: #67674C;
}

#comments, .input {
background-color: #67674C;
color: #FFFFE6;
}

#addcomment {
background: #3D3D29;
border-left-color: #67674C;
border-right-color: #67674C;
color: #FFFFE6;
}

#comments li a {
color: #FFFFE6;
}

#comments li:hover {
background: #3D3D29;
}

a {
color: #67674C;
}

@import url(templates/pixelcandy/pixelcandy.css);

/* @end */

The rest, you could add to your pixelcandy.css file:



#wrapper {
width: 600px;
}
a{
text-decoration:none;
}

#comments{
padding: 10px;
}

#addcomment {
padding: 10px;
border-right-width: 1px;
border-right-style: solid;
border-left-width: 1px;
border-left-style: solid;
}

.input{
margin-top:4px;
border: none;
}

a:hover {
text-decoration:underline;
}

#comment-wrapper {
background-color:#FFFFE6;
text-align: left;
width: 600px;
border: none;
margin:auto;
}
#addcomment-forms {

}


#comment-imageinfo {
padding: 10px;
}

#comment-title {
font-size: 18px;
font-weight: bold;
letter-spacing: -1px;

}
#comment-thumb {
float: left;
}

#comment-thumb-and-image{
height: 75px;

}

#comment-thumb a img{
text-decoration:none;
border: none;
padding-right: 10px;
}
#comment-thumb-info {
font-size: 10px;
text-align: justify;


}

#comments li {
padding:10px;
}

#comments ul {
display: block;
list-style: none;
margin: 0px;
padding: 0px;
width: 100%;
}
@media all {
}
#views {
text-align: center;
padding-left:10px;
padding-right:10px;
padding-top:4px;
padding-bottom:4px;

}

Actually, I have gotten used to Safari, and it's "un-styled" input boxes. I didn't see any problem with their appearance on your site.

Hopefully this helps.

[tomyeah]

i didnt like the dark background for the forms on safari. the input fields looked buggy with the lighting.

http://tomyeah.com/files/temp/forms-safari.jpg

so i used the @media all{} tag, just looks better to me.

you are right about the css stuff ... but until im not done with this, its easier to modify if u have the css next to the html. i had to make some tweaks for IE too, especially with lightbox ...

im still not so happy with the pixelcandy logo on top. maybe i find another nice pixelfont for it ...

regards, tom.

[jaywilliams]

Oh, one thing, are you caching those images that php is generating on the server?

Or is it creating it every time the a user views the page?

[tomyeah]

so far its all live generated on every click. but i guess the zend optimizer caches em anyways, i tested it locally on my apache with osx. its like 0.30% cpu load when i click fast through the gallery. so it doesnt matter :D

[jaywilliams]

It would be quite easy to simply build a simple cache in php.

I would take all of the possible variables that the script receives, and do a MD5 on them. Take the MD5 number as the file name and save the photo to a "../cache/ folder.

Then when the script runs, have it do an MD5 on the input and check if a file that matches that MD5 number exists. And if it does, display that instead.

You may also want to add some "header()" calls to tell browsers to cache the image as well. As normally, all php scripts tell the browser to re-download every time the page loads.

It may seem small, but little speed tweaks here and there will help with page loading performance.

[tomyeah]

ok i got the caching done ... phew, learning so much new stuff :D (tried a few caching methods, i think i got the best now for my project)
got my addon calls for color analyze cached now too. now just need to clean up css and its done.

regards, tom.

Update:

cleaned up the css ...

i need some help for making the colorpicker addon better working when logged in as admin: highlighted source code (http://pixelcandy.tomyeah.com/highlight.php)

so far i just disabled all output when admin session is set, i dont know if that is a common way to disable error outputs on the admins addon page but it worked so far. is that a proper way ? the problem is now, when you are logged in as admin the plugin doesnt work for the home-page and all the colored elements that need the tags wont be displayed.

the only thing to add for the admin addon page would be like checking if the cache dir is writeable and giving some feedback on the addon site.

[webfox]

Tom, beautiful concept. I really hope you consider packaging the core bits as an addon.

I'm trying to figure out what fonts you are using with your image generators. The header with the exif date and the footer with the exposure settings - those look to be the same fontface, what is it? The handwriting and the pixelated font are interesting too.

[tomyeah]

@webfox:

i discovered the handwriting font in the recent release of xampp (http://www.apachefriends.org/en/xampp.html). its an all-in-one server solution from the apache group. AnkeCalligraph.TTF its a freeware handwriting font.

the pixelfont for "pixelcandy" is V5PRD___.TTF (freeware). im still unsure about this one ...

the pixelfont for the exif information is uni05_63.ttf (freeware) , it was just a random selection , initially i wanted to get this LCD type look that you have on old LCD watches, with this grey/green background , like on my old 300d, i wanted to recreate that interface :D maybe ill do it at times.

(you can find all these fonts with google)

regards, tom.

[witty]

Hi,

Just wanted to put my vote in for "this is cool" and for "I hope you make this addon available to everyone". Thanks!


-Witty

[random]

i love this - is it available for download and implementation?
cheers
Jan

[greentraveler]

i love this - is it available for download and implementation?

Second this sentiment and request...I've been manually doing something similar with the background add-on for a while but would love to automate it.

:D

[bjlawrence11]

Beautiful! Very nice addon. It picks complementary colours.

Though, I'm not sure about using that addon with a photoblog that changes it's photo sizes as well. It looses some of the site's consistency, when paired with the changing colours.

But great idea and follow through. ; )

[greentraveler]

Just wanted to continue encouraging Tom to work this into an add-on...it's would add such beautiful functionality to PP.

[alexz]

This would be beautiful too implement. I could consider to donate a few bucks for this masterpiece.

[tomyeah]

still not happy with a few things, like the main navigation "home browse about" and most people cant find the way to post comment or get the image description. need to work on this ... id appreciate all suggestions regarding the interface design and handling.

ive added a little symbol now for browsing and made the "information & comments"-link on the exif info part. the top bar brings you back to "home" now. ive added on-hover prev- and next-image-links too.

http://tomyeah.com/images/pixelcandy_browse.jpg

regards, tom.

[umar]

great work!
i'll join the list of people who want this as an addon :)
i've been wanting this function for my photoblog for a long time.

[jaywilliams]

Personally, I would like to see the info slider toggle.
If it's open, clicking on the info button would make it slide away.
Also, using image maps will probably hurt the SEO. Using CSS you could create a similar effect, and still maintain a clean simple html page.

[tomyeah]

Personally, I would like to see the info slider toggle.
If it's open, clicking on the info button would make it slide away.
Also, using image maps will probably hurt the SEO. Using CSS you could create a similar effect, and still maintain a clean simple html page.

ok, now the info-button is a toggle for the slider and i replaced the image map with css stuff.

last thing that bugs me is the redirection page that appears when you submit a comment. id like the comments directly appear on the site without redirection. is that possible ? ive looked into the index.php but didnt want to mess around there too much.

regards, tom.

[jaywilliams]

Yes, with v1.6 it is finally possible!

Add this to your comment form:
<input type='hidden' name='withthankyou' value='no' />

[tomyeah]

Add this to your comment form:
<input type='hidden' name='withthankyou' value='no' />

seems not to work in v1.5 though ...

[jaywilliams]

That would be correct.

It's a new feature in v1.6.

[tomyeah]

just changed some stuff in the color-picking. it selects the primary color now more accurate and the whole color theme is a lil darker.

http://tomyeah.com/images/pixelcandy_theme.jpg (http://pixelcandy.tomyeah.com/index.php?showimage=285)

it looks like this now with all controls.

regards, tom.

[greentraveler]

VERY nice final product. You've refined it beautifully.

[tomyeah]

ok, i made an addon for the color picking. get it in this thread (http://forum.pixelpost.org/showthread.php?p=45525). i hope you'll like it. give me some feedback if it works ;) or maybe about bugs and so on.

regards, tom.

[darkphoenix]

is your template pixelcandy available for download? I couldn't find it.

[Makki]

Looking very nice work indeed.

[ellikelli]

I know there's a bunch of CSS rounded corners tricks to do without images and bunch that you can do with them. Here's a site with a collection of rounded corners techniques that you guys might want to check out:

CSS Rounded Corners roundup (http://www.smileycat.com/miaow/archives/000044.php)

And here's a really good one done without any images or javascript, pure CSS:

Spiffy Corners (http://www.spiffycorners.com/)

[miealex]

Tom is your template available for download? I'm practically in love with it :)
I love the way you did it! And the color picking feature is just ... God, I love it :)

[cushmok]

yes... I really like to use this template too if it could be possible...
Could it be ?

[kristarella]

Cool! Love it.

[irishblue]

He has added it as an add-on, see here:
http://www.pixelpost.org/forum/showthread.php?t=6534
totally love it! am using it on my site too hehe

[Scarabaeus]

I was wondering too about your template as this site has a very, very similar copy?

http://www.mathieumilot.com/

[dhdesign]

I was wondering too about your template as this site has a very, very similar copy?

http://www.mathieumilot.com/

He probably downloaded the template and is using it on his blog, much like a lot of folks have done with the Delicious template.

[Scarabaeus]

Yes, but I didn't realise it was available for public download.