Craig's Musings

A kind internet wanderer named Mike recently sent me an email complimenting me on the web site I've created for the family. He asked me how I did it, and since a couple of my friends have asked me about how to set up something the way I did, I thought "hey - what a great topic for my technology blog".

I use Yahoo! Small Business for hosting. They are very reasonable - $19.95 a month buys you 10 gigs of storage, a huge amount of transfer (400 gigabytes a month), hundreds of 2GB email addresses, the ability to manage your domain, FTP, and support for publishing technologies like MySQL, PHP, and MovableType. They also have a $11.95 package that is the same except 5GB of storage and 200GB data transfer.

My approach has refined over the past 8 months of blogging. At first, all I posted were pictures. My approach for years was manual - crawl through the pictures, and use Photoshop to create an internet friendly version and a thumbnail. Then I would manually create the HTML for each picture set. Gah! It took hours to get photos up. I eventually ran out of steam doing that and my photo publishing lagged for over a year until I discovered Picasa. Then last June I started blogging, and this is where photos, video and narrative all merged to our family blog.

Photo Publishing

Picasa changed everything for me - I add a label to a photoset, go through and cull the blurry ones from the label, and then click on the label and select "Make a web page". I didn't like the default templates provided as they insert a Picasa logo and weren't customized to my site navigation, so I made a couple of tweaks which you can find here: PicasaTemplate.zip (50 KB). These files copy into C:\Program Files\Picasa2\web\templates - the links.js and style.css are there because Picasa 2.1 starting hanging without them. Links.js is some javascript that adds whatever links you want beside "Next set" and "Previous Set". I created links.js so that I could the various links whenever I wanted without having to go back and re-edit every single photo set I published. I chose the blackbg template and customized as follows (you only need to know this if you don't want to use the template I provided):

• HEADER.HTML, ITEMHEADER.HTML and INDEX.HTML: change the stylesheet reference from "style.css" to "../style.css". This will have each photoset you publish share the same CSS, so you change change it in one place only.
• IMAGETARGET.TPL: remove the '#' sign from thumbnailWidth and thumbnailHeight, and change the numbers to 200 from 160. I like bigger thumbnails than the default.
• INDEX.TPL: in the first line, change "Template blah blah" to something you can identify like "Craig". Also, like IMAGETARGET.TPL, make the changes to thumbnailWidth and thumbnailHeight
• TARGETLISTHEADER.HTML: little bit bigger change, remove the text between the tags, and replace it with:
  
  <a href="/indexfull.htm">Previous Set</a> | <a href="/indexfull.htm">Next Set</a><SCRIPT src="../links.js" type=text/javascript>
  
  Each time you create a new photoset, you just change the "Previous Set" and "Next Set" hyperlinks to link between the most recent photoset and the newest photoset.

That's it. I use Microsoft FrontPage to publish, and all I do is copy the directory created in My Documents\Picasa Web Exports. Yahoo runs FreeBSD, which doesn't support spaces or punctuation in filenames, so you will have to manually rename the directory before copying it - I just eliminate punctuation and replace all spaces with underscores ('_'). Copy the directory you just renamed to the appropriate directory in your web site in FrontPage (I use a master directory called Collections - you need to copy the style.css and links.js from above to this directory, by the way), go into FrontPage and link the new set with the last set and vice versa. It is quite quick in FrontPage - just select the "Next Set" in the older set, right click and select "Hyperlink", and link it to the new page. Then do the same thing for"Previous Set" in the new set, remove the hyperlink from "Next Set", and republish.

I used to manually create a link to each photo set on a static page, but that got old and time consuming, plus I couldn't search, sort, or categorize my pictures. So I created a little PHP program that dynamically generates a main pictures page based on an index file. T he index file is called "picturelist.txt" (I include a sample in the download package below in the "Setting up a Blog" section) and it contains simple information for each photo set: URL, directory, date, title, and whatever categories you want to assign, e.g.:

http://www.theeislers.com,/Collections/2005-11-25_Two_Best_Friends_Conked_Out,2005-11-25,Two Best Friends Conked Out,Angus,Cats

Pictures.php generates a page from this information. It is pretty cool, see it in action here

Aside from pictures.php, there is also newpictures.php that needs to be run every time you add a picture set. Newpictures.php generates the last pictures and thumbstrip that you see in my boys blog. You run it by entering http://www.yoururl.com/newpictures.php into your browser. I used to compute the last picture list and thumbstrip at page generation time (along with a cool calendar), but Yahoo! has pretty random performance for PHP that accesses the file system, so I had go to this publish-time instead of real-time method.

That is all there is to my photo publishing system - I can go from photos copied off the camera to published on the internet in 5-10 minutes, depending on how long I spend culling the photoset. I also like to do a blog for each picture set I publish, I find it to be a great way to remember context of the photoset. At some point I would like to link the photoset back to the blog, too, but that would be a bunch of retro-work that I keep putting off.

All the PHP for my pictures is found below.

Setting up a Blog

The main page for my family is my boys blog. I use Movable Type through Yahoo's hosting to host and manage this site. Setting up Movable Type is pretty straightforward - you just go into your Yahoo! control panel and follow the instructions. If you aren't using Yahoo!, my earlier blog about how to set up MovableType on Yahoo! might be helpful - I wrote this before Yahoo! supported MovableType natively, and a lot of the stuff you need to do should be the same on any hosting environment. There is also stuff there on how to move your blog out of Blogger which is irrelevant if you aren't doing a transfer from Blogger (duh!).

I built my own custom set of templates - I don't like MovableType defaults, they are 2 column (not 3) and assume an 800 pixel wide display, which is really out of date. My templates are 3 column and assume a 1024 wide display (which is also way out of date - my new Dell 30" display is 2560x1600 pixels, which KICKS ASS). Assuming that Yahoo still hasn't fixed the rebuild bug, once you change the templates (below), you will need to follow my instructions on how to make rebuilding work.

My left column has a custom archive feature that I built based on the same idea I had for pictures - the ability to sort and filter the blogs. The "Recent Pictures" and "Found Pictures" strips found on the left and right column come from code that is generated when you run the newpictures.php file I referred to above.

Copy these files to the root of your blog directory: BlogRoot.zip (9 KB). This code does one thing only - it allows a viewer of your site to dynamically change the color scheme of the blog. It was a nerdy feature that seemed like a good idea at the time. You can remove this ability by editing the Alpha Module template (see templates below).

Copy these files to the root of your site: SiteRoot.zip (8 KB). This is the code that handles all the picture stuff from the previous section.

Here are the templates to install in MovableType: Templates.zip (15 KB). This is a little work as you have to create a bunch of templates in MovableType. There is a directory for each class of templates:

• Indexes: you need to either create a new index template (for bloglist.txt and bloglist.php) or copy the contents to an existing index template (index.php and styles-site.css)
• Archives: replace the contents of Category Archive, Date-Based Archive, and Individual Entry Archive with the contents of the supplied text files
• Modules: I designed a LOT of flexibility into the "gamma" module templates (the right hand strip), perhaps too much - when I was done adjusting for all the performance problems of PHP on Yahoo!, all the Gamma_*** templates looked the same. Anyway, you need to "Create New Template Module" in the Modules template section with a name that exactly matches the file name (less the ".txt") of each file in the Modules directory of Templates.zip. For example, you need to create the template "Alpha" in the Modules template section that has the contents of Alpha.txt.

The only screwing around you will have to do with the above is to find all instances of "www.theeislers.com" and change it to your main site URL, and to change all instances of "theboys.theeislers.com" and change it to the URL of your blog.

Note that all of this assumes that the blogs are in a subdirectory of the main ftp site and the pictures are in a directory called Collections. I don't know what happens if you don't do it this way - Caveat emptor, and remember, you are getting what you paid for with this code!

Mobile Blogging

Setting up mobile blogging is pretty easy - Flickr has a really nice feature for this (it does require you to blog with a photo, mind you, but that is how I do it so it works for me). After following the instructions, you get an email address you can send a photo to that will not only publish to Flickr, but will publish to your blog. The subject of the email becomes the blog title, and the body of your email becomes the text. Just add the email address that Flickr gives you to your phone address book and you are good to go, assuming you have a camera phone that is configured to send mail.

I don't like to leave the Flickr photos there - I prefer 320 pixel wide pictures, and Flickr only gives you 250 or 500 as options. So usually when I get home I republish the mobile blog (using Anconia RocketPost, discussed below) with the larger thumbnail linked to the full pictures. But that is pretty anal and probably not necessary.

I found one cool side effect of mobile blogging through Flickr - they mashed up with QOOP, and you can print a photo book that has all the subjects and text you typed in. I ordered one Friday night, it was only 13 bucks for 12 pages (48 pictures). We'll see how it turns out, but it is a neat idea.

Blogging tools

I blogged about the lack of tools but finally found one I liked - Anconia RocketPost. It is the only one that lets you drag and drop pictures easily. My wife loves it - she is a big fan of weaving pictures into her blogs. RocketPost has issues - so fair warning as it is a bit buggy for the $99 price.

• RocketPost doesn't respect the "upload as draft" status or a manually set date when you post. It happened with this post - I wanted to get it into my blog from my laptop so I could edit it from home, and it ended up published even though I had changed the status from "publish" to "upload as draft" and I had to go into the web interface for MovableType to put it back to draft status.
• You enter a width and height for default thumbnail size, and the tool respects height instead of width. So if you have pictures from different cameras with different height/width ratios, the width of the thumbnail varies instead of the height. I HATE this - I want fixed width, variable height, since my blog has a fixed width for each post. I should be able to chose which dimension I want to be fixed (height or width), and let the other get computed based the relative height/width of the photo in question.
• RocketPost doesn't clean up its HTML very well when you edit in WYSIWYG mode. For example, in this post I wanted some text to be Courier small font. Then I changed my mind and wanted extra-small, so I selected the text, and chose extra-small text. No change. Tried again. No change. Tried a bigger font to see if that mattered. No change. And again and again and again. Finally I look at the code, and the text had dozens of tags around it, but the inner most tag set was the original "Courier small font" set, and so all that got rendered was that. RocketPost also doesn't delete the tag when you delete a hyperlinked image, so you end up with more dead HTML. That is a theme, lots of dead HTML can get left behind.
• Sometimes WYSIWYG mode pegs the CPU (and renders the editor unusable) if you have a lot of pictures or rich text (I was constantly pegging my laptop while writing this blog on the plane Saturday).

All grousing aside, RocketPost is the best tool I have found. They update it regularly, which I love - I am delighted with it overall. When all else fails, using the web interface is fine, but if you want to have pictures resized & auto-thumbnailed, along with having your blog autosaved every couple of minutes so you don't lose anything, RocketPost is awesome.