Gallery2 iPhone Theme

Item page

Album thumbnail page

Main gallery page

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.

Download the iPhone Gallery2 Theme

Share |

15 Responses to “Gallery2 iPhone Theme”

  1. Deb Says:

    Matt… you are having a serious problem distinguishing its and it’s. Can you find the error in this post?

  2. Matthew Says:

    Fixed my bad grammar :)

  3. Guddy Says:

    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

  4. Ernie Oporto Says:

    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.

  5. Rick Says:

    Very cool idea, I think I shall try out your code on my Gallery site…

  6. Joe Says:

    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?

  7. Matthew Says:

    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.

  8. brewster Says:

    Is this compatible with gallery 2.3? i get a variety of errors after i upload it to my themes directory.

  9. Matthew Says:

    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.

  10. Tango Says:

    This is great! Is there a way to download it? Or is it there and I’m just being blind :)

  11. Matthew Says:

    Tango, there’s a download link at the bottom of the post:
    Download the iPhone Gallery2 Theme

    Enjoy!

  12. Tango Says:

    Yeah…blind. Sorry about that. :-/

    Thanks.

  13. Ravi Pina Says:

    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.

  14. Matthew Says:

    Ravi, thanks for the tip on the screenshots - that works much better!

  15. Eddie Dillon Says:

    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!!

Leave a Reply

Comment Policy