Instructions for using the Nepal or Wedding Skins
This skin has been written to use minimal editing of the templates (slide.htt and index.htt) and to provide as much flexibility and control from within easily changed variables in JAlbum’s “advanced” tab, or from within the hints.jap config file. Please read the instructions for each of the available variables I have specified, to learn how best to use them.
Below are the variables as they appear in the hints.jap file. The “user.” part of them does not show in the “advanced” tab of JAlbum. Also, they will not appear in order there – I don’t know why.
user.alpha=style\=2,opacity\=100
user.alphaDir=style\=0,opacity\=100
user.alphaMOut=100
user.alphaMOutDir=100
user.alphaMOver=80
user.alphaMOverDir=80
user.backgroundLoc=http\://www.fyvie.net/~rfyvie/photos/nepal/res/Mountains.gif
user.Email=yourname
user.Email1=theirname
user.EmailDisplay=Your Name
user.EmailDisplay1=Their Name
user.EmailHost=yourdomain.com
user.EmailHost1=theirdomain.com
user.footerdir=C\:\\Program Files\\JAlbum\\skins\\Nepal
user.matchArtist=Please enter name of EXIF "Artist" field
user.matchArtist1=Please enter name (1) of EXIF "Artist" field
user.metaContent=Insert meta keywords here
user.NavIndex=NavUp.gif
user.NavNext=NavRight.gif
user.NavPrev=NavLeft.gif
user.navsideheight=54
user.navsidewidth=42
user.navupheight=42
user.navupwidth=54
user.thumbNumber=8
user.thumbSize=2
user.title=Insert your Title here (Advanced Tab of JAlbum)
EXIF tags
This skin relies heavily on the use of EXIF tags. To insert or modify the EXIF tags in each image, I used a wonderful little program called “Exifier”. You can find it here: http://www.exifer.friedemann.info/.
These are used in order to hide your email address from spam crawling web spiders, who exploit email addresses used in web pages to compile mass spam lists. The normal “mail:to” link is still generated, but using javascript, rather than lying in raw HTML, so it makes it harder for the spam spiders to recognise. This might be particularly important if you have your email on hundreds or thousands of webpages for each photo in your album. (An example of this exists at the bottom of the page for my own email address, if you view the source of this page).
“Fixed” Variables
(By “fixed” I mean variables that are called in the slide or the index pages, but that you do not specify from within JAlbum.)
$comment – Reads the jpg comment and inserts it as a caption under the slide.
$label – Reads the image’s filename (without the extension) and prints it under the slide
<%= meta.get("Artist") %> - Calls the EXIF field “Artist” and if present, will turn it into an email address (as described in $matchArtist). You can use a different value to call a different field if required.
To obtain a list of exactly which EXIF fields are present in your images, as well as which variable name to use to call them, simply insert this into your slide.htt file:
<ja:if exists="meta">
<pre><%= meta %></pre>
</ja:if>
When you generate your album, any EXIF or IPTC information you have on each image will appear on the slide at the place that you inserted this code.
Variables
(When used within the slide or index.htt files, they have the “$” in front. When used from JAlbum, or the .jap config file, they do not)
$title - The title of your album. This will be displayed at the top of the screen (as a link back to the index page. It will also be displayed in the title bar of your browser
$footerdir – This will specify the location of the directory (or URL) where you have placed your “footer.inc” file. This file is an ordinary text file, which includes your text with any HTML formatting you require. There is a sample footer.inc file that I have included in this skin. If you edit this file you can include your own footer. If you delete this file, or do not specify it’s location, there will be not footer on your output slide file.
$matchArtist - The value of this variable should match the expected name of the EXIF “Artist Name” field. If your photos have “Bill Gates” as their “Artist Name” tag, then type this as the value (case sensitive). If it finds a match to this name, it will proceed to convert this name in to a spam-proofed email address, using the values specified below. If the info from the EXIF “Artist” tag of each picture does not match (or if it does not exist), there will be no name or email link produced on the slide page.
If you do not wish the name to be an email link, then simply edit the slide.htt file to remove the javascript around the
<%= meta.get(“Artist”) %> line and leave this line on it’s own.
$Email – This value will give the name section of the email address. Include all text before the “@” in the address. For example, if your address is someone@yourdomain.com, then you will place “someone” in this field (without the quotes).
$EmailHost – This value specifies the rest of the bits after the “@” in your email address. If your address is someone@yourdomain.com, then place “yourdomain.com” as the value here (without the quotes).
$EmailDisplay – This is the name that will be shown on each of your slide pages after “Photo by:” Insert the name that you want displayed into this field. For example, if your name was “Bill Gates” you would put that in this field. “Bill Gates” will appear on each slide. When this link is clicked, an email will be made to someone@yourdomain.com (or whatever values you have set)
$matchArtist1,$Email1, $EmailHost1, $EmailDisplay1 – These are all as above in their usage. These are used to provide additional photographer’s details if required. If these are left blank, they will be ignored. If they are filled in with an exact match of the EXIF “Artist” field, then they will produce the same results as above. If any additional artists are needed to be identified, you will need to add additional code into the javascript of slide.htt as follows:
<script language=javascript>
var name = "<%= meta.get("Artist") %>";
switch (name)
{
case "$matchArtist" :
var email = "$Email";
var emailHost = "$EmailHost";
document.writeln("<a href=" + "mail" + "to:" + email + "@" + emailHost+ ">" + "$EmailDisplay" + "</a>");
break;
case "$matchArtist1" :
var email = "$Email1";
var emailHost = "$EmailHost1";
document.writeln("<a href=" + "mail" + "to:" + email + "@" + emailHost+ ">" + "$EmailDisplay1" + "</a>");
break;
default :
break;
</script>
Just cut the code from ‘case “$matchArtist1” to “break;’, just before ‘default’ and paste it just before ‘default’. Change the numbers on the end of the variables to 2, 3 and so on. Now add your variables into JAlbum accordingly. You can modify the values of the variables within the ‘document.writln’ command to reflect the numbers that you have added to the new variables, but you don’t seem to need to. I guess this must be because it’s within the same statement – it still works, as long as the first part matches.
$backgroundLoc – The location of your background image. This is set in your style.css file. It is highly recommended that you upload your background image first and then specify an external URL (http://) here. There is a location already in the config file for the background image of “mountain.gif”. This will work when viewing the generated files locally, but you will need to change it to the URL where this image will live on your site (http://www.yoursite.com/imagelocation/) if you want others to see it too.
The ‘background-position: 50% 2%’ line in the bright.css file will need to be modified if you wish to specify the position of the background image (x y). These values can either be in pixels or percentages.
$alpha – Specifies the type of alpha filter used for the rollovers. I believe the alpha filter only works with IE browsers, but I have not tested this. Some information on the use of the alpha filter can be found here: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/alpha.asp
I have chosen to use the style=2 filter, as it gives an oval shape around the thumbs. If you leave the style value out, it will leave the shape alone and just do the opacity. The opacity is set as a percentage value.
My recommended value of ‘style=2,opacity=100’ sets the pre-mouseover image to be rounded but with no fading.
$alphaMOver - specifies what the filter will do when you move the mouse over the thumbnail. In my recommended setting, I use a value of 80, which will fade the image by 20%.
$alphaMOut - restores the thumbnail after mouseover (if you set it to 100). You can try putting these values around the other way, to make the thumbs faded until mouseover, making it “light up” when you mouseover it.
You will see these variables interspersed throughout the ‘makeThumbLinks()’ javascript before the ‘!DOCTYPE’ header, as well as in the ‘previous’ and ‘next thumbnail’ code just after.
If you want to use different alpha filters for the thumbs on you index page, as compared to the ones on your slide pages, you will need to modify the values in index.htt and change any occurrence of the above variables to reflect new, unique variables, which you will then specify the values for in the “advanced” tab of JAlbum.
$alphaDir, $alphaMOverDir, $alphaMOutDir – Same as the previous variables, but they apply to the folder icon used for the directory pages, not the image thumbnails. The alpha filter setting of 2 is probably not wanted, as icons look silly when they have an oval fade around them. The recommended values for this variable is the same as the thumbnail alpha values, but with ‘style=0’ instead of ‘2’.
$NavPrev, $NavNext, $NavIndex – specifies the image files you want to use for the navigation buttons of previous, next and index. By default, this will look in the $res dir of the skin, unless, you also change the $res variable as well. There are some other buttons to use already in the /res directory of this skin if you don’t want to use your own.
$metaContent – Specifies the information (keywords) that you will use in your metatags. This is what search engines use to categorise and list your site, so specify words and phrases that reflect your content.
$thumbNumber – Specifies the number of thumbs that will be displayed under the slide. This will change depending on the size of your thumbs and also the width of your slides. Leaving this variable blank or with a 0 value will display no thumbs under the slide. The recommended value is somewhere between 8 and 10.
$thumbSize – Specifies the size of the thumbs. This value is expressed as division of the thumbsize – eg a value of 2 means that the thumb will be 2 times smaller than the original thumb (or half size). Decimals are possible here. Eg 2.5 will make the thumbs 2.5 times smaller. It is also possible to set values like 0.5 which will make the thumb bigger, but that looks silly, as it is resizing a smaller image to look bigger, so it goes pixellated. The original thumb size is specified on the ‘main’ tab of JAlbum, also being the size of the generated thumbs for the index pages and the ‘next’ and ‘previous’ thumbs above the slide.
That should be enough to get you up and publishing photos, or a good start to learn which bits to start modifying yourself.
26/9/03
|