Entering 2023 we have just released a new major version of Story skin. Story skin is known for its ability of producing page layouts with mixed content – text blocks, thumbnails, larger images and subfolders – in an exciting way. Now we have made the experience even smoother by adding new thumbnail layouts, new barebones styles, and improving the mobile experience further. Here are the highlights.
New Plain white, and Plain dark styles
1. New styles
Story skin traditionally had a few styles, that all had the same large banner – the so-called “hero” – at the top. Now we wanted to show off the skin’s versatility, thus reworked all the styles – using different hero arrangements, tuning down the harsh colors –, and dropping 3 new simple styles into the mix; “Plain dark”, “Plain white” and “Smooth”.
2. Mobile usability
jAlbum has its roots in the desktop era, but over time it gradually evolved to support mobile interfaces. Hence, its skins have inherited some mouse-native behaviors; like clicking an image takes you to the next image. Today, on mobiles, we use the swipe gesture to achieve the same. Story skin has been using the swipe gesture for navigating images, but using single-click for toggling the lightbox navigation and caption, and double-click for toggling the zoom is new.
Related setting: Settings / Story / Lightbox / Click action
3. New thumbnail layouts: justify and patchwork
Up to now, Story skin has offered 2 thumbnail layouts: “fixed grid” and “masonry”. Fixed grid is the old-school, table-like arrangement, while masonry is a horizontal, brick-like layout. This latter was laid out by the browser, using various CSS tricks to achieve the justified look. Unfortunately, browsers are not always capable of doing that – sometimes leaving gaps around the columns –, so we have added the new, javascript-driven “justified” layout, which always ensures the columns reach both the left and right edges. The script is also capable of changing the individual rows’ heights, therefore clipping of images almost never happens. This layout looks so much better than masonry, and behaves good enough so far, we might remove masonry one day.
The other new layout is the so-called “patchwork”, which varies the thumbnail sizes not only on the horizontal, but also on the vertical axis. It achieves this by grouping the images into 2 to 4-element groups. It creates responsive layout, so the cells wrap into two lines on small sreens, provided at least 4 columns were set. (Note, as this layout constrains the images into pre-defined boxes, more cropping might occur.)
Masonry
Justified
Patchwork
Related setting: Settings / Story / Design / Images / Thumbnail layout
4. More hero layout options
So far all styles had a 80% high hero, which can be monstrous for some. Even though you could shrink it down to 50%, most users didn’t bother with finding the related setting. Now every style comes with a different hero height, and you can size it down to even 30% of the screen height. Another change, that you now can completely remove the background image – a.k.a the theme image – so you can get a very clean and simple header if you’re after that. On top of this, the control bar can be moved above the hero, resulting in a more conventional web page layout. And if you have only a few folders or custom pages (e.g. About) you can have the top menu expanded on larger screens – like on this screenshot – which falls back to a hamburger menu on smaller screens.
Related setting: Settings / Story / Functions / Navigation / Expand on large screens
5. Auto-playing videos
A story can be made more exciting with videos. Even more if the videos automatically start when they get into focus. In the new version, the video closest to the center of the screen can be set to auto-start as you scroll. (Please note, as browsers since a few years block auto-start videos with sound, the first video might start muted. Once the visitor has allowed the sound, the further videos will start with sound.)
Related setting: Settings / Story / Design / Images / Autoplay video in view
