svManager & WordPress

If you are creating a web site where new galleries are added frequently and especially if the site is administered by people with limited technical skills then svManager and WordPress make a powerful combination. Twan van Landschoot has written these notes on how he achieved seamless integration of svManager and a WordPress theme.

Note that some lines of code have been broken to fit into the display width of this document. Prior knowledge of WordPress is essential for what follows.

Let's look at the site structure :

Wordpress – www.clientwebsite.com/wordpress/

Theme – www.clientwebsite.com/wordpress/themes/themename/
Upload swfobject.js and viewer.swf to your theme folder

svManager – www.clientwebsite.com/svmanager/

Post – www.clientwebsite.com/svmanager/galleries/postname
The custom metafield in the wordpress post should correspond with the name of the directory.

I'm using a permalink structure that generates nice url's : www.clientwebsite.com/%category%/%postname%/

svManager path settings

Editor’s note: this feature of svManager has changed since the tutorial was written. Please see the section on Relative and Absolute Paths in the Advanced section of the svManager user manual.

The svManager default settings are for relative image and thumbnail paths, but that won't work with wordpress, so you'll have to change the settings to absolute paths. Look inside svmanager/includes/constants.php and locate the line:

define('PATH_SCHEME', '');

Change this to point to your svmanager directory:

define('PATH_SCHEME', 'http://www.clientwebsite.com/svmanager/');

Important: note the trailing slash.

Code examples

In the header.php, add the following code between the <head></head> tags :

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>
/swfobject.js"></script>

Add this code inside the wordpress loop :

<div id="flashcontent">
  SimpleViewer requires Macromedia Flash. <a href=
"http://www.macromedia.com/go/getflashplayer/">Get Macromedia Flash.</a> </div>
var fo = new SWFObject("<?php bloginfo('template_url'); ?>/viewer.swf",
"viewer", "400", "500", "7", "#FFFFFF"); fo.addVariable("preloaderColor", "0xffffff");
fo.addVariable("xmlDataPath", "www.clientwebsite.com/svmanager/galleries/
<?php $key="svgallery"; echo get_post_meta($post->ID, $key, true); ?>
/gallery.xml"); fo.write("flashcontent");

Position the <div id="flashcontent"> in your style.css.

This is an example for the index.php inside your theme folder :

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php if (have_posts()) : ?>
  <?php while (have_posts()) : the_post(); ?>
    <div id="content">
      <h1><?php the_title(); ?></h1>
      <?php the_content(); ?>
    </div>
    <div id="flashcontent">
      SimpleViewer requires Macromedia Flash.<a href=
"http://www.macromedia.com/go/getflashplayer/">Get Macromedia Flash.</a> </div> <script type="text/javascript"> var fo = new SWFObject("<?php bloginfo('template_url'); ?>/viewer.swf",
"viewer", "400", "500", "7", "#FFFFFF"); fo.addVariable("preloaderColor", "0xffffff"); fo.addVariable("xmlDataPath", "www.clientwebsite.com/svmanager/galleries/
<?php $key="svgallery"; echo get_post_meta($post->ID, $key, true); ?>
/gallery.xml"); fo.write("flashcontent"); </script> <?php endwhile; ?> <?php else : ?> <div> <h1>Not Found</h1> <p>Sorry, but you are looking for something that isn't here.</p> </div> <?php endif; ?> <?php get_footer(); ?>

That's It, now you should be able to add galleries to wordpress :

  1. Login to svManager
  2. Add a gallery
  3. Change gallery title to the postname
  4. Change Path from web root to/svmanager/galleries/postname (no spaces)
  5. Change gallery settings etc.
  6. Update
  7. Add images
  8. Login to wordpress
  9. Create a post with some content, and the title postname
  10. Scroll down to the custom metafield
  11. Add a key named : svgallery . Wordpress remembers the key so you only have to do this once
  12. Add the value : postname .
  13. Publish
  14. Done!

svManager description | svManager documentation