Topic: How to add captions?

Sorry if this has been answered elsewhere. Where are captions added in Simple viewer? I added a longish file name and the image with that name failed to show up in the viewer thumbnails or the main image area.

Thanks!
Lori

Re: How to add captions?

The caption text originates in your gallery.xml, <caption>The caption text</caption>. You can use XML options to control their color, which by default is white. You will need to change your caption color if you are using a white background. If you have simpleviewer pro there are a few other options for the captions such as positioning.


http://www.airtightinteractive.com/simp … tions.html
http://www.airtightinteractive.com/simp … tions.html

Mike Richards
SimpleViewer Support Team.

Re: How to add captions?

Thanks Mike!

Lori

Re: How to add captions?

Can I follow up on this question and extend it a little - what is it I am missing from my buildgallery.php that would:

* add captions = filename of each picture
* without adding links
* without adding right-click button

My current buildgallery.php is as follows:

<?php

// -----------------------

// buildgallery.php v1.9.1

// ----------------------

//

// by&#58;

// Jack Hardie - www jhardie net

// Mario - mariohm<at>fibertel net.ar

// Mike Peck - www mikecpeck net 

// Mike Johnson - mike<at>solanosystems net

// Christian Machmeier - www redsplash.de

// Airtight - www airtightinteractive net

//

// DESCRIPTION

// -----------------------

// This script automatically generates the XML document and thumbnails for SimpleViewer 

// www airtightinteractive net/simpleviewer/

//

// TO USE

// -----------------------

// Instructions are at&#58; www airtightinteractive net/simpleviewer/auto_server_instruct.html

//

//

// SET GALLERY OPTIONS HERE

// -----------------------

// Set Gallery options by editing the values in "double quotes" below&#58;



$svOptions&#91;'maxImageWidth'&#93; = "1000";

$svOptions&#91;'maxImageHeight'&#93; = "800";

$svOptions&#91;'textColor'&#93; = "0xffffff";

$svOptions&#91;'frameColor'&#93; = "0xffffff";

$svOptions&#91;'frameWidth'&#93; = "1";

$svOptions&#91;'stagePadding'&#93; = "3";

$svOptions&#91;'thumbnailColumns'&#93; = "3";

$svOptions&#91;'thumbnailRows'&#93; = "7";

$svOptions&#91;'navPosition'&#93; = "left";

$svOptions&#91;'title'&#93; = "Wedding 29 May 2009";

$svOptions&#91;'enableRightClickOpen'&#93; = "false";

$svOptions&#91;'backgroundImagePath'&#93; = "";

$svOptions&#91;'imagePath'&#93; = "";

$svOptions&#91;'addCaptions'&#93; = true;

$svOptions&#91;'thumbPath'&#93; = "";



// Set options for the buildgallery script by editing the values below



// Set $bgOptions&#91;'showDownloadLinks'&#93; to true if you want to show a 'Download Image' link as the caption to each image.

$bgOptions&#91;'showDownloadLinks'&#93; = true;



// Set $bgOptions&#91;'sortImagesByDate'&#93; to false to sort by file name. Otherwise files are sorted by date modified.

$bgOptions&#91;'sortImagesByDate'&#93; = false;



// Set $bgOptions&#91;'sortInReverseOrder'&#93; to false to sort images in forward order.

$bgOptions&#91;'sortInReverseOrder'&#93; = false;



// Set $bgOptions&#91;'overwriteThumbnails'&#93; to true to re-create existing thumbnails each time the program runs. Useful if you are editing the images and keeping the same names.

$bgOptions&#91;'overwriteThumbnails'&#93; = false;



// set $bgOptions&#91;'useCopyResized'&#93; to true if thumbnails are not being created. 

// This can be due to the imagecopyresampled function being disabled on some servers

$bgOptions&#91;'useCopyResized'&#93; = false;



// END OF OPTIONS

// -----------------------------------------------------------------------------------------------



// set-up page for valid html output

$pageTitle = 'simpleviewer build gallery script';

$page = new Page&#40;$pageTitle&#41;;

print $page->getHeader&#40;&#41;;

// wrap options in an object so they can be passed around easily

$options = new Options&#40;$svOptions, $bgOptions&#41;;

