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 a vanilla HTML5/CSS3 flex layout.
What are those “layouts”?
In the early days of web design, pages were created with 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 led to blowing up the whole layout. This meant the end of Chameleon skin, for example.
Then came the age of frameworks. Bootstrap, and Zurb – 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 led 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.
Tiger, for example, started on Bootstrap (1.x), later utilized Zurb (2.x), and finally, it received a flex layout with the latest version.
Instant preview
A handful of 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 images as well, 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 can also show 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 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:
- Open the skin directory (go one level up to “skins”) and quit jAlbum
- Rename “Tiger” to “Tiger3” for example
- 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.
Leave a Reply
You must be logged in to post a comment.