Gallery is in the new design. I took the html of an entry page, stripped out the contents and inserted the flashplayer script for simpleviewer.

Changed background, fixed some of the margins.

The text is still in white, even though I changed it to #666666, not sure what’s going on. This needs to be fixed because I have white text on a white background.

The viewer takes pictures from my flickr set called favourites. I need to put more pictures in that set.

The logo is a variation of maratree; this time it’s the bright blue-orange combo version. If anyone asked me how I got from the original to this, I will have to shrug and say no idea. I was playing around with photoshop. The text is based on the blue and orange colour of the image. I fiddled with margins and padding in the header to fix the position.

I have about 30-odd feeds on bloglines, which is around average. According to their faq the average is more than 20 (I wonder how more than a certain number can be considered as average). I subscribe to quiet thoughts and pizzaorme — so I can be notified if there’s a comment on my website; and to keep track of mm. :)

What’s always been a niggling annoyance is that my favicon doesn’t appear in either feed. I’ve noticed more and more of my feeds getting their favicon “noticed” by bloglines, but it’s been at least 2 years and mine is still blank. I know it’s probably cos the favicon is in the root directory whereas the feeds are in their own folders.

Googling pointed me to a couple of forums but the answer seems to be “email bloglines with your url”. Not satisfactory, and I imagine not bloglines’ preferred method.

It was easy when I found it. I need to Claim my urls first, by going to my profile and clicking on Publisher Tools. I entered the site url and it found the 3 feeds: rdf, xml, atom. I then needed to do 2 things to prove my ownership:

1. make a new post with a code they gave me
2. add a code to the index template

Clicking on Verify and it confirmed that I managed to claim 2 out of the 3 feeds. For some reason the rdf feed didn’t authenticate, probably because it’s old. I subscribe to the xml one anyway, so it was fine.

Once verified, I returned to the Publisher Tools page and there was an Edit link next to each feed url. I was then able to specify the location of the favicon in the edit menu.

I wonder why this isn’t in the Help section, or at least more obvious.

After yesterday’s musings, I made a prototype page for the gallery using simpleviewer and flickrviewer.

1. download SimpleViewer
2. download flickrviewer
3. get flickr api key
4. configure api key — the instructions are supposed to be simple but proved to be more fiddly than I thought
   
   • make a note of the key and the shared secret key
   • click “edit key details”
   • enter details of the application — I put simpleviewer and flickrviewer
   • under callback url enter the location of the simpleviewer application:
     http://invisiblecompany.com/gallery/simpleviewer
   • create a login link in the format:
     http://flickr.com/services/auth/?api_key=[api_key]&perms=[perms]&api_sig=[api_sig]
     [api_key] is my api key
     [perms] can be read, write or delete — write includes read and delete includes r/w
     [api_sig] is the md5 sum of [secret]api_key[api_key]perms[perms], meaning if [secret]=123 and [api_key]=999 and I set write permissions I get 123apikey999permswrite. A simple online tool converts to md5: 3062e84e9b0014d31c5ee946ef4283a9
     my login link is: http://flickr.com/services/auth/?api_key=999&perms=write&api_sig=3062e84e9b0014d31c5ee946ef4283a9
   • enter the login link in the browser and flickr will ask me to grant permission for simpleviewer to access my flickr folders
5. in Dreamweaver or a text editor edit flickrviewer.php according to instructions in the file
6. ftp to server
7. point browser to gallery location
8. clear cache if necessary

This displays all the pictures in my favourites flickr set. Full screen shot to see the location of the flash viewer.

Cross-posted from the main journal.

Researching into how best to redo the gallery. I don’t have stats but it seems to me that a typical personal website will include a blog and a place to put photos. I’m surprised that there aren’t more integration between the likes of flickr / photobucket and MT / Wordpress. May be I’m not looking hard enough, but I don’t think so.

Like many before me, I hacked MT to make it a sort of photoblog/gallery type page. Six Apart say it’s straightforward — witness the number of SA staff using Byrne Reese’s PhotoGallery. But honestly, it’s not immediately intuitive, especially the treatment of thumbnails. There’s the flickrphotos plugin but there’s a fair bit of fiddling needed, it seems to me.

Of course, I don’t have to use MT or a specific CMS. There are several popular solutions:

1. gallery
   PHP/database, flexible, seems easy to install but I’m not sure how well it can integrate to the MT-based css. Apparently some performance issues.
2. lightboxphoto
   Full-featured, gallery maker more suited for professionals selling their photos. The most basic license is $399.
3. pixelpost
   PHP/mysql based, developed specifically for photoblogging. Looks fantastic, allows comments and all that we’ve come to expect of a blogging software.

But I’m not going to use pixelpost or gallery (forget about lightboxphoto) because these require that my images are uploaded and hosted on my server. Not that I haven’t done that, but for the purposes of the gallery I really want to use flickr. Why? The practical reason is because of tags, sets, convenience and not having to upload to multiple locations. They’re neatly organised on flickr, I just want to link them back.

I’m glad I’m not the only one considering the options.

There are quite a few options. My thoughts:

1. chasr
   Simple app that displays thumbnails of sets, click on one and it goes to a page with the photos, then the photo itself. Includes recent photos and popular tags. In order to view private pictures, add comments and the like, I have to sign into flickr. Feels to me like it replicates flickr feel on my own website.
   comment: not for me. I’m not looking for a flickr clone, I’d like something that looks more elegant. Apparently I can play with the demo to see how my sets look like, but I never got it to work.
   
   
   
   
   
2. pictobrowser
   A flash widget that displays flickr pictures. Simple filmstrip design and interface. Choose a set, tag or group and it generates a block of code to embed into a webpage.
   comment: very easy, no need to worry about design. But it’s for single sets or tags only, and in order to display multiple sets, I’ll need to code it myself. Basic, but I need more functions. Here’s my 26thngs for Sept06.
   
   
   
   
3. jetphoto
   More of a desktop photo organiser that happens to generate a flash web album after it’s uploaded to flickr. Has GPS and geotagging. In use, it’s very Windows look and feel. The flash feature generates a pop-up page that has fairly basic navigation elements. For instance clicking on the photo brings me back to the album.
   comment: I don’t want to organise my photos through their application because I use iPhoto on the desktop. The whole point is I don’t want to manage my photos in multiple places. Such a Windows-heavy application won’t make many friends with mac users anyway.
   
   
   
   
4. satellite
   Another PHP application that makes use of flickr’s API. Uses mootools and slimbox for sleekness. Displays thumbnails of pictures of a set; clicking on one dims the set and overlays the picture in question over the set. Looks nice, very nice. Comes with a black and a white theme, so I’m not sure how much it can integrate into a sitewise css.
   comment: nice, worth looking at.
   
   
   
   
5. flogr
   Similar to Satellite in its use of the slimbox overlay method. Themes are customisable and EXIF data is displayed.
   comment: similar in concept to Satellite, appears to have a few more features. Worth looking at.
   
   
   
   
6. simpleviewer
   Very popular. Generates a flash slide show with thumbnails of remainder of photos at side, makes it easy to navigate. Integrates with flickr, wordpress as well as desktop apps like iPhoto.
   comment: I like this. Clean and neat navigation.
   
   
   
   

Verdict? At the moment it’s between simpleviewer and flogr/satellite. It’s to do with navigation — do I like the slimbox overlay approach or the filmstrip approach. Ah, decisions.

I changed the favicon, this is the 3rd version now, and finally a logo that is recognisably as me cos I use it as an avatar on forums. It should be good as general website logo too. This time, I dispensed with the GraphicConverter method. I cropped the image tighter and used a free online favicon generator. Can’t even remember which one, I just googled it. Nicer than the blue blob on black, eh?

I changed the favicon from the old blurred photo to a blue sphere on black background. See if I like it. Thanks, terra.

So I posted an entry that had an embedded quicktime movie. Tutorial.

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="256">
<param name="src" value="http://invisiblecompany.com/media/wizards.mov">
<param name="autoplay" value="false">
<param name="controller" value="true">
<param name="loop" value="false">
<embed src="http://invisiblecompany.com/media/wizards.mov"
width="320" height="256" autoplay="false" controller="true" loop="false"
pluginspace="http://www.apple.com/quicktime/download/">
</embed>
</object>

Just make sure to add 16pixels to the height cos that’s the height of the control bar, make sure the codebase is absolutely correct and the apple links are up-to-date.

I uploaded a couple of 300x450 jpgs yesterday but they refused to show, so I took a look in photoshop.

Note to self: jpgs on the web need to be RGB, not CMYK.

I don't have enough images on the website. Coming from someone who has 330 files in their images folder and only 140 pages that may sound a wee bit strange. Cos you figured, that's averaging over 2 images per page. Not a lot by web standards, but not to shabby either.

Let me rephrase. My images aren't distributed evenly over the website. That kinda makes sense, after all, pages like the gallery and travels need pictures, and the writing pages don't need many.

Nevertheless, it'd be nice to have some color on the pages.

On most level 1 pages (that's the first level down from homepage) plus all of the weblog-powered pages I have this 120x120 image at the top left. Back in html days, I used one image as signature to each section:

homepage

faq

personal

innermost

hidden doors

delicacies

I don't take a lot of photos, and most of them aren't any good, so as I was creating new sections I began to run out of nice photos to use. Plus they get a boring after a while.

With conversion to php comes the first advantage. I'm now able to generate a random image. There are lots of free scripts for this, I googled and found more than 10 at first pass. The one I'm using comes from Dan Benjamin. It's simplicity in itself.

Step 1: I saved the images I want to rotate in a separate folder in my images folder. I chose 12 images (hence "the random dozen"), my only criteria was that they were all square, which excluded a couple of favorites, but I'm happy with the selection. I noted the path of this folder: "/images/rotate".

Step 2: I downloaded the script and saved the php file in the same folder as the 12 images.

Step 3: Since the script and images are in the same folder, and I don't forsee displaying images other than jpg, gif or png, I didn't need to make any changes. Had I so wished, the instructions in the script are clear enough.

Stap 4: Where I want the random to appear, I put in this html:

<img src="/images/rotate/rotate.php" alt="the random dozen" width="120" height="120" />

To see the effect, refresh the page a few times and the image below will change.

I kept the changing Macs here on shiny parts but the randomizer is on most of the other pages.

So I made a banner that sit on the homepage, a simple animated gif.

Step 1: Create a photoshop document size 750 x 100px, background blue #003399, logo font Frutiger 55 Roman in white.

Step 2: Duplicate that layer.

Step 3: Create a new layer that is pure blue background. Put this layer in between the 2 logo layers, so it goes:

• Layer 1: with logo
• Layer 2: background only
• Layer 3: with logo

Step 4: Open in ImageReady. Use the Tween command and add 20 frames between layers. Set the initial frame at 2sec and the intervening frame at 0sec. Set repeat at Once.

Step 5: Save as gif. The end result is an animated gif of 43 frames with text that fades into the plain background and fades back to view.

The same approach for the other banners on level 1 pages, except instead of fading to pure background, I have the section heading constant throughout the layers.

I submitted a couple of entries to the mirror project which is a community of people who take pictures of themselves in reflective surfaces. The idea was started by Heather Champ in 1999 and there are now over 23,000 entries.

As for my meagre two, I added those entries to stained glass window. On the mirror project they are 23167 and 23364 respectively.

Criteria for mirror project:

• jpg only
• less than 30k
• max 300px on any one side
• min 120x90 / 90x120
• minimum touch up

My added criteria - that although I'm in the picture, I have to be unrecognisable. Hee.

Added gallery 5 in stained glass window. All photos taken in Hokkaido, such a pretty place. Here's one of the famous slope. Believe you me, there were so many people crowded around that bit of the farm the sense of peace you might get from the picture was so not there.

Made a favicon, the little thumbnail image that sits in the address bar and shows up on some browsers when bookmarked. I think it's cool. I already had that undefinable crystal ball shiny picture I decided to use as the logo. Making the icon was real easy:

1. In Photoshop crop logo to cut out excess black and into a square.
2. Change image size to 16x16 pixels.
3. Save as favicon.bmp.
4. Open bmp in GraphicConverter.
5. Under Picture>Color change to 16 colors (4-bit).
6. Save as Windows icon (*.ico).
7. Upload to root directory at website.
8. Clear cache.

Apparently there are even more straightforward methods like using a Photoshop plug-in or saving as png. But this took 10 mins to do so I'm happy.