It shouldn’t have been that hard.

Filed in TechnologyTags: , , ,

A week ago, I had finally decided on what I wanted in my online photo albums. I wanted a design that was simple to use and simple to look at, a design that would show off my photographs rather than distract from them. In html terms, to me, this meant a single page with controls to view the thumbnails and navigate between photographs, a single page without the flashes of multiple page reloads. I knew exactly what I wanted.

So I sat down and began on the design. Structure first; i.e., html, or in my case, xhtml. There was no style information in the structure. It was pure structure, the way xhtml is supposed to be. It looked good and straight forward. Then the style. CSS. I've done a lot of css work over the past year while I've worked on my blog, changing, improving and developing the blog's design. I've become quite familiar with css but I refuse to bow down to tweaking my css for the sake of arrogant egotistic non-compliant browsers. Writing the css for the photo album was not a piece of cake, but it wasn't difficult either.

Then there was the JavaScript. The JavaScript did nothing but hide and show various sections and photographs of the photo album. It did nothing else. It didn't rewrite the html or the css. It didn't do anything fancy except to remember the photograph being displayed and be able to show the next or previous one upon request.

Finally, there was the data. Each photograph would have a title and perhaps a caption to describe it. There would be a cover page photograph and there would also be one thumbnail for each photograph in the album. That was a lot of data. Writing that data each time I create a new album would be a lot of work, and I'd need a straight mind to remember to keep the html clean and valid while writing the data. It wouldn't be easy.

So I wrote an AppleScript application (i.e., 'Create blog album'). Whenever I needed to create an album, I would simply drag the photographs onto the application which would then launch, ask me for album information, ask me for the titles and captions for each of the photographs and then proceed to write the complete html file for the album. It worked great and didn't take all that long to write.

But there was a potential problem. What would happen if I wanted to add another photograph or two to the album? The Indonesia 2005 Day 1 album I was working on would not change over time but other albums I have planned would definitely change, albums like "Backyard Wildlife" and "Yesterday Hong Kong". How would I deal with that? It finally occurred to me that I could store the photographs together with titles and captions in Apple's iPhoto application and access the information via AppleScript.

I then edited the script application (i.e., 'Create blog album from iPhoto v1') to ask the user to choose from a list of iPhoto albums and then automatically glean the titles and captions from iPhoto before building the html file. It was wonderful.

I then reworked the whole process so that the person viewing the albums could choose from two sizes: smaller and larger. This meant creating another complete set of photographs and thumbnails, and it required another edit of the script application (i.e., 'Create blog album from iPhoto v2') .

The result was beautiful considering that I'm a relative beginner (admittedly an advanced AppleScript programmer but a novice at everything else). The application worked and it worked well…

The finished photo album

The finished photo album. It only took one week to write (sarcasm intended).

until people began to access the album from my blog. Some people, including my wife at work, reported not being able to see the contents of the album. Most of them were using I.E. which unfortunately is the most prominent of the arrogant non-compliant browsers. I was going to ignore the I.E. browser problem but my conscience got to me and I decided to see what I could do.

Some research on the 'net taught me that I.E. has its own way of looking at a web page, its own way of breaking the page down into individual pieces and its own way of finding those pieces. It wasn't really a shock to me; Microsoft has done this for years; but it was disappointing. Still, my JavaScript code was simple. It shouldn't be too hard to change the code so that it would work with I.E. as well as the other browsers, right?

Wrong. It was hard, too hard for me. This was my first attempt ever at JavaScript and although I was able to use both of the accepted methods for finding the individual pieces of the web page (getElementById and document.all), I still wasn't able to get the code to work.

In the meantime, I discovered another problem, something which to me was completely illogical. The css style code I wrote for the blog albums 'turned off' (i.e., display='none') any part of the web page which was not supposed to be seen. For example, when the Introduction section was shown, the thumbnail and photograph sections were turned off, and all of the photographs were turned off until the person viewing the album chose to view those photographs, one at a time. To my logic, if the photograph was not 'turned on', then the browser shouldn't download it. After all, the person wasn't going to see that photograph so why download it? Unfortunately, I.E., Mozilla and possibly one other modern browser I tried insisted on downloading every single photograph referenced within the album as soon as the album was loaded. With 22 photographs in thumbnail, smaller and larger sizes, that came to a total of 90 image files for the Indonesia 2005 Day 1 album. Sorry. To me, that was totally unacceptable.

