Labels

Tell your story

with the new Story skin
A picture is worth a thousand words

I wish it would be so. I would have written several thousand books by now. :) Undoubtedly, pictures can tell a lot, but words have their unique way to grab the visitor’s attention. After all, we humans store information organized into stories.

So far adding text in jAlbum was possible by using comments below images. In the new Story skin there’s no such limitation. You can add paragraphs of text – or whatever content by the way – at any place of the album. (You are just reading one such block.) And besides the custom content you can arrange folders and thumbnails too in any order – unlike with many other skins which group them by categories. This makes the result look like a blog post or like a book. Let me guide you through creating a story with Story skin.

Using images

Story skin is built around images just like any other photo album. However, here they can appear in 3 fashion: as thumbnails, as single images (a.k.a column-width) and full-width images. The skin picks the display mode based on their aspect ratio. By default the very wide images (> 2 : 1) are treated as full-width, the landscape images as single, and the rest as thumbnails. Here you are a few thumbnails:
jackson-david-Iex31-cnO-o-unsplash
jassir-jonis-QWa0TIUW638-unsplash
lana-graves-H1d3PCDvktA-unsplash
nojan-namdar-Tuk-oPtCb8I-unsplash
nojan-namdar-7RUP9u5UGUc-unsplash
r2Xmw0IESdeCCu4eBb6d_33F3F57EBEB3600F3B377F32425EE595_B1280_1280_1200_800.JPEG

Images between 3:2 and 2:1 aspect ratio are treated as wide (= column width) images. Naturally, you can avoid such images altogether by bumping up the Settings → Story → Design → Images → Thumbnail threshold.

Create a new chapter

Create a new chapter

Extra wide photos result in full-width images with larger titles, so they can function as chapter separators. You can simply crop the chosen image inside jAlbum to reach the needed 2:1 aspect ratio.

In order to get a nice “masonry” thumbnail layout you need to feed the skin with images of different size. Use the Edit mode → Crop tool to mix images with different aspect ratio!

If a landscape image ends up as “single” you can still mix into the thumbnails by using Edit mode → Image data → Treat image as = Thumbnail

tyizeciz_60-karl-fredrickson
eqsezncm4-c-olenka-kotyk
jennifer-pallian-173716
joseph-gonzalez-228027
monika-grabkowska-345620
oriento-744193-unsplash
RpgvvtYAQeqAIs1knERU_vegetables
joanna-kosinska-412005

Folders

In this skin you can add folders at any place. The folders are represented by a larger photo – the so-called “theme image” – and 3 other randomly picked thumbnails. To select an image as theme image just drag’n’drop it onto the "theme image" area on the right. (Right-click → Use as folder thumbnail should work too.)

If you’d like to exclude the theme image from the album – as I did with the “hero” image – just exclude it with the - (minus) button or the button in the top bar.

If jAlbum happens to be too smart and removes the excluded image from the “theme image” just drop it there again.

Portraits Portraits Folders can have descriptions. These descriptions can contain HTML formatting too, like this link: Unsplash

Portraits

Folders can have descriptions. These descriptions can contain HTML formatting too, like this link: Unsplash

23 images1 video

Urban photography Urban photography This folder is made up of images, nothing else, so you can check out how Story fares without the bells...

Urban photography

This folder is made up of images, nothing else, so you can check out how Story fares without the bells and whistles.

12 images

Custom content

Text blocks above were inserted as “custom pages”. To do this either use Right-click → New page → Empty page or use the New page button it the top bar.

The Title field is used as headline, while the Comment holds the content, which can be HTML formatted. For example you can use <p> ... </p> tags for creating paragraphs, or <b> ... </b> for bold text. Just make sure every tag gets closed, besides the self-closing tags, naturally: <img>, <br>, <hr>.

Use the «blockquote» tag to add a quote like this!

If you’d like to include a custom graphics in these sections just drag’n’drop the image into the top level’s res folder. (Create one if there’s no such yet!) Then you can refer to this image as <img src="res/imagename.jpg" />.

As an example I have included a screenshot of the new Details view mode of jAlbum 20+, which was made specifically for this skin to improve entering lenghty texts.

Detail view

This image won’t appear elsewhere in the album, only here.



Predefined custom pages

Below you’ll find the custom pages come with the skin: Newimages, About, Contact and Contents .

New images

Author

Laszlo Molnar

This is the skin's built-in About page. Right-click → New page → About.htt, fill in a few boxes, upload an image and here you go, the about page is ready.