Skin evolution: Turtle to Tiger

Although I am still an evolutionist, I can’t deny the new Tiger skin was born out of creation. The original goal was rewriting Turtle for responsive web design, but as time passed, more and more code parts got rewritten, many functionalities got changed and I left out some features too. Finally, I felt it was wiser to call it a new skin, not just a new version. Although Turtle skin will be maintained, the focus will be on Tiger.

The development started more than 6 months ago, and beyond replacing the HTML structure to cater to a responsive layout, the Java utility library has been rewritten from the ground in Javascript, just like any code in the skin. The only exception is the User Interface. I was afraid of using Javascript for the application initially, but it turned out to be much smoother (and forgiving) than BeanShell – jAlbum’s original scripting language. It’s even speedier. Hopefully, this will encourage other web designers with no Java knowledge to get involved in skin development.

The new skin is based on Turtle’s outlook, still more code came from the Photoblogger skin, which is newer and has more advanced features. Search, tag cloud, and site-wide shopping cart, to mention a few. It also inherited Photoblogger’s database-driven architecture, which makes it possible to search for and show any photo on any page.

I hope Turtle fans will like the possibility of reordering the sections on the index page to their taste. You can even add a custom section with any HTML content.

The vertically split layout of the Turtle skin had to be removed because it didn’t play well with responsive design. It was hard to handle on smaller screens, anyway. I hope you won’t miss it.

The User Interface has changed significantly too. I know it’s a drag for Turtle users, but Turtle’s UI got gradually more complex over the years to the point it was intimidating for new users. The new organization is intended to mimic the page layout, and you will find the settings and features under the corresponding tab, like Site, Header, Sections, Footer, Lightbox.

With the new Full-width hero image, the album fills in the window horizontally, not just the hero image but the top menu bar and the footer as well. (I called the “theme image” “hero” in this skin because this is how it’s called in WordPress for example.) I like this layout better than Turtle’s, but if you prefer the traditional layout you can switch back to that.

When we were talking about running the skin under a new name, I suggested David – jAlbum author – introduce the skin family support in jAlbum for an easier change between skins. This way when you switch from Turtle to Tiger you won’t lose your previous settings, and won’t fall back to skin defaults, like it happened in the past, instead the new skin tries to match as many settings as possible. Being Turtle the most popular skin, I believe it’s utterly important to help users switch. If you have custom pages, like About.htt or Contact.htt, you might need to repair them before “Make album” to fit the new scripting language with this tool, or you can simply re-add them.

Tiger’s styles were made to match Turtle’s on purpose, so you can seamlessly continue with the new skin in your album collection. Switching is good not only because of the new features and for the benefit of mobile visitors, but because this new skin is based on today’s newest technologies, like the Zurb Foundation framework, which makes these albums future proof, therefore Google will like your page too and put it higher in search rankings.

Since Tiger is based on a “JSON” database, the local testing is limited to the built-in browser or Firefox. This is because browsers block access to file types they don’t recognize to protect your local files. Unfortunately, this prohibits previewing Tiger albums in Chrome and IE, and you will see only the first dozen thumbnails and the album will be dysfunctional. You can still start Chrome in “less secure mode” – if you prefer that browser for previewing – by following the instructions in this sticky note. You can also install a web server, like Wamp on your PC, and access the local album through that, but it’s kind of overkill unless you are a web designer. Modern jAlbum versions also have a built-in web server for Previews, so they will behave the same as if they were uploaded.

I hope you will like Tiger as much as you like Turtle. Your feedback is welcome!