28 augustus 2014

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

Both in the PhotoSwipe 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 “ThemeImage.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 “ThemeImage.jpg” in the output directory (File > Save for web …) with a lower resolution,  a width of 1853 pixels and a height of 582 pixels. We created a first version of the album before we added the theme image, to create the output  directories.

Next we opened the Index page tab of the Slide Show 4 settings:



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

You have the possibility to show the the Album title above the theme image ( clear check-box “Show Album title in theme image”), in the theme image (check check-box “Show Album title in theme image”) and you can hide the album title text (check check-box “Show Album title in theme image” and check check-box “Hide Album title in theme image if theme image is displayed.”). In this example we did draw the album title in the image, so we checked both check-marks.

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 munch 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 100%. 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.

Due to the responsive design of the Slide Show 4 skin, the size of most images is adapted to the screen size of the display device. If you use a small screen on a mobile device like the iPhone, the theme image may take so much space that there is hardly room for the thumbnails. With field “Hide Theme image if screen heigth < “ you can decide to hide the theme image if the device height is too small. The skin reads the screen.width and screen.height of the used device and selects the smallest of the 2 values as screen height (because you can rotate mobile devices). If the theme image is hidden, the album title is showed instead in the selected text color.

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”. 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. 

Click here  to download and install newest version of the Slide Show 4 skin and click here to open the Slide Show 4 skin manual.