Entering 2023 we have just released a new major version of Story skin. Story skin is known for its ability to produce page layouts with mixed content – text blocks, thumbnails, larger images, and subfolders an exciting way. Now we made the experience even smoother by adding new thumbnail layouts, and new barebone styles, and improving the mobile experience further. Here are the highlights.
1. New styles
Story skin traditionally had a few styles, all had the same large banner – the so-called “hero” – at the top. Now we wanted to show off the skin’s versatility, thus reworking 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 that takes you to the next image. Today we use the swipe gesture to achieve the same on mobiles. 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 rarely happens. This layout looks so much better than masonry and behaves well enough so far, so 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 a responsive layout, so the cells wrap into two lines on small screens, provided at least 4 columns are set. (Note, as this layout constrains the images into pre-defined boxes, a slight cropping might occur.)
Related setting: Settings / Story / Design / Images / Thumbnail layout
4. More hero layout options
So far all styles had an 80% high hero, which can be monstrous for some. Even though you could shrink it down to 50%, most users didn’t bother 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 is that you 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. (As browsers started blocking auto-starting videos with sound a few years ago, 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
Leave a Reply
You must be logged in to post a comment.