Template file listings
Here are the Picasa template files for Birch Island :
index.tpl (the third and fourth lines set maximum image size)
#templatefile -v "1.0" -n "Birch Island" -d "black background, thumbnail points to full view picture"
define exportFileName index.html
define imageWidth 600
define imageHeight 600
include header.html
targetloop targetfile.tpl thumbnail.html
include footer.html
copy assets\
targetfile.tpl
#templatefile full view image
define exportFileName target.html
include fullview.html
header.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Birch Island Gallery: <%albumCaption%></title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div class="textreg"> Birch Island Gallery / <%albumCaption%><br />
<div class="textright"> <a href="../../gallery.htm">Back to Gallery</a></div>
Click a picture to see a larger view</div>
<hr size="1" />
thumbnail.html
<div class="thumbnailstyle"><a href="<%targetPath%>"><img align="center" src="<%itemThumbnailImage%>" width="<%itemThumbnailWidth%>" height="<%itemThumbnailHeight%>" title="<%itemCaption%>" border="0" /></a> </div>
footer.html
</body>
</html>
fullview.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Birch Island Gallery / <%albumCaption%> / <%itemCaption%></title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div class="textreg">Birch Island Gallery / <%albumCaption%> <br />
<div class="textright"> <a href="../../gallery.htm">Back to Gallery</a></div><%if !isFirstTarget%><a href="<%firstTarget%>"><%endif%>First<%if !isFirstTarget%></a><%endif%> |
<%if isPrevTarget%><a href="<%prevTarget%>"><%endif%>Previous Picture<%if isPrevTarget%></a><%endif%> |
<%if isNextTarget%><a href="<%nextTarget%>"><%endif%>Next Picture<%if isNextTarget%></a><%endif%> |
<%if !isLastTarget%><a href="<%lastTarget%>"><%endif%>Last<%if !isLastTarget%></a><%endif%> | <a href="<%referrer%>">Thumbnails</a>
<hr size="1" /></div>
<div class="photo"><p>
<a href="<%referrer%>"><img src="<%itemLargeImage%>" width="<%itemWidth%>" height="<%itemHeight%>" title="<%itemName%> (large)" border="0" /></a><%itemCaption%></p></div></body>
</html>
style.css (stored in subfolder assets)
body {margin-top: 20px; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #000000}
A {color: #999999;}
A:hover {COLOR: #804c4c; }
A:visited {color: #999999;}
.textsm { font-size: 14px; COLOR: #ffffff;}
.textbg { font-size: 20px; COLOR: #ffffff; }
.textreg { font-size: 12px; COLOR: #999999; }
.textcap { font-size: 10px; COLOR: #999999; }
.textright { font-size: 12px; color: #999999; float: right; clear: none; margin-right: 5px; }
.thumbnailstyle { padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; text-align: center; width: 180px; height: 180px;
float: left; font-size: 10px; color: #999999; clear: none; }
.photo { float: left; width: 800px; font-size: 12px; color: #bbbbbb; }
.photo img { float: left; margin-right: 7px}
preview.jpg
Capture a browser window to the Clipboard using Alt-PrintScreen then paste into Paint or other photo program. Do this for the thumbnails view and a full-view, and use the two images to create a jpeg like this, width 280px.
