DAlbum: Embedding

DAlbum 1.35 and earlier could be embedded into another web-site using frames or IFRAME tags. It was also possible to build a DAlbum-centered web-site (like this one).

DAlbum version 1.36 can be embedded into another web-site without frames as well. A relatively easy to install PHP-Nuke module is provided.

Instructions

The following describes how to include DAlbum into any PHP web-page. Check this demonstration for an example.

Please note that custom embedding requires good understanding of both your site code and DAlbum code. If you just have started with PHP and have no programming experience it may be very difficult to get it all working correctly.

First of all, install original DAlbum script into a folder (for example /site/dalbum). Set configuration options, customize stylesheets, install needed add-ons. Ensure that all directories are specified with absolute pathes (ex. /var/http/site/dalbum/.private instead of default ./.private). Switch GZip off, it's up to your site to control GZip options now.

Embedding DAlbum into your page includes the following operations:

Set DAlbum location constants.
Include DAlbum files.
Add a function to translate DAlbum URLs.
Update DAlbum stylesheet to not include any references to BODY tag.
[optional] Integrate DAlbum with your authentication scheme.

For example, you have a page /site/gallery.php, which has a box to display DAlbum interface in:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
</head>
<body>
<h1>My page</h1>
<p>I want DAlbum to be displayed here:</p>
<table border=5 width="90%">
<tr>
<td width="100px">Menu1<BR>Menu2<BR></td>
<td >
<!-- here should appear DAlbum page -->
</td>
</tr>
</table>
</body>
</html>

Firstly, use output buffering ( ob_start() , ob_end_flush() ) to let included DAlbum code control HTTP headers and redirections:

<?php
    ob_start();
    ob_implicit_flush(0);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
</head>
<body>
<h1>My page</h1>
<p>I want DAlbum to be displayed here:</p>
<table border=5 width="90%">
<tr>
<td width="100px">Menu1<BR>Menu2<BR></td>
<td >
<!-- here should appear DAlbum page -->
</td>
</tr>
</table>
</body>
</html>
<?php
    ob_end_flush();
?>

DAlbum script consists of multiple pages and all of them must be displayed inside your /site/gallery.php. To let DAlbum know what page to display, gallery.php will take an additional parameter - dp. To display DAlbum login page, the URL will be www.mysite.com/gallery.php?dp=login.php, to display DAlbum index page with folder "Mypics" - www.mysite.com/gallery.php?dp=index.php&folder=/Mypics/ .

To do that insert the following code into your /site/gallery.php page:

DALBUM_ROOT constant defines DAlbum directory location relative to current directory. As DAlbum is installed in dalbum subdirectory of the current directory, DALBUM_ROOT is set to "dalbum". There is no slash at the end of directory name.

DALBUM_BROWSEROOT constant defines how DAlbum directory is visible from the browser. "/site/dalbum/" means that a URL to images/page.gif in DAlbum installation directory should be displayed as /site/dalbum/images/page.gif. There is a mandatory slash at the end of this name.

Then required page is included and output stored in $_page variable for processing. Processing includes removal of HTML header, and replacing <body> tag with <div class="dalbumbody"> to limit stylesheet effect to DAlbum box only.

Function customTranlateRef translates DAlbum references to itself to refer to your gallery.php instead. For instance index.php?folder=/Mypics/ is translated to gallery.php?dp=index.php&folder=/Mypics/. Please note that photo.php references are not translated - returned page is an image and we don't need any HTML wrapping there.

DAlbum stylesheet also needs to be modified - originally it includes definitions for BODY and A tags which are probably defined already in the existing site stylesheet. PHP-Nuke module shows an example of automatic stylesheet conversion script that translates

body {}	to	.dalbumbody {}
body.centered {}	to	.dalbumbody div.centered {}
a.mystyle, b {}	to	.dalbumbody a.mystyle, .dalbumbody b {}

throughout the stylesheet automatically. It also replaces relative font-sizes (such as 70%) to absolute sizes. The last step is required if site uses tables for layout as relative font sizes do not work properly with nested tables.

Include this modified stylesheet into your gallery.php page headers together with DAlbum javascript files:

<head>
...
<link rel="stylesheet" href="dalbum/modified_stylesheet.css" type="text/css" >
<link rel="stylesheet" href="dalbum/custom.css" type="text/css" >
<script src="dalbum/dtree.js" type="text/javascript"></script>
<script src="dalbum/dalbum.js" type="text/javascript"></script>
...
</head>

Also edit your /site/dalbum/config/t_showimg.php page template and comment out call to dalbum_showimg_resize Javascript function at the bottom of the file:

//    dalbum_showimg_resize('showimgPagetable','Image','imageRow','imageWrap',
//                            <?php template('ImageSizeX');?>,
//                            <?php template('ImageSizeY');?>,
//                            '<?php template("BrowserFitMethod");?>');

To prevent your DAlbum installation from being used directly, add the following code into your /site/dalbum/config/custom.php:

if (!defined("DALBUM_EMBEDDED") && !defined("DALBUM_PHOTO_PAGE"))
    die("Error: DAlbum can only be used as module.");

This is especially important if you do not use DAlbum built-in authentication and rely on your site code to verify user identity.

Previous: Shared code

Next: PHP-Nuke