print '<p>&#40; buildgallery.php version 1.9, running under php version '.phpversion&#40;&#41;.', GD library version '.$options->gdVersion.'&#41;</p>';

// collect data about image files in the $imageFiles object

$imageFiles = new ImageFiles&#40;$options&#41;;

$fileNames = $imageFiles->getFileNames&#40;&#41;;

// attempt to create xml file

$galleryXml = new GalleryXml&#40;$fileNames, $options&#41;;

// attempt to create thumbnails

$thumbnails = new Thumbnails&#40;$fileNames, $options&#41;;

// close html tags

print '<p>buildgallery script complete</p>';

print $page->getFooter&#40;&#41;;



// -----------------------------------------------------------------------------------------------

// Class Options

// contains options for simpleviewer and buildgallery

class Options

&#123;

// array svOptions simpleviewer options

  var $svOptions;

// array bgOptions buildgallery options

  var $bgOptions;

// string gdVersion version number of GD library

  var $gdVersion;

// floating point number gdVersionNumber version number of GD library expressed as a number

// contents of $gdVersion after the second decimal point will be lost

// function Options constructs Options pre-processes path data and gets GD version



  function Options&#40;$svOptions, $bgOptions&#41;

  &#123;

    $this->svOptions = $svOptions;

    $this->bgOptions = $bgOptions;

    $this->bgOptions&#91;'imagePath'&#93; = $this->getPath&#40;'imagePath', $this->svOptions&#91;'imagePath'&#93;&#41;;

    $this->bgOptions&#91;'thumbPath'&#93; = $this->getPath&#40;'thumbPath', $this->svOptions&#91;'thumbPath'&#93;&#41;;

    $this->gdVersion = $this->getGDVersion&#40;&#41;;

    $this->gdVersionNumber = &#40;float&#41;$this->gdVersion;



  &#125;

// function getPath extracts image or thumb path from simpleviewer options

  function getPath&#40;$pathName, $path&#41;

  &#123;

// handle default path

    if &#40;$path == '' && $pathName == 'imagePath'&#41; &#123;return 'images';&#125;

    if &#40;$path == '' && $pathName == 'thumbPath'&#41; &#123;return 'thumbs';&#125;

// handle correctly formatted path with trailing /

    $lastChar = substr&#40;$path, -1&#41;;

    if &#40;$lastChar == '/'&#41;

    &#123;

      return substr&#40;$path, 0, -1&#41;;

    &#125;

    return $path;

  &#125;

  // function getGDVersion

// returns string $gd_version_number

// Use output buffering to get results from phpinfo&#40;&#41;

// without disturbing the page we're in.  Output

// buffering is "stackable" so we don't even have to

// worry about previous or encompassing buffering.

  function getGDversion&#40;&#41;

  &#123;

    static $gd_version_number = null;

    if &#40;$gd_version_number === null&#41;

    &#123;

      ob_start&#40;&#41;;

      phpinfo&#40;8&#41;;

      $module_info = ob_get_contents&#40;&#41;;

      ob_end_clean&#40;&#41;;

      if &#40;preg_match&#40;"/bgds+versionb&#91;^dnr&#93;+?&#40;&#91;d.&#93;+&#41;/i", $module_info,$matches&#41;&#41;

      &#123;

        $gd_version_number = $matches&#91;1&#93;;

      &#125;

      else

      &#123;

        $gd_version_number = 0;

      &#125;

    &#125;

    return $gd_version_number;

  &#125;

&#125;



// Class ImageFiles

// Extracts information about the files in the designated image directory

class ImageFiles

&#123;

// array $fileNames names and dates of files in images directory

  var $fileNames;

// function ImageFiles constructs ImageFiles

