Introduction

This tutorial illustrates how to create image collections dynamically using server side script.
Instead of using several different showcase configuration files, one single, dynamic showcase configuration can be used to to display specific image collections.

In this tutorial we will demonstrate how this can be achieved using the popular scripting language PHP.
Using the sample code from this tutorial requires:

  • basic PHP knowledge
  • a webserver runnig PHP
  • a running image server

 

The Dynamic FSI Showcase Configuration File

Basically this is a standard FSI Showcase configuration file. The difference here is, that we enumerate the images to display using PHP script. In other words: we output the <image> nodes within the collection node <images> dynamically.

<fsi_parameter>

      <Options>
            <Skin value="silver" />
            <MenuAlign value="BL" />
      </Options>

      <PLUGINS>
            <PLUGIN src="Showcase">
                  <!-- Removed for demonstration purposes -->
            </PLUGIN>
      </PLUGINS>

      <Images>

      <?php

      if (!empty($_REQUEST['images'])) {
            // Edit to match your setting
            $imgserver = "http://www.domain.com/fsi/server?source=";
            $imgarray = explode("|",$_REQUEST['images']);

          foreach ($imgarray as $image){
                  echo '<Image label="'.$image.'">';
                  echo '<FPX>';
              echo '   <src value="'.$imgserver.$image.'" />';
                  echo '</FPX>';
                  echo '</Image>';
          }

      }
      ?>

      </Images>

</fsi_parameter>

The first thing to point out here, is that this is not an .fsi file, but a .php file instead. The reason is, that web servers usually do not parse *.xml files by default.
As FSI configuration files are XML files, we will use PHP to generate the XML needed.
For each image the script adds an <Image>…</Image> node to the configuration.
Within the node you need to specify at least the ImagePath parameter (the path and file name of the source image) and can optionally define more parameters like the label to display.

Now, if we configure Showcase to use this configuration file, we can dynamically change the pictures being displayed in the showcase.

Lets take a look at the display.html file embedding the FSI Showcase instance.

The HTML File embedding FSI Viewer

In the HTML file embedding FSI Viewer we now need to use the dynamic configuration file described above and we need to append the paths to the images for the collection using a HTTP query appended to the dynamic configuration file “dynsc_template.php”.
Note that the configuration file (parameter “cfg”) in the object and embed tag for FSI Viewer is being provided as an absolute URL rather than a file name only.

Example:
http://www.domain.com/dynsc_template.php?images=[image1] | [image2] |…[imageN]

As FSI parameters provided by HTTP query may not contain “=” and “?`” characters, we need to encode the “cfg” parameter value using the PHP function rawurlencode:

[…]fsi.swf[…]&cfg=<?php echo rawurlencode(‘http://www.domain.com/dynsc_template.php?images=[image1] | [image2] |…[imageN]‘); ?>

The [image]s specified must contain the path to the source image on your imaging server, e.g. images/Flowers/mypic.tif.
We seperate each image path using a “|” character.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
      <title>Untitled</title>
</head>

<body>
<script type="text/javascript" src="http://fsi.domain.com/fsi/js/fsiwriter.js"></script>
<script type="text/javascript">

<?php
// Edit the following lines to match your settings
$webserver = rawurlencode("http://www.domain.com/");
$image_server = "http://fsi.domain.com/fsi/server?source=";
$fsi_viewer = "http://fsi.domain.com/fsi/viewer/";


$full_url = $fsi_viewer."/fsi.swf?cfg=".$webserver."dynsc_template.php%3Fimages%3D".$_REQUEST['images']; ?>
// Replace [IMAGE with Path to image]
<!--
      writeFlashCode( "<?php echo $full_url ?>",
            "<?php echo $image_server; ?>/[IMAGE]&tmp=Large&quality=95&redirect=0&expire=0&width=600&height=480",
            "width=600;height=480");
// -->
</script>

<noscript>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,65,0" width="600" height="480">
            <param name="movie" value="<?php echo $full_url ?>"/>
            <embed src="<?php echo $full_url ?>"
                  width="600"
                  height="480"
                  type="application/x-shockwave-flash"
                  pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">
            </embed>
      </object>
</noscript>
</body>
</html>

 

In display.html we set the configuration file to be used for Showcase to a full valid URL,
http://www.domain.com/dynsc_template.php
and pass the $_REQUEST[‘images’] to the dsync_template.php which generates a valid XML-Image tag for each image specified.

Crossdomain Considerations

Please note that Adobe Flash Player can – by default – not retrieve XML data from a foreign domain. This is: an FSI Viewer instance located at http://somedomain/fsi.swf is not allowed to read XML data from http://anotherdomain/data.xml. In addition to that, Adobe Flash Player does not resolve domains to IP addresses. So do not mix adressing via IP addresses and domains.

To work around, that you need to request XML data from an other domain than you are loading FSI Viewer from, add a crossdomain policy file to the root directory of the domain your server side script resides in, e.g. http://anotherdomain/crossdomain.xml

<?xml version="1.0" encoding="iso-8859-1"?>
<cross-domain-policy>
<allow-access-from domain="*" secure="false" />
</cross-domain-policy>