North Slope banner

[Dav Yaginuma]

How about a rotating banner for this site with a set of photos that emphasizes other parts of Potrero Hill rather than just the North Slope? I'd be happy to create some myself, or we could have members submit others.

[Evan Goldin]

That's an awesome idea! As a fellow south-sloper, I definitely feel like the North Slope gets most of the attention. I'd previously used http://www.potreroboosters.org/photo/morning-on-the-hill as the banner image, but it felt a little...smoggy. I'm happy to substitute in some other images, but a rotating banner (if you're up for it) would be fantastic!

The current image is 955 pixels wide and 170 tall:

http://storage.ning.com/topology/rest/1.0/file/get/2167540656?profi...

If you can make a rotating flash object with that width and near that size, I'll write a small script to run it. Just be sure the top left part of the images are dark enough to read the white text.

Let me know if you need any help! I'm also happy to send out a call for images as well.
- Evan

[Dav Yaginuma]

What is the site written in? PHP I'm guessing? Probably easier to just make a PHP script that loads a random image from a directory of images. That way to add/delete banners it's just a simple file system operation, plus it doesn't make flash a requirement just to see the banners

Evan said:

That's an awesome idea! As a fellow south-sloper, I definitely feel like the North Slope gets most of the attention. I'd previously used http://www.potreroboosters.org/photo/morning-on-the-hill as the banner image, but it felt a little...smoggy. I'm happy to substitute in some other images, but a rotating banner (if you're up for it) would be fantastic!

The current image is 955 pixels wide and 170 tall:

http://api.ning.com/files/DZ15sh5BOkuridcDtmR6-UNw2tfP-8Cia9WdkjCVa...
_
_If you can make a rotating flash object with that width and near that size, I'll write a small script to run it. Just be sure the top left part of the images are dark enough to read the white text.

Let me know if you need any help! I'm also happy to send out a call for images as well.
- Evan

[Evan Goldin]

I don't have access the source code, but it's pretty easy to write a Javascript code to do exactly that — randomly display images within a directory. I can take care of that part, so just let me know if you have some images we could use.

I'll start collecting some myself and get some contributions.

[Evan Goldin]

I found some great images on http://www.tentimesone.com/neighborhood-potrero-hill/

I'm going to get cracking on getting the rotating banner set up!

[Dav Yaginuma]

Sorry I've been slow to jump on this. I was working hard to get something prepared for SXSW in Austin (where I am now). I was thinking that the javascript could additionally examine the filename for a RGB sequence and if present additionaly change the color on the overlaid text?

Something like

westslope1_000000.png for black text (assuming the image is light colored)

parsed with a

/.+_([0-9A-F]{6})/

[Evan Goldin]

Hey Dav,

Great suggestion. I've got the script up and running, and now I'm just looking for some good images to serve as the background. If you have any, send them my way or upload them here — and either way I'll ping this thread when it's up and running.

/Evan
Ning Product Manager

[Dav Yaginuma]

Also I've been meaning to go out an take some shots myself. I have a few but looking for a nice evening/weekend to walk around the hill and take more :)

[Evan Goldin]

Definitely. Be to sure to post them here when you get a chance, and I'll include them. Can't wait!
- Evan

[Dav Yaginuma]

I took a few shots last weekend and got them cropped to size, but not sure how well they'll really work out because of the text overlay thing. I can try to work out the JS code to set font color from filename like I mentioned, is the load from dir code in place yet so I can work from it?

I was thinking though of looking into a css trick to give a font a border (so it's readable and looks nice even over varying backgrounds), any idea if that's possible?

[Dav Yaginuma]

Here's some example shots. I like the idea but I was thinking I would retake them to see if I could improve.

[Evan Goldin]

Those shots are great! I was actually thinking of going even farther than replacing just the header — dropping the header and replacing the entire background, so the site would look like this:

Then, the text and background color below could be adjusted to match the image, depending on which image is generated.

What do you think? It adds some load time (images are 75-125k), but I think it makes the site look much cooler and much more 'Potrero'.

So send over the images, and I'll gladly plug them in! I'm getting ready to send invites to the network out to about ~150 residents in Potrero, so I want the site to look great (and show all sides of the Hill) before I do.

[Dav Yaginuma]

Huh, that's interesting, and in a way addresses the main issue I was considering about representing Potrero Hill in a horizontal banner: it's a hill, the verticals are kind of a main component and were getting short shrift! (no pun intended)

Perhaps the additional size can be addressed by splitting an original image into 3 pieces placed separately (since the bulk of a single image version is covered). I'm pretty sure the chopping could be automated, at least with a photoshop script if not a command line utility, including the bottom fade effect.

It makes the photography a little more difficult as we're trained to focus on the center and instead would have to think of the edges, but I like the idea!