Displaying a watermarked SlideshowPro Director album in Wordpress

November 11, 2011

by Cardiff Creative

Rolealbum, director, lightbox, lightwindow, slideshowpro, slimbox, ssp, thumbnails, watermark, wordpress

Displaying a watermarked SlideshowPro Director album in WordPress

We have been working on a website for a client with 10,000 images to catalogue online.

One of the slickest pieces of gallery software for this task is SlideShowPro Director.

It has an API so you can request content directly from it using PHP.

One of the tasks was to pull out thumbnails directly from an album stored in SSP Director into a WordPress page. The full size images needed to display in a lightbox but also have a watermark and not link directly to the full size image.

Here is a solution we wrote. You will need the following plugins:

Allow PHP in posts and pages by HitReach

Slimbox2 with Slideshow by Travis Hydzik *

PHP API kit 1.2.1 from the SlideShowPro Account Centre
Unpack and upload into the ssp_director folder on your website

You will need to add a watermark to the gallery from within SlideShowPro Director.

Create a file /ssp_director/watermark.php on your website with the following content:

Code

<?php
error_reporting(0);
include_once('PATH-TO/ssp_director/DirectorPHP_1.2.1/classes/DirectorPHP.php');
$director = new Director('YOUR-API-KEY', 'YOUR-API-PATH');
$director->format->add(array('name' => 'thumb', 'width' => '140', 'height' => '140', 'crop' => 1, 'quality' => 95, 'sharpening' => 1));
$director->format->add(array('name' => 'large', 'width' => '850', 'height' => '600', 'crop' => 0, 'quality' => 95, 'sharpening' => 1));
if (isset($id)){
$album = $director->album->get($id);
$contents = $album->contents[0];
?>
<div id="images">
<?php foreach ($contents as $image): ?>
    <?php $width = $image->large->width; $height = $image->large->height; ?>
    <?php $width += 1; $height += 1; ?>
<a href="<?php echo $image->large->watermarked_url ?>" rel="lightbox;height=600;width=720" title="<?php echo $image->title; ?>"><img src="<?php echo $image->thumb->url ?>" width="<?php echo $image->thumb->width ?>" height="<?php echo $image->thumb->height ?>" alt="" hspace="2" vspace="1"/></a>
<?php endforeach ?>
</div>
<?php
}
else {echo 'Gallery Incorrectly or Not Specified.';}
?>

In a page or post, enter the following, replacing the # with the album ID you wish to display and the full path to the watermark.php file on your website:

Code

$id=#;include(‘/home/someuser/public_html/ssp_director/watermark.php’);

* Note that your theme may already come with a LightBox which is sufficient. Installing Slimbox might conflict and you may need to disable your current LightBox by editing the theme code.