// parameter object $options simpleviewer and buildgallery options

  function ImageFiles&#40;$options&#41;

  &#123;

    $this->fileNames = array&#40;&#41;;

    $imageDir = $options->bgOptions&#91;'imagePath'&#93;;

    if &#40;!is_dir&#40;$imageDir&#41;&#41;

    &#123;

      die&#40;'<p class="error">Error&#58; the image directory <em>'.$imageDir.'</em> cannot be found</p>'&#41;;

    &#125;

    $folder = <at>opendir&#40;$imageDir&#41;;

    if &#40;$folder === false&#41;

    &#123;

      die&#40;'<p class="error">Cannot open the <em>'.$imageDir.'</em> directory &ndash; check the file permissions.</p>'&#41;;

    &#125;

    $jpgCount = 0;

    $sortMessage = '';

    while&#40;false !== &#40;$fileName = readdir&#40;$folder&#41;&#41;&#41;

    &#123;    

        if &#40;!$this->isImage&#40;$fileName&#41;&#41; &#123;continue;&#125;

        if &#40;$options->bgOptions&#91;'sortImagesByDate'&#93;&#41;

      &#123;

                $this->fileNames&#91;$fileName&#93; = filemtime&#40;$imageDir.'/'.$fileName&#41;;

          $sortMessage = 'Sorting images by date. ';

        &#125;

      else

      &#123;

                $this->fileNames&#91;$fileName&#93; = $fileName;

          $sortMessage = 'Sorting images by file name. ';

        &#125;

      $jpgCount ++;

    &#125;

    if &#40;$jpgCount == 0&#41;

    &#123;

      print '<p class="warning">Warning&#58; no jpg images found in <em>'.$imageDir.'</em> folder.</p>';

      return;

    &#125;

    else

    &#123;

      print '<p>'.$jpgCount.' jpg images found in <em>'.$imageDir.'</em> folder.</p>';

    &#125;   

    // now sort by date modified

    if &#40;$options->bgOptions&#91;'sortInReverseOrder'&#93;&#41;

    &#123;

      $sortMessage .= 'Sort in reverse order.';

        arsort&#40;$this->fileNames&#41;;

    &#125;

    else

    &#123;

      $sortMessage .= 'Sort in forward order.';

        asort&#40;$this->fileNames&#41;;

    &#125;

    closedir&#40;$folder&#41;;

    print '<p>'.$sortMessage.'</p>';

    print '<ol>';

    foreach &#40;$this->fileNames as $fileName => $value&#41;

    &#123;

      print '<li>'.$fileName.'</li>';

    &#125;

    print '</ol>';

  &#125;

// function getFileNames discards date information and returns array of image file names

  function getFileNames&#40;&#41;

  &#123;

    return array_keys&#40;$this->fileNames&#41;;

  &#125;

// function isImage returns true if $fileName has a suffix .jpg or .jpeg, otherwise returns false

// parameter string file name

  function isImage&#40;$fileName&#41;

  &#123;

    if &#40;$fileName&#91;0&#93; == "." || $fileName&#91;0&#93; == ".." &#41; &#123;return false;&#125;

    $components = explode&#40;".", $fileName&#41;;

    $length = count&#40;$components&#41;;

    if &#40;$length == 1&#41; &#123;return false;&#125;

    $suffix = strtolower&#40;$components&#91;$length - 1&#93;&#41;;

    if &#40;$suffix == 'jpg' || $suffix == 'jpeg'&#41; &#123;return true;&#125;

    return false;

  &#125;

&#125;



// class GalleryXml creates gallery.xml file

class GalleryXml &#123;

// var string $xml contents of gallery.xml file

  var $xml;

// function GalleryXml constructs XmlDoc

// parameter array $fileNames names of image files

// parameter object $options user options

  function GalleryXml&#40;$fileNames, $options&#41;

  &#123;

    $this->xml = '<?xml version="1.0" encoding="UTF-8"'." ?>n";

    $this->xml .= $this->getXmlOptions&#40;$options&#41;."n";

    foreach &#40;$fileNames as  $fileName&#41;

    &#123;

      $this->xml .= "<image>n";

        $this->xml .= "t<filename>".$fileName."</filename>n";

//add auto captions

        if &#40;$options->bgOptions&#91;'showDownloadLinks'&#93;&#41;

      &#123;        

            $this->xml .= "t".'<caption><!&#91;CDATA&#91;<a href="'.$options->bgOptions&#91;'imagePath'&#93;.'/'.$fileName.'" target="_blank"><u>Open image in new window</u></a>&#93;&#93;></caption>'."n";

        &#125;

        $this->xml .= "</image>n";

    &#125;

    $this->xml .= '</simpleviewerGallery>';

    $file = "gallery.xml";

// attempt to change permissions

    if &#40;file_exists&#40;$file&#41;&#41;

    &#123;

      <at>chmod&#40;$file, 0777&#41;;

    &#125;

    if &#40;!$file_handle = <at>fopen&#40;$file,"w"&#41;&#41;

    &#123; 

        print '<p class="error">Cannot open XML document&#58; $file. Change permissions to 0777 for $file and parent directory.</p>'; 

    &#125;

    elseif &#40;!<at>fwrite&#40;$file_handle, $this->xml&#41;&#41;

    &#123; 

        print '<p class="error">Cannot write to XML document&#58; $file. Change permissions to 0777 for file and parent directory.<p>';   

    &#125;

    else

    &#123;

        print '<p>Successfully created XML document&#58; <em>'.$file.'</em></p>';   

    &#125;

    <at>fclose&#40;$file_handle&#41;;

// attempt to change file permissions for later editing by user

    <at>chmod&#40;$file, 0777&#41;;   

  &#125;

// function getXmlOptions formats simpleviewer options as an xml tag

  function getXmlOptions&#40;$options&#41;

  &#123;

    $xmlOptions = '<simpleviewerGallery';

    foreach &#40;$options->svOptions as $optName => $optValue&#41;

    &#123;

      $xmlOptions = $xmlOptions .= ' '.$optName.' = "'.$optValue.'"';

    &#125;

    $xmlOptions = $xmlOptions .= '>';

    return $xmlOptions;

  &#125;

&#125;



class Thumbnails

&#123;

// function Thumbnails constructs Thumbnails class

// parameter array $fileNames names of source images

// parameter object $options options for simpleviewer and buildgallery

  function Thumbnails&#40;$fileNames, $options&#41;

  &#123;

    $imageDir = $options->bgOptions&#91;'imagePath'&#93;;

    $thumbDir = $options->bgOptions&#91;'thumbPath'&#93;;

    if &#40;!is_dir&#40;$thumbDir&#41;&#41;

    &#123;

// Note&#58; mkdir&#40;$thumbDir, 0777&#41; will not work reliably because of php's umask &#40;www php net/umask&#41;

      mkdir&#40;$thumbDir&#41;;

      chmod&#40;$thumbDir, 0777&#41;;

    &#125;  

    if &#40;$options->gdVersionNumber < 1.8&#41;

    &#123;

      print '<p class="warning">Warning&#58; the GD imaging library was not found on this server or it is an old version that does not support jpeg images. Thumbnails will not be created. Either upgrade to a later version of GD or create the thumbnails yourself in a graphics application such as Photoshop.</p>';

      return;

    &#125;

    elseif &#40;$options->gdVersionNumber < 2&#41;

    &#123;

      print '<p class="warning">Warning&#58; the GD imaging library on this server is version '.$options->gdVersion.'. Thumbnails will be of lower quality. You might want to upgrade to a later version of GD or create the thumbnails yourself in a graphics application such as Photoshop.</p>';

    &#125;

    elseif &#40;$options->bgOptions&#91;'useCopyResized'&#93;&#41;

    &#123;

      print '<p class="warning">Warning&#58; the <em>useCopyResized</em> setting has been set to <em>true</em>. Thumbnails will be of lower quality. You might want to create the thumbnails yourself in a graphics application such as Photoshop.</p>';

    &#125;

    print '<p>Attempting to create thumbnails in <em>'.$thumbDir.'</em> folder&#58;</p>';

    $thumbCount = 0;

    $thumbList = '<ol>';

    

    foreach &#40;$fileNames as $fileName&#41;

    &#123;

      $filePath = $imageDir.'/'.$fileName;

      $thumbPath = $thumbDir.'/'.$fileName;

      $thumbCount ++;

      if &#40;file_exists&#40;$thumbPath&#41; && !$options->bgOptions&#91;'overwriteThumbnails'&#93;&#41;

      &#123;

        $thumbList .= '<li>'.$fileName.' already exists</li>';

        continue;

      &#125;        

      if &#40;$this->createThumb&#40;$filePath, $thumbPath, $options&#41;&#41;

      &#123;

        $thumbList .= '<li>'.$fileName.' created</li>';

      &#125;

      else

      &#123;

        $thumbList .= '<li class="warning">'.$fileName.' could not be created</li>';

      &#125;

    &#125;

    $thumbList .= '</ol>';

    if &#40;$thumbCount > 0&#41; &#123;print $thumbList;&#125;

  &#125;

// function createThumb creates and saves thumbnail image.

// returns boolean $success

// uses older GD library functions if current ones are not available

// parameter string $filePath path to source image

// parameter string $thumbPath path to new thumbnail

// parameter object $options options



  function createThumb&#40;$filePath, $thumbPath, $options&#41;

  &#123;

    $thumbSize = 65;

    $quality = 85;    

// Get the image dimensions.

      $dimensions = <at>getimagesize&#40;$filePath&#41;;

      $width        = $dimensions&#91;0&#93;;

      $height        = $dimensions&#91;1&#93;;

    $smallerSide = min&#40;$width, $height&#41;;

// Calculate offset of square portion of image

// offsets will both be zero if original image is square

    $deltaX = &#40;$width - $smallerSide&#41;/2;

    $deltaY = &#40;$height - $smallerSide&#41;/2;

// get image identifier for source image

    $imageSrc  = <at>imagecreatefromjpeg&#40;$filePath&#41;;

// Create an empty thumbnail image.

    if &#40;$options->gdVersionNumber < 2 || $options->bgOptions&#91;'useCopyResized'&#93;&#41;

    &#123;

      $imageDest = <at>imagecreate&#40;$thumbSize, $thumbSize&#41;;

      $success = <at>imagecopyresized&#40;$imageDest, $imageSrc, 0, 0, $deltaX, $deltaY, $thumbSize, $thumbSize, $smallerSide, $smallerSide&#41;;

    &#125;

    else

    &#123;

      $imageDest = <at>imagecreatetruecolor&#40;$thumbSize, $thumbSize&#41;;

      $success = <at>imagecopyresampled&#40;$imageDest, $imageSrc, 0, 0, $deltaX, $deltaY, $thumbSize, $thumbSize, $smallerSide, $smallerSide&#41;;

    &#125;

    if &#40;!$success&#41; &#123;return false;&#125;

    &#123;

      // save the thumbnail image into a file.

          $success = <at>imagejpeg&#40;$imageDest, $thumbPath, $quality&#41;;

          // Delete both image resources.

          <at>imagedestroy&#40;$imageSrc&#41;;

          <at>imagedestroy&#40;$imageDest&#41;;                        

      &#125;    

      return $success;

  &#125;

&#125;

// Class Page produces html headers and footers

class Page

&#123;

// string $title contents for html <title></title> tags

  var $title;

// function Page constructs Page class

  function Page&#40;$title&#41;

  &#123;

    $this->title = $title;

  &#125;

// Function getHeader

// returns string containing html header, css styles and page heading

// rules for heredoc &#40; <<<EOD...EOD; &#41; are on www php net/heredoc

// in particular note the rules for white space in closing heredoc tags

  function getHeader&#40;&#41;

  &#123;

    $header = <<<EOD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "internet &#58;//www w3 net/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="internet &#58;//www w3 net/1999/xhtml">

<head>

    <title>$this->title</title>

    <meta internet -equiv="content-type" content="text/html; charset=utf-8" />



<style type="text/css">

  body &#123;

    background-color&#58; #ffffff;

    color&#58; #333333;

    font-family&#58; arial, helvetica, sans-serif;

    font-size&#58; 62.5%;

  &#125;

  h1 &#123;

    font-size&#58; 1.4em;

    font-weight&#58; bold;

  &#125;

  p, ol &#123;

    font-size&#58; 1.2em;

  &#125;

  .error &#123;

    color&#58; #FF0000;

    background-color&#58; #FFFFFF;

  &#125;

  .warning &#123;

    color&#58; #0000FF;

    background-color&#58; #FFFFFF;

  &#125;

</style>

</head>

<body>

  <h1>Creating XML and thumbnails for SimpleViewer.</h1>

EOD;

  return $header;

  &#125;

// function getFooter returns string containing closing html tags

// could also be used for a page footer, such as a copyright message

// rules for heredoc &#40; <<<EOD...EOD; &#41; are on www php net/heredoc

// in particular note the rules for white space in closing heredoc tags

  function getFooter&#40;&#41;

  &#123;

    $footer = <<<EOD

</body>

</html>

EOD;

  return $footer;

  &#125;

&#125;



?>

Thank you for your feedback wink