21 november 2017

How to implement albums with a theme image with the FancyBox, the Slide Show 4 and the PhotoSwipe skin.

Both in the PhotoSwipein the FancyBox and in the Slide Show 4 skin is the possibility to add theme images implemented. This note describes the details to add theme images to your albums made with these skins.

You can use as theme image one of the images in the output slides folder, enter in that case in the Theme image field a string like "slides\Vecht_121027_1242-7.jpg" or you can put a new image to be used  as theme image in the output directory where also the index.html file of the album is located. As  an example we use the last method and put an image named “ThemeImageWithTitle.jpg” in the output folder. The original  theme image is processed in a photo edit program like Photoshop Elements, where we cropped the image so that the width is much larger as the height and we added the album title to the image. Finally we saved it as file “ThemeImageWithTitle.jpg” in the output directory (File > Save for web …) with a lower resolution,  a width of 2560 pixels and a height of 791 pixels. We created a first version of the album before we added the theme image, to create the output  directories.

Next we opened the Theme Image sub-tab of the skins Index page settings:

In the Theme Image field we enter the name of the theme image: “ThemeImageWithTitle.jpg”.

On the Index page / General tab you have the possibility to select in the 'Show Album title' group “Above the theme image”, “In the theme image” and you can hide the album title text “Hide Album title” In this example we did draw the album title in the image, so we selected “Hide Album title”.

If you let jAlbum write the album title in the theme image, the title may be unreadable if the Album title text color does not differ much with the colors of your theme image. Select in that case another color with the “Album title text color” color selector or put the title above the theme image by clearing check-box “Show Album title in theme image”.

In field “Theme image width” you enter the display width of the theme image. We recommend to use a width in % so that the theme image is scaled if the window size is changed. I use always 96%. If you enter a value like 600px, the width is fixed and the size of the image is not changed if the window size changes. If you enter nothing the natural width of the image is used.

It is also possible to use the Theme image as a background image. Set in that case check-mark 'Use Theme image as background' and fill the height textbox with the height of the theme image (791 in this example). However you should not do this if you set the album title in the theme image with an editor, because depending on the window size, part of the title may fall outside the window.

With the next 4 fields, you can design a border around the theme image.

At the end of the index page you can show another special image. I use that to show the height profile of a walk, but you can use that image for other purposes as well. Put that image also in the output directory and enter the file name in field “Profile image” of the Index page / Footer tab. This image is not scaled, it is displayed in its natural width / height.

If you are ready with entering settings and the special images are loaded into the output directory, you have to re-make the album, even if you did not change anything to the settings after you loaded a theme or profile image.

To see the above described album, click here.

If you make an album with folder directories with one jAlbum project file, it is also possible to add theme images to the albums in the subdirectories. The creating of a tree of albums with the Slide Show 4 skin has been described here.

The album creator has to enter the theme image filename in the Slide Show 4 index page settings and he has to put the theme image in the output directory before the final creation of the album. 

If no theme image is entered in the settings, no theme image is displayed.
If a theme image is entered in the settings, but the corresponding file is not found, no theme image is displayed.
If a theme image is entered in the settings and the corresponding file is found, a theme image is displayed.

If you put a file “ThemeImage.jpg” in the output directory of the top level index file and nothing in the output subdirectories, a theme image is only showed in the top level index file.

If you like to use a theme image in one of the subdirectories, you should put in that subdirectory also a file named “ThemeImage.jpg”. This file contains of course another picture. If you like you can give all subdirectories a theme image by putting a “ThemeImage.jpg” file, each with a different image, in all subdirectories.

However if you use jAlbum verion 15 or later version, you can use the new Folder panel as described in the skin manual