In the end, I had to; at least temporarily; admit defeat and resort to the most basic of techniques: one html page per photograph. I edited my script application yet again (i.e., 'Create blog album from iPhoto v3') and now have a blog album that everyone can view without any significant problems. The album's not perfect. The JavaScript version was perfect, just not usable by many of the people who wanted to see it.

Just when I thought all of my problems had been solved, I discovered that there was no way to upload multiple html pages to my blog server (TypePad, admittedly designed for bloggers, not web developers). All in all, there were 48 html files for the Indonesia 2005 Day 1 album. Uploading them one at a time would take a lot of mouse clicks and a long time. Consequently, the album is not being stored on the blog server. It's on Apple's .mac server instead although just as easily accessible from my blog.

Update. Everything is now on another independent server run by LivingDot. I'm still using MovableType but I'm pretty much in complete control of the blog design. My photo albums still use the same design but are now exported directly from Aperture after I built a couple of custom Aperture web themes and an AppleScript script to make small adjustments to the output. Everything is nice now, for the time being at least ;-)

Sometimes, perfection costs a lot, and even then, the result might not be what you hoped for. I'm not finished with the blog album design yet. I still think the JavaScript version is workable and I have one or two ideas about where the problems are. If I can solve them, I'll definitely use the JavaScript version again. Until then, I'll have to be content with the plain old vanilla style html version of the album.

This would have been so much easier if everybody supported the standards, but there's always somebody who has to make it hard for everyone else.

Sigh!

Feedback

Comments (Comments are closed)

13 Responses to “It shouldn’t have been that hard.”
  1. Ka Lam says:

    Hi,

    I've been reading your blog for a while. This entry about photo display is intriguing to me. Since I have struggled with the same issue over the years. I am more of a UNIX guy then MAC. So my solution is inheritably more text based. Take a look at my home page (www.vex.net/~kalam) and click on the pictures links. Maybe we can share some idea on how to do picture display online.

    (p.s. display=none is a known issue. The "good thing" is, you can use it to do image pre-loading in slide show mode.)

  2. sue says:

    Ok I think I understand about 20% of what you wrote as I'm computer-ignorant. I marvel at anyone who can write their own scripts, that just sounds too cool. I'm just happy that I can now see the pics. =)

  3. sapphire says:

    很高興看到你公開你本相部的製作過程,不過對於我這些 computer illiterate來說真是不簡單。
    但我跟"老三"都估計你在製作過程中做了些"手腳"來防盜,因我們曾經想看看你其中兩張我們最喜歡的相 "darker end of Lompon Beach & Misty divider" 的 EXIF data ( aperture value & exposure compensation etc); 請勿誤會我們不是想 challenge 你的攝影技術,只不過好奇想從中偷師學野,但 save 了相片後用 Digital Photo Pro. & AcrSoft Photo Studio 開來看,那張相的 file 根來是空的,甚麼都看不到,但 save 做 desktop wallpaper 就沒有問題。所以我們估計你可能做了些"手腳",後來連問你這個問題都不敢,主動問你就等於自投羅網話自己想 copy 你D相"偷師",不過現在你卻那麼大方的公開你製作過程我才敢說出來。我現在連那張 desktop wallpaper 都 delete 埋啦! 請放心我甚麼都沒有拿走。

    Btw, 你個 Blog 替 Google 賣廣告,是否真的有錢收,or barter only?

  4. Diana says:

    All i can say is I can finally see the pics! :) (your post was confusing to me, due to the fact that i'm a computer dummy)
    great pics though ;]

  5. minghong says:

    Great to know that you care about Web standards, especially for a hobbyist. Anyway, setting images to display: none doesn't mean they should not be downloaded. Think about browser that doesn't support CSS or have CSS turned off. The only way to avoid browser downloading the image is to remove the corresponsing markup in the HTML. If you want to write in JavaScript, I can think of one degradable HTML/JS album that consists of one HTML file only: in the HTML file, use a list (maybe definition list if you want title and description) to list the images. Then use JavaScript to rewrite the HTML. You don't need thing like XMLHttpRequest, just simply DOM methods. For your AppleScript application, it just need to output that HTML file.

    (3 mins later)
    P.S. Originally I typed "http://minghong . f2g . net/" in the URL field, and your blog engine that it is comment spam. I notice the title of that HTML is 河國榮. Just want to let you know that the element cannot contain other elements. Just string.

    (8 mins later)
    I mean "(span lang="zh-TW")河國榮(/span)". My blog removed my tags and angle brackets. :-( It should just show my text as it is (not as HTML), shouldn't it?

    Anyway, Firefox 1.5 is out today.

    (2 mins later)
    Oops, typo again. I mean "Your blog removed my tags and angle brackets."

  6. 河國榮 says:

    Sapphire,

    feel free to use my photos as desktop wallpaper although the largest photos are only 810x540, much smaller than most of the monitors in use today.

    there is no EXIF data because of a bug in the software I use. leaving the EXIF out was not intentional.

    the google ads are an experiment. I was trying it last night but they were displaying ads for competing blog companies so I thought it was inappropriate and took them out. TypePad has an agreement with another ad firm so I might try those instead. the aim is to recoup the cost of the blog, not make money, especially as the number of visitors increases and my bandwidth charges go up.

    Minghong,

    thank you for the ideas. I'll keep them in mind.

    the blog system might have rejected your URL because the f2g.net domain may have been blacklisted. I don't know so I'm only guessing.

    html is turned off for the comments in my blog.

    in the titles of documents that I control, there is no html markup. in documents created by the system such as the warning window you saw, you might see the elements because the system doesn't know to remove the html from the title before embedding it in the documents' headers.

    I'm very particular about the way the blog looks so I use the element and lang="zh-Hant" attribute throughout the blog to discern and specifically format the Chinese. for example, Chinese text has a larger line height than English text. if you compare the am730 articles to my other English articles, you'll see this straight away.

  7. Happy says:

    hah~wat i want 2 say is u r really a hardworking blog writer!

    okay!hihi~ i'm Chinese girl who study in Auckland, New Zealand(it's reaaly near ur home country, isn't it haha)
    i really like 2 watch ur performances, and i'm admire that a foreigner can speak such fluent Cantonese. i've read a article from a HK magzine abt u, u've really worked hard since u came 2 HK.
    我都唔知點解今日會留言卑你,just want to 支持你! 繼續加油哦!
    (別笑我的廣東話!haha)

  8. Hoover says:

    Hi, Kwok Wing,

    You may want to look into online publshing management application (or content management) like Movable Type.

    See:
    http://www.sixapart.com/movabletype/

    So you only need to design and build your site once. Once it's up, then you only need to upload your new content, and it will be published.

    I am a designer, but not a programmer. But I am happy to direct you to one of my programmer friend if you have any question.

    Cheers,

    Hoover

  9. minghong says:

    Hi, you can take a look of this screenshot:
    http://img15.imgspot.com/u/05/333/10/river1133364667.png

    Or this W3C document:
    http://www.w3.org/TR/REC-html40/struct/global.html#h-7.4.2

    which says: "Titles may contain character entities (for accented characters, special characters, etc.), but may not contain other markup (including comments)."

    So... span element is not allowed within the title element. :-S

  10. Arthur Heng says:

    Hi Mr Rivers, if you're familiar with PHP, in part of your html file, you can write in PHP code to detect all images in a directory and generate an Array of name of images for javascript. This way, adding new images to your gallery should be a breeze, just upload the new images and let PHP code detect them all for you. Hope this helps.

  11. 狐某 says:

    Hi !
    看了你的Blog已一段日子,現在才留言給你,好少Artist這麼落力寫Blog而且還親力親為,很佩服你的魄力,聽說你很喜愛唱歌,何時upload一些到網上和我們分享一下呀?

    ps:我已將你的Blog加入本人的Blog內連結了!
    http://spaces.msn.com/members/hkstanleywu/

  12. Yorick Chan says:

    Hi Mr Rivers, I think Ajax(http://en.wikipedia.org/wiki/Ajax_%28programming%29) may give u some idea with you photo album.

  13. Frank says:

    Your site is very very cool !! I love it :) Respect !