Sometimes it is useful to display a HTML page instead of a list of image thumbnails. For
example, when a root album is selected it is often preferrable to display some description
text and information about the gallery instead of folders which are already available
in the tree view.
This sample verifies if album folder contains text.html page, and if this file exists -
it is displayed instead of list of thumbnails and folders.
With this method you can build a web-site similar to this one.
Instructions
1. Edit t_index.php page template, find the place
where thumbnail view is displayed and wrap it with the following code:
| | <?php
// ---- Display HTML page 1 begins -----
$fname=absfname($album->m_sFolder . "text.html");
if (file_exists($fname))
{
$sAlbHeader="";
$sAlbHeader.="<span class=\"title\">". $album->GetTitle() . "</span>";
if (!empty($album->m_sDate))
$sAlbHeader.="<span class=\"date\"> (" . quotehtml($album->m_sDate) . ")</span>";
if ($bAdminMode && !empty($album->m_sFolder))
{
$sAlbHeader.=" ";
$filename=quoteurl($album->m_sFolder);
$sAlbHeader.="<span class=\"navigationBar\" id=\"albCommands\">";
$sAlbHeader.=dalbumBeginToolbar("albCommands");
$sAlbHeader.=getButton('editdef',
translateRef("editini.php?album=$filename&url=".
encodeCurrentLocation()),
$lang['editDefBtn'],$lang['editDefBtnTitle'],0);
$sAlbHeader.=dalbumEndToolbar("albCommands");
$sAlbHeader.="</span>";
}
// Print album comment
$cmt=$a->GetHTMLComment();
if (!empty($cmt))
{
$sAlbHeader.= "<table width=\"99%\" border=0 cellspacing=0 cellpadding=0>";
$sAlbHeader.= "<tr><td style=\"width:100%;\"><div class=\"comnt\">$cmt</div>";
$sAlbHeader.= "</td></tr></table>";
}
print '<div class="albHeader">';
print $sAlbHeader;
print '</div>';
print '<div class="textView">';
include($fname);
print '</div>';
}
else {
// ----- Display HTML page 1 ends -----
?>
|
... thumbnail view ...
| | <?php
// -----Display HTML page 2 begins -----
}
// -----Display HTML page 2 ends -----
?>
|
The result should look like follows:
| | <!-- Begin right pane - Album header control & ThumbView -->
<td class="insetPane" id="thumbViewPane">
|
| | <?php
// ---- Display HTML page 1 begins -----
$fname=absfname($album->m_sFolder . "text.html");
if (file_exists($fname))
{
$sAlbHeader="";
$sAlbHeader.="<span class=\"title\">". $album->GetTitle() . "</span>";
if (!empty($album->m_sDate))
$sAlbHeader.="<span class=\"date\"> (" . quotehtml($album->m_sDate) . ")</span>";
if ($bAdminMode && !empty($album->m_sFolder))
{
$sAlbHeader.=" ";
$filename=quoteurl($album->m_sFolder);
$sAlbHeader.="<span class=\"navigationBar\" id=\"albCommands\">";
$sAlbHeader.=dalbumBeginToolbar("albCommands");
$sAlbHeader.=getButton('editdef',
translateRef("editini.php?album=$filename&url=".
encodeCurrentLocation()),
$lang['editDefBtn'],$lang['editDefBtnTitle'],0);
$sAlbHeader.=dalbumEndToolbar("albCommands");
$sAlbHeader.="</span>";
}
// Print album comment
$cmt=$a->GetHTMLComment();
if (!empty($cmt))
{
$sAlbHeader.= "<table width=\"99%\" border=0 cellspacing=0 cellpadding=0>";
$sAlbHeader.= "<tr><td style=\"width:100%;\"><div class=\"comnt\">$cmt</div>";
$sAlbHeader.= "</td></tr></table>";
}
print '<div class="albHeader">';
print $sAlbHeader;
print '</div>';
print '<div class="textView">';
include($fname);
print '</div>';
}
else {
// ----- Display HTML page 1 ends -----
?>
|
| | <!-- Begin AlbumHeader -->
<div class="albHeader">
<?php template('AlbumHeader'); ?>
</div>
<!-- End AlbumHeader -->
<!-- Begin thumbView -->
<div class="thumbView">
<table cellpadding=0 cellspacing=2px border=0 width="98%" >
<?php template('ThumbView'); ?>
</table>
<div class="fldimgrow"><img src="images/transpix.gif" ...></div>
</div>
<!-- End thumbView -->
|
| | <?php
// -----Display HTML page 2 begins -----
}
// -----Display HTML page 2 ends -----
?>
|
| | <!-- End right pane table -->
|
2. [Optional] Edit custom.css and append the following lines to the file:
| | .textview
{
width:100%;
height:100%;
margin: 0px;
padding: 5px;
background-color: white;
color: black;
}
|
Adjust this CSS to define default colors for the displayed HTML.
3. That's all. Create text.html files in required folders and enjoy. test.html must not contain
<HTML> or <BODY > tags.
Notes:
- HTML page will be displayed with URL base set to DAlbum root
directory, not the directory with text.html file.
For example, when text.html is stored as /photo/pictures/myfolder/text.html
and you insert the following HTML code:
/photo/myimg.jpg will be displayed, not /photo/pictures/myfolder/myimg.jpg
as might have been expected.
To display images and refer to files in text.html directory, insert
<?php print quoteurl($g_sAlbumsRootBrowser . $album->m_sFolder); ?> before the location.
Example:
| | <IMG src="<?php print quoteurl($g_sAlbumsRootBrowser . $album->m_sFolder);?>_myimg.jpg">
|
- If you add images to your page, make sure that image filename starts with _ or . (dot).
Otherwise your images will be reindexed and thumbnails created.
| 
