Customizing galleries created by svManager

The following assumes a basic knowledge of html and css.

The index.php page

Look inside one of your gallery folders, for instance g1 and you will find a file called index.php. This is the file that creates the web page for your gallery. When svManager creates a gallery, it takes the master copy of index.php and copies it into the gallery folder.

So, to change the appearance of an existing gallery, for instance to add a logo or a 'back' button, you will need to edit the index.php file in that gallery folder.

If you want to change the appearance of all future galleries, then you will need to edit the master copy of index.php. The location of the master file was changed in svManager 1.3.0. Look at your version number on the lower left of the admin screen. If this is 1.2.3 or less then the master file is svmanager/svmaster/index.php. In version 1.3.0 there are two master files, one for SimpleViewer and one for TiltViewer. These are svmanager/plugins/simpleviewer/svmaster/index.php and svmanager/plugins/tiltviewer/tvmaster/index.php.

How php works

A php page will often look a lot like an ordinary html web page. Except that embedded in the page, you will usually find blocks of php code between the php start tag <?php and the php end tag ?>. Unless you know some php then it's best not to change anything inside the php tags. However, it might help your understanding if you look at the php code and try to find a print or echo statement. Either print or echo means that php is outputting something to the browser, usually they are outputting html. So instead of you or I typing html markup into the page, php is doing it for us.

The code view and the browser view

Look at a php page in a text editor and you will see the html, maybe some css and the php code. Look at the same page with 'view source' in your browser and you'll see the same (probably more) html, the same css but no php code. What you are seeing is not the code but the results of running the code. Comparing these two views of the same page will help you see what php is doing.

Anatomy of index.php

Here is a typical index.php page for SimpleViewer as it looks in a text editor. I've split the code into sections and added comments to explain what is going on, which bits you can mess around with and which bits you should leave alone. Your index.php might look a little different depending on which version of svManager you are running but it should be very similar. The TiltViewer page is longer but is composed of the same basic blocks. Note that some longer lines in the code shown here are wrapped to the width of this page. Wrapped lines are indented by one space.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- saved from url=(0014)about:internet --> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

All the above is just standard html.

The following block of php turns error reporting off, gets the gallery title and background color from a file and outputs the html page title. You should leave this section untouched, unless you have a good knowledge of php.

<?php error_reporting(0); $preferences = file_get_contents('preferences.txt'); $preferences = unserialize($preferences); $title = $preferences['htmlTitle']; $backgroundColor = '#'.substr($preferences['backgroundColor'], 2, strlen($preferences['backgroundColor']) - 2); print '<title>'.$title.'</title>'; ?>

End of php block, back to normal html.

<!-- Download SimpleViewer at www.airtightinteractive.com/simpleviewer -->

The next line is required. It loads the swfobject javascript to present the Flash gallery in the web page.

<script type="text/javascript" src="swfobject.js"></script>

The next block contains basic css to set the appearance of the page, see below for how to edit this code.

<style type="text/css"> /* hide from ie on mac \*/ html { height: 100%; overflow: hidden; } #flashcontent { height: 100%; } /* end hide */ body { height: 100%; margin: 0; padding: 0; background-color: #181818; color:#ffffff; } </style> </head>

The body tag contains a tiny bit of javascript to try to bring the window to the front of other windows. It's not strictly necessary.

<body onload="this.focus();">

We are now in the body of the page. You can add any (valid) html here that you like. For instance, your could add a header or some navigation or you could wrap the next section in a table cell (if you must) or a div.

This is the bit that actually shows your gallery. Think of it as creating a rectangular block in the page with your gallery inside it. There is some javascript and also a little php to set the background color. This is another section where it's best not to change anything unless you fully understand what you are doing.

<div id="flashcontent"> SimpleViewer requires Macromedia Flash. <a href="http://www.macromedia.com/go/getflashplayer/"> Get Macromedia Flash.</a> If you have Flash installed, <a href="index.html?detectflash=false">click to view gallery</a>. </div> <script type="text/javascript"> var fo = new SWFObject("viewer.swf", "viewer", "100%", "100%", "8", "<?php echo $backgroundColor; ?>"); fo.addVariable("preloaderColor", "0xffffff"); fo.addVariable("xmlDataPath", "gallery.xml?nocache= <?php echo rand(); ?>"); //fo.addVariable("firstImageIndex", "5"); //fo.addVariable("langOpenImage", "Open Image in New Window"); //fo.addVariable("langAbout", "About"); fo.write("flashcontent"); </script>

End of the technical bit. You can put more html here, for instance to close your div or table cell or to add a footer.

</body> </html>

Editing the css

The standard css code between the <style> and </style> tags is designed to make the gallery fill the whole height of the browser window with no scroll bar. If you are adding your own content above or below the gallery then this is not what you want! One approach is to set a fixed height in pixels for the flashcontent div. So for instance, if you are adding a header or a footer then set a fixed height like this:

<style type="text/css"> body { margin: 0; padding: 0; background-color: #181818; color: #ffffff; } #flashcontent { height: 650px; } </style>

There is no particular magic in my choice of 650px for the height - choose a size that suits your images and fits your design. It will usually look best if you set the body background color to be the same as your gallery background.

Note that this code is actually simpler than the original - it's easier to design with fixed dimensions than to make things change when the window changes.

Another approach would be to embed the code that creates the gallery inside a div (or table cell) that itself has a fixed height.

Summary - html, css, javascript and php

So what we have is a normal web page, that anyone with a basic knowledge of html can change and edit except for some extras that it's best to leave unchanged, unless you understand javascript and php. The bits to be careful of are:

  • The block of php code in the html <head> section
  • The line that loads the javascript, also in the <head> section
  • The block of mixed javascript and php code that displays your gallery

As long as you have these three blocks of code, you can do what you like with the rest of the page. It doesn't matter if you edit the standard version of index.php or if you start with a page of your own and copy the three blocks of code into your page - in the correct place of course.

And before you change anything - take a backup!