06: IMAGES AND THUMBNAILS

Of course, your results pages should have images– what’s the point in having image collections if you can’t see the image? The key to displaying images (whether the full image or a thumbnail) is the pointer, or dmrecord number.

These two, main, image utilities do not use the dmWebServices system, instead using direct calls to the file system.

PLEASE NOTE: In the near future, CONTENTdm will begin to use the International Image Interoperability Framework (IIIF) group’s presentation API instead of getthumbnail and getimage.

Getting a thumbnail

API: getthumbnail

INVOKED: <collection URL>/utils/getthumbnail/collection/<collection alias>/id/<pointer>

EXAMPLE: http://www.idaillinois.org/utils/getthumbnail/collection/linl/id/72

Adding a thumbnail for each returned result in dmQuery

dmBrowse.php

This program searches for the term “woman” in all of the collections and returns the first 50 results.

<?php

$xmlData = file_get_contents('https://server16614.contentdm.oclc.org/dmwebservices/index.php?q=dmQuery/all/title^woman^all^and/title!subjec!descri/title/50/1/0/0/0/0/xml');

// Create the document object

$xml = simplexml_load_string($xmlData);

$pager = array();

// How many hits did the search yield

foreach ($xml->xpath('//pager') as $hits) {
        $pager[] = array(
                'start' => (string) $hits->start,
                'total' => (string) $hits->total
        );
}

$result = array();

// Get the nodes and loop them

foreach ($xml->xpath('//record') as $record) {
        $result[] = array(
                'collection' => (string) $record->collection,
                'title' => (string) $record->title,
                'subject' => (string) $record->subjec,
                'descri' => (string) $record->descri,
                'thumb' => (string) $record->pointer
        );
}

$numberOfHits = $pager[0]["total"];
$resultCount = count($result) - 1;

?>
<html>
        <head>
                <title>My Search Results</title>
        </head>
        <body>
                <div id="header">
                        <h1 style="text-align: center;">My Library</h1>
                        <h2 style="text-align: center;">Browsing our collections, with <?php echo $numberOfHits ?> results</h2>
                </div>
                <div id="list">
                        <ol>
                        <?php
for ($i=0;$i<=$resultCount;$i++) {
        $title = $result[$i]["title"];
        $subject = $result[$i]["subject"];
        $description = $result[$i]["descri"];
        $thumb = $result[$i]["thumb"];
        $collection = $result[$i]["collection"];
        $collection = str_ireplace("/", "", "$collection");

        $imgStr = "http://www.idaillinois.org/utils/getthumbnail/collection/$collection/id/" . $thumb;
        echo "<li><img src=\"$imgStr\"> <strong>$title</strong><br /><em>$description</em><br />\n$subject\n<p /></li>\n";
}
?>
                        </ol>
                </div>
                <div id="footer">
                        <p />
                        <strong>Our Library</strong>
                </div>
        </body>
</html>

Getting a full image

API: getImage

INVOKED (From OCLC’s own site): 

<web server>/utils/ajaxhelper/?CISOROOT=alias&CISOPTR=pointer&action=2&
DMSCALE=scale&DMWIDTH=width&DMHEIGHT=height&
DMX=x&DMY=y&DMTEXT=text&DMROTATE=degrees

  • alias is the collection alias
  • pointer is the pointer to the item in the collection
  • scale is the percentage to scale the image
  • width is the image width in pixels
  • height is the image height in pixels
  • x is the x-coordinate of the upper-left corner of the cropped-out region
  • y is the y-coordinate of the upper-left corner of the cropped-out region
  • text is the words to be highlighted in the image. Requires bounding box information
    to be stored for the item; otherwise no highlighting occurs
  • degrees is the number of degrees to rotate the imageReturns a scaled and cropped image for display. The specified item must be an image. The returned image is in JPEG format.

EXAMPLE: http://www.idaillinois.org/utils/ajaxhelper/?CISOROOT=linl&CISOPTR=72&action=2&DMSCALE=100&DMWIDTH=3000&DMHEIGHT=3000&DMX=0&DMY=0

dmGetItemInfoWebPage.php

Modify dmBrowse.php, above, in the for… loop that displays the thumbnail and data for each item by adding an <a href> to the <img> tag:

        $imgStr = "http://www.idaillinois.org/utils/getthumbnail/collection/$collection/id/" . $thumb;
        $urlStr = "dmGetItemInfoWebPage.php?collection=$collection&pointer=$thumb";
        echo "<li><a href=\"$urlStr\"><img src=\"$imgStr\"> </a><strong>$title</strong><br /><em>$description</em><br />\n$subject\n<p /></li>\n";

which will then allow dmBrowse.php to pass along the collection alias and  record number to a full screen display.

 

<?php

$collection = $_GET["collection"];
$pointer = $_GET["pointer"];

$xmlData = file_get_contents("https://server16614.contentdm.oclc.org/dmwebservices/index.php?q=dmGetItemInfo/$collection/$pointer/xml");
$fieldData = file_get_contents("https://server16614.contentdm.oclc.org/dmwebservices/index.php?q=dmGetCollectionFieldInfo/$collection/xml");

$sxe = new SimpleXMLElement($xmlData);

$xml = simplexml_load_string($xmlData);
$fieldData = simplexml_load_string($fieldData);

foreach ($fieldData->xpath('//field') as $record) {
        $result[] = array(
                'nick' => (string) $record->nick,
                'name' => (string) $record->name
        );
}
function searchForId($id, $array) {
   foreach ($array as $key => $val) {
       if ($val['nick'] === $id) {
           return $key;
       }
   }
   return null;
}
?>

<html>
        <head>
                <title>My Collections</title>
        </head>
        <body>
                <div id="header">
                        <h1 style="text-align: center;">My Collections</h1>
                </div>
                <div id="list">
                        <center>
                                <?php echo "<img src=\"http://www.idaillinois.org/utils/ajaxhelper/?CISOROOT=$collection&CISOPTR=$pointer&action=2&DMSCALE=100&DMWIDTH=3000&DMHEIGHT=3000&DMX=0&DMY=0\">\n"; ?>
                        </center>
                        <p />
                        <table border="1">
                        <?php
                                foreach ($sxe->children() as $child) {
                                        $str = $child->getName();
                                        $title = $xml[0]->{"$str"};
                                        $id = searchForId($str, $result);
                                        if (isset($id)) {
                                                $fieldName = $result[$id]["name"];
                                                echo "<tr><td width=\"25%\"><strong>$fieldName</strong></td>\n";
                                                echo "<td width=\"75%\">$title</td></tr>\n";
                                        }
                                }
                        ?>
                        </table>
                </div>
                <div id="footer">
                        <p />
                        <strong>Our Library</strong>
                </div>
        </body>
</html>

Getting the dimensions of an image

Consider the record http://www.finditillinois.org/oclcphpcode/dmGetItemInfoWebPage.php?collection=pshs&pointer=140. The full size image appears very large on the page; we need a method of sizing it to more practical dimensions.

A simple method is to determine if the image is larger than, say, 800 pixels, and adjust getImage accordingly. We can use dmGetImageInfo.

API: dmGetImageInfo

INVOKED: <server address>/dmwebservices/index.php?q=dmGetImageInfo/<alias>/<pointer>/xml

EXAMPLE:  https://server16614.contentdm.oclc.org/dmwebservices/index.php?q=dmGetImageInfo/pshs/140/xml

Getting the sizes of the image and adding a simple formula to dmGetItemInfoWebPage.php will calculate a percentage for the viewing window.

 

$imageXMLData = file_get_contents("https://server16614.contentdm.oclc.org/dmwebservices/index.php?q=dmGetImageInfo/$collection/$pointer/xml");

$imageXML = simplexml_load_string($imageXMLData);

$height = $imageXML[0]->{'height'};
$width = $imageXML[0]->{'width'};

if ($width > 800) {
   $percentage = (800 / $width) * 100;
}

So, in the instance of http://www.finditillinois.org/oclcphpcode/dmGetItemInfoWebPage.php?collection=pshs&pointer=140, the width of the image is 1620, and the height is 2036. 800 / 1620 = ~0.49; 0.49 * 100 = 49, so the percentage for getImage is to show this image at 49%.

More sophisticated scaling for Javascript programs or for something like Open SeaDragon image scaling utilities can be found using dmGetCollectionImageSettings.

API: dmGetCollectionImageSettings

INVOKED: <server address>/dmwebservices/index.php?q=dmGetCollectionImageSettings/<alias>/xml

EXAMPLE:  https://server16614.contentdm.oclc.org/dmwebservices/index.php?q=dmGetCollectionImageSettings/pshs/xml

Which results in the following XML:

<imagesettings>
<enabled>1</enabled>
<minjpegdim>500</minjpegdim>
<zoomlevels>
<level>1.5625</level>
<level>3.125</level>
<level>6.25</level>
<level>12.5</level>
<level>25</level>
<level>50</level>
<level>100</level>
</zoomlevels>
<maxderivedimg>
<width>600</width>
<height>600</height>
</maxderivedimg>
<viewer>
<thumbnail>1</thumbnail>
<width>600</width>
<height>600</height>
<scale>W</scale>
</viewer>
<docviewer>
<thumbnail>0</thumbnail>
<width>750</width>
<height>A</height>
<scale>W</scale>
<nomenuwidth>968</nomenuwidth>
<nomenuheight>A</nomenuheight>
<nomenuscale>W</nomenuscale>
</docviewer>
<compareviewer>
<thumbnail>0</thumbnail>
<width>500</width>
<height>500</height>
<scale>W</scale>
</compareviewer>
<slideshowviewer>
<thumbnail>0</thumbnail>
<width>600</width>
<height>600</height>
<scale>W</scale>
</slideshowviewer>
</imagesettings>

The <zoomlevels> can be very useful in setting up a zoom slider.