As promised in Roll Your Own WordPress iPhone Theme, I’ve applied the same custom iPhone theming process to my photo gallery. It follows the look and feel of the iPhone’s own photo application: albums appear in a list, photos in a grid, and individual photos largely by themselves. I also reproduced its coolest feature: you can scroll through photos by clicking the left and right sides to go back and forward!
While this leveraged CSS to tweak the same set of full screen pages, I found there was a good bit of cleanup needed in the original Gallery2 theme, which still had tables instead of divs. There’s also some Javascript XPath and DOM manipulation to strip out the tables that create the drop shadows around photos and thumbnails. Finally, the “scrolling” photos are accomplished using a custom image map based on the dimensions of each photo.
I’m quite pleased with the end result; it makes viewing photos on the iPhone quite nice!
Update: By request, the code for my theme is now available; the iPhone specific parts are marked in theme.tpl, theme.js, and iphone.css. It’s still a bit rough, so you may need to make some adjustments for use on your own site.
January 23rd, 2008 at 11:38 am
Matt… you are having a serious problem distinguishing its and it’s. Can you find the error in this post?
January 23rd, 2008 at 11:55 am
Fixed my bad grammar
March 13th, 2008 at 9:33 pm
Hey there,
I’m very impressed with your work on the Gallery2 iPhone optimization. Is there a download link for it?
I’m actually one of the few people in Brazil using the phone, but I love it and would like to have my portpholio available in both desktop and iPhone versions (like my blog).
Thanks in advance.
Guddy
September 13th, 2008 at 10:15 am
There are a fewe rough things left behind, like Portfolio and “Rally in the Valley 2008″ that seem to be hard coded in there. Good start, though.
September 29th, 2008 at 4:36 pm
Very cool idea, I think I shall try out your code on my Gallery site…
January 6th, 2009 at 2:19 pm
Good start on this theme. Is there any way to get it to only show when there is a mobile browser present? This way i can have one theme for the computer and only use this for the iPhone?
January 6th, 2009 at 3:12 pm
Thanks, Joe. The iPhone-optimized theme will only display on a mobile browser; there are hooks for the stylesheet and Javascript that only activate on small screens.
If you’d like to make another theme iPhone-compatible, the modifications I’ve made to this one should give you a good idea of where to start.
January 20th, 2009 at 5:29 pm
Is this compatible with gallery 2.3? i get a variety of errors after i upload it to my themes directory.
January 20th, 2009 at 7:39 pm
Brewster, I haven’t tested in with Gallery 2.3, so I’m not sure how compatible it is.
If anyone would like to contribute to a 2.3 version, I’ll gladly include and credit your changes.
May 9th, 2009 at 10:15 am
This is great! Is there a way to download it? Or is it there and I’m just being blind
May 9th, 2009 at 10:35 am
Tango, there’s a download link at the bottom of the post:
Download the iPhone Gallery2 Theme
Enjoy!
May 9th, 2009 at 2:12 pm
Yeah…blind. Sorry about that. :-/
Thanks.
July 7th, 2009 at 4:26 am
Fantastic theme. Thanks for the contribution. Also you can take a screen capture on the phone by simultaneously hitting the home and power buttons. They will look better than your current captures.
July 7th, 2009 at 1:11 pm
Ravi, thanks for the tip on the screenshots - that works much better!
September 24th, 2009 at 1:01 pm
I got it to work on gallery 2.3, all I had to do was change these items in teh theme.inc. “MatthewTheme” on lines 27, 29 to “iPhoneTheme” and then I changed line 33 to this: $this->setName($gallery->i18n(’iPhone’));
Works like a charm!!