Tiger skin reborn

Most of you have probably met Tiger skin. Meanwhile, new web design techniques appeared in other skins often quite early, I was afraid of rushing to introduce them in our most frequently used skin, Tiger. This way it got gradually left behind in terms of design and also made it harder to maintain code shared across my skins (Animatics, Lucid, Photoblogger, Projector, Story, Tiger). Finally, I bit the bullet and started to rewrite Tiger. The most important change was eliminating the previous Zurb framework, and replacing it with vanilla HTML5/CSS3 flex layout.

What are those “layouts”?

In the early days of web design, pages were created using the so-called “table” layout. You can imagine this like an Excel table. Complex graphics had to be chopped into small pieces. It was a nightmare to maintain, I can tell. Every time you wanted to change a small piece, you had to change the code in several (distant) places and the smallest error had lead to blowing up the whole layout. This meant the end of Chameleon skin, for example.

Then came the age of frameworks. Bootstrap, Zurb - they were all based on a “float” layout, implementing a column system, which was able to adapt to smaller screens by specifying different column widths to elements based on screen width. These layouts, however, required a lot of external code and were not as flexible as web designers would wish.

Finally, browser makers caught up with designer wishes. “Flex” and “Grid” layouts were implemented - first in Chrome and Firefox, later in all browsers. Probably this transition has lead to Internet Explorer and Opera browser’s death. Today, besides Firefox, all browsers are based on Chrome’s rendering motor: “WebKit” - yes, even MS Edge. Flex layout is capable of adapting to the available space both ways: horizontally and vertically. You can imagine this layout as a sack of marshmallows. In today’s web design image sizes are not carved into stone anymore. This is why many skins calculate the best thumbnail size automatically, as Tiger does too.

Tiger, for example, has started on Bootstrap (1.x), later it utilized Zurb (2.x), and finally, it has received flex layout with the latest version.

Instant preview

Quite a few other skins have already received the so-called “instant preview” feature. With the help of this users can immediately view the effect of dozens of settings. Both the index page and the lightbox panel show such a preview now.

Variants support

In jAlbum 24 we have introduced image variants. These variants provide the visitors’ browsers with multiple image sizes, so they can pick the best resolution for the given device / screen resolution. This not only means different sizes, but also different image formats. For example, jAlbum can generate WEBP format too, besides the ages-old JPG files. WEBP has the advantage also of being better compressed (i.e. smaller files) and has opacity and animation support. You can read more about this new feature here.

Further news

New masonry thumbnail layout (variable width, horizontal)

New optional folder thumbnail layout: the text placed beside the image (like in Turtle)

2 icon styles: fat (legacy) and thin

“Sticky sections” - Filtering and Sort, Shopping cart, and Feedback can be made fixed to viewport

Continuous zoom - which not only plays with variants, but it’s also capable of showing the full-resolution originals (if included).

Playing safe with skin updates

Although I tried to make the skin upgrade from 2.x to 3.x as smooth as possible, the devil never sleeps, as they say. Tiger skin saves the old settings file in the Project folder (Ctrl-Shift-I) as jalbum-settings-old.jap. Still, I’d suggest playing around with the new version first on a small test album. You can import the settings from your production album with File → Import → Settings from project.

It's also advisable to keep backups of your precious albums with File → Duplicate project.

If you can’t make friends with the new version you can still revert to v2, but keep Tiger 3 for later experiments:

1. Open skin directory (go one level up to “skins”) and quit jAlbum
2. Rename “Tiger” to “Tiger3” for example
3. Install the latest major version from here (left column below): 2.14.5 Mar 24, 2021 (previous main version)

This way both versions will remain.

Comments are welcome as usual,
Laza