Enhance the Plain skin via include files

 

Introduction

In version 2 of the Plain skin, most of the modifications discussed in my previous note have been added, except the points 4 and 5

In version 2 of the Plain skin Laza did implement on my request include files, which makes it possible to insert extra code in the skin, so there is no need to change the original skin code.

In this note I will show how you can enhance the Plain skin with new features, starting with making the lightbox background color equal to the index page background color.

Include files in Plain version 2.7

page-header.inc:

With an include file user-head.inc in the project directory, you can insert extra code just before the </head> tag. You could use that to add extra css-files of add css-code via <style> blocks. Code added via this file will be used in the root-album and in the folder albums.

user-style.css:

I used include file user-stylele.css to add extra css-code at the end of the common.css file. Code added via this file will also be used in the root-album and in the folder albums.

To see the code I used, download this file and all other files made in this note here. The extra code in the user-style.css file adds the following features:

• It makes the text and background color of the lightbox equal to the text and background color of the thumbnails page.

• The caption text color is also made equal to the text color of the thumbnails page.

• The caption background color is also made equal to the background color of the thumbnails page, but it is made more transparent (Opaque of 60%). It is of course more flexible to change the Page background color control on the design tab in a color control which allows also the define the transparency or even better to add a new color control with transparency for a caption, but this time I did not want to change the UI.

• copied the css-code used in my PhotoSwipe skin to make the the audio clip control smaller and more transparent.

• Finally I added css-code for the extra buttons discussed below.

To see the result of these changes open this sample album.

user-code.js:

With file user-code.js you can add extra javascript code to be used in the root album and in the folder albums. I use that for maps made with my MakeMap program. To make it possible to open the lightbox directory from a route map for the corresponding image number, via an URL like this: ''https://andrewolff.jalbum.net/Sample_Project_Plain_inc/index.html?M18”, which opens the light-box for the 19th image in the album.

This is also used in this album. You can find the used code in the zip-file and in this note.

With Plain version 3 and MakeMap version 2.8, the light-box can be opened by clicking on a marker or thumbnail in the map, without the use of this include file.

user-options.inc:

The contents in this file is used to add and/or change options of the lightbox. You can find these options in the PhotoSwipe gallerydocumentation.

Code added via this file will be used in the root-album and in the folder albums.

In this sample album it is used to set the bgOpacity to 1, otherwise you see part of the thumbnails page and clicking in the image will start or stop the slideshow.

user-top.inc:

You can use this include file to insert extra html-code after the title of the index page. You have to save such a file in each image directory where you like to show the extra code.

user-top-all.inc:

You can use this include file to insert extra html-code after the title of the index page. You have to save such a file in the root image directory if you like to show the extra code in the root output directory and all other output folders.

In this https://andrewolff.jalbum.net/Sample_Project_Plain_inc/ it is used to add a theme image,

user-code.inc:

You can use this include file to insert extra html-code after the  description of the index page. You have to save such a file in each image directory where you like to show the extra code.

user-code-all.inc:

You can use this include file to insert extra html-code after the description of the index page. You have to save such a file in the root image directory if you like to show the extra codein the root output directory and all other output folders.

In this https://andrewolff.jalbum.net/Sample_Project_Plain_inc/ it is used to add buttons to open the route maps and to download the corresponding gpx-file as described in this note.

The buttons are only added if the corresponding file 'track.gpx', 'GoogleMap.html' or 'OSM_Map.html' is found in the album output directory..

user-footer.inc:

You can use this include file to insert extra html-code at the end of the index page. Code added via this file will be used in the root-album and in the folder albums.

I used this in the sample album to insert a copyright statement under the thumbnails. But because the statement is automatically inserted in all folder albums, you see in the sample album that 3 folder albums show the wrong copyright statement.

Desired changes

Use user-footer.inc for footer code for the current folder and use user-footer-all.inc for footer code for the root folder and all other folders,

Demo albums

All described include files can be downloaded here and you see the effect of the unmodified Plain skin in this sample album, in this Audio-clip demo album.