The DigiTiler creates 300+ megapixel images (generally 20,000 x 15,000). How can we explore such images when our browsers are designed to show images in 4K at best (4096×2160). After some research I discovered OpenSeadragon. It’s a Javascript library that creates a “viewer” for high-resolution images; that is, with it you can zoom in/out of any size image. This should be useful for any large-format photographer who is interested in having their images explored. Here are some DigiTiler images on Tumblr. You can also view them at our WP site Digitiler.com
Before you can use OpenSeadragon, you need to slice up the large image into a mosaic of smaller images (tiles) which OpenSeadragaon will feed to the viewer (in the background) as they move around the image and zoom in and out.
The easiest software I found for this is VIPs a freeware, cross-platform, image processor. I use its “dzsave” function. (You can find other software to create deep zoom collections here; although I love Microsoft ICE, I couldn’t get their Deep Zoom Composer to work)
I open a command prompt in the directory of my image (I already have the path to VIPs set in my environment) and pass VIPs the name of my humongous image file and the folder in which I’d like it to create the deep zoom image tiles.
Here I process the file into a deep zoom folder
That folder, “Peppercornsfull_dzi” will have multiple sub-folders 0,1,2,3… with 4,565 tiles. In my image folder, VIPs will create an XML description “Peppercorns_dzi.dzi” file.
Although there is an Zoom OpenSeadragon plugin for WordPress, I can’t see many people finding my images on this esoteric blog. So I figured I’d put Tumblr to use, which my daughter told me is cool. That wasn’t as easy as I hoped; fortunately, Ian Gilman helped out.
But first, where to store the deep zoom images? My programming friend James Murdza showed me how I could use DropBox, but I discovered that uploading 4,565 images to be very slow. I tried to get a zip file to upload and unpack through OpenSeadragon but couldn’t (if you’re reading this, and know how, please let me know!). Anyway, if you don’t have a server you can use Dropbox, just be prepared for slow upload times.
I decided to just upload the deep zoom folder to my server through FTP. So that’s what I do. It takes 10 to 20 minutes because copying thousands of small files is not efficient.
After that, I then create a page in Tumblr, modifying a page I know already works 😉
First, remember to set Tumblr to “HTML” edit mode. You create a Tumblr post in HTML and create a DIV which will hold the OpenSeadragon deep zoom image control. I give it a unique name (using the date) so Tumblr doesn’t get confused if someone has multiple posts open on the same page. The above example is using the “Sunflower” image code.
For Peppercorns, I’d change dziFilesUrl to
//maxotics.com/imagezooms/peppercornsfull_dzi
That’s where I uploaded the files. Then I’d open the dzi file that VIPs created, and copy the Height and Width numbers into the JS code in Tumblr.
You’ll also want to make sure you have a link to Openseadragon’s js files. I have them in my plugins folder on this site so just re-use them in Tumblr.
Another method for post OpenSeadragon image zooms on an external page is using an iFrame. You can read about general HTML embedding at the Openseadragon site.
Wrapping up, the general process is
- Use VIPs (or other software) to create a deep zoom image collection
- Copy the collection (dzi folder and its sub-folders) to a server
- Make sure your page has a link to Openseadragon’s JS (or loads it internally).
- Tell OpenSeadragon where the deep zoom image collection is and set its parameters (height, width, etc.).
- Call the above in a DIV or some other HTML container.
UPDATE 9/7/16
I asked my daughter Alice if she could help me with the Tumblr problem that Openseadragon shows as a gray box in dashboard mode. Readers would just believe it was a broken link. This is her solution:
JS in an individual post like you were adding won’t fire in the dashboard because it will slow it all down. If you want to just add text that only shows up in dashboard view, you can just add a style attribute like this:
<span style=”visibility: hidden;”> Some message for only the dashboard </span>
Those weird gray boxes will stay however because they indicate that there’s some script trying to run. If you don’t want the boxes and instead want an ugly JSON object like the two sample posts I’ve done (the kernels and sunflowers) you can use this new method….
In your tumblr’s html theme there’s a section for posts. I’ve updated the text post section to contain your script, and updated the script to look for certain html elements and tumblr tags. To make an OpenSeaDragon post, now all you have to do is add a tumblr tag with some unique id like you were doing with “openseadragon20160830”, then add something like:
<span hidden="">Sorry, zoom-image cannot be viewed in the dashboard. Please click to view. </span>
<div id="openseadragon20160825" style="width: 100%; height: 600px;"></div>
<script type="application/json" id="dzi_openseadragon20160825">
{
"Image": {
"xmlns": "http://schemas.microsoft.com/deepzoom/2008",
"Url": "//maxotics.com/imagezooms/Sunflowercool_dzi_files/",
"Format": "jpeg",
"Overlap": 1,
"TileSize": 254,
"Size": {
"Height": 14616,
"Width": 22701
}
}
}
</script>
Ian Gilman also pointed out “Another thought for dashboard view is that you could include an img tag with a thumbnail for the image, so people know what they’ll be zooming into.”