I’ve been deploying my day time discoveries some web design work I do outside the Maricopa gig… most recently wrapping some of the Small Technologies Loosely Joined for the Eye Dog Foundation. This is a local organization that raises and trains German Shepherds as guide dogs for the blind, providing them at no cost.
This has been a donation-ware project, and has gone on and off for more than a year– the Eye Dog folks are not techies, and getting content has been, well tough at times. My plans for the site was to architect it in a modular fashion with an ultimate goal of having a basic admin system for the staff to be able to update the content via web forms. A number of content areas are loaded with randomly chosen “content-lets” such as the background image sin the footer and the “Friends of the Foundation” blurbs in the sidebar.
Thus, it is a labyrinth of a few PHP templates, and a whole lot of text file includes for content pieces. And it was made to have switchable style sheets form graphic to text only views.
The “pieces” came into play quite nicely for dealing with random and sets of topical photo sets. Originally I was setting a database to manage this, but saw a lot of issues in taking the large variety of images they provide (the old site had 1+ Mb 300 dpi images just resized in HTMML), so I saw possibly having to edit and optimize photos. But it struck me about a month or two ago, that flickr would be ideal because the originals can uploaded as monster sized originals out of their digital cameras, and flickr would resize automagically. And then we could use the flickr syndication site wide. So I began loading images in a basic flickr site.
On many places there is a randomly inserted image, essentially using the basic JavaScript random image syndication that flickr provides from all photos, set to display just one image. So I have a include file, named random_flickr.inc sitting on my site that has in it:
<div class="gfoto">
<script type="text/javascript"
src="http://www.flickr.com/badge_code.gne?nsid=93872691@
N00&count=1&display=random&name=0&size=mid&raw=1"></script>
<p class="caption">
<strong>Random Eye Dog Foundation Photo</strong><br>
see more photos in the
<a href="fttp://www.flickr.com/photos/eyedogfoundation/" target="foto">
flickr photo gallery</a>!</p>
</div>
So any page on the site cab have a random file just by inserting a PHP include statement:
......... <?php include '../includes/random_flickr.inc'; ?>
Our general photography page again uses the flickr JavaScript feed to pull 3 images from all we have uploaded.
But because there was also a need to have some subsets of photos, I set up a basic “structure” (my it might even be a controlled vocabulary) for our flickr tags:
- guidedog tag: applied to all photos so we could use the tagged photo slideshow feature to create a link to a self running slide show.
- puppiestag: applied to all photos of puppies, to build a page of photos just for the puppy raisers area. With a tag set, we do not have the JavaScript available from flickr, but there is an RSS feed. So the photos on this page are actually done with the RSS feed from flickr processed through a local version of Feed2JS. This is one of those times when I wish feed makers would go beyond just offering feeds of the most X recent images- I would love a feed of an arbitrary number chosen at random (I could access a feed of say 20, and write my own code to pluck out 2 random from that set…)
- grads tag: from the photos they have of student graduates, for a part of the student area with a photo gallery of program graduates, built just like the set of puppy photos.
Again,. flickr will allow non technical volunteers yo upload images, and they just need a 10 minute demo to understan how to apply the tags. Flickr feeds the site at many levels.
The part of the small pieces approach has been using Blogger as a publishing platform for an online newsletter, the Eye Dog Foundation News Blog. This is set up to use Blogger and have it directly FTP access to our site, providing a wayto publish the content directly to our site. This meant re-casting the Blogger templates into the EDF site design (no quick feat) and getting the sidebar to slide into the defined areas used on other pages. One of the first things was making all the CSS out of the template and setting it up to lint to an external CSS- making the design tweaks much quicker than having to republish 30 times in a row.
I made a master blogger account for the fictitious editor, “Magic the Eye Dog” (actually the name of the first dog they trained). Next on the list is using Bllogger to invite some others in as editors, where they will use the simpler Blogger interface (no access to settings or templates). The plan is to have volunteets do some regular posting as an online newsletter.
Having flickr means also we can blg images from flicr, and publish them through Blogger (see exmaple).
Things to add include an interface for entering event info into a database, to drive an online events calendar.
The Foundation folks seemed pleased so far with the site, and its been a fun, learning lesson for me. The availability of these free web services provide some excellent paths to allow the people who know the content to do more of the publishing than me.
