SharePoint 2010: How to add a Deep Zoom Image to a SharePoint Site

  • Article

Applies to

  • SharePoint 2010 Foundation
  • SharePoint 2010 Standard
  • SharePoint 2010 Enterprise

Scenario

You’ve got a large image that you want to distribute to some colleagues.  But the image size makes it unwieldy to distribute via email.  Instead, you’d like to provide an online capability where your users can interact with the image without losing image integrity.  An example of Deep Zoom technology in use can be seen on the SharePoint 2013 architecture diagrams.   This solution has a few components, namely: -

  • Seadragon Ajax Viewer Web Part (hosted on CodePlex)
  • Deep Zoom Image Composer
  • A large resolution image

Downloading and installing the web part

First we’ll begin by downloading and installing the web part.  We won’t worry too much about configuring it at the moment; all we’re concerned with is getting it onto your servers.  These steps should be done from one of your WFE Servers: 

Please note that the http://yoursite/ should be replaced with the URL of your own SharePoint Web Application.  Once these steps have been completed, you’ll have the web part ready and installed for use but no image to plug into it.  To prepare these, it’s necessary to step back from SharePoint for a moment and to use another Microsoft Tool: the Deep Zoom Composer.

Creating DeepZoom Images for use within SharePoint

In this next set of steps we are going to obtain a high resolution image and use a special image utility to prepare this for use within SharePoint.  We will then manually tweak the output of the tool to make sure that it’s compatible with the web part that you downloaded and installed earlier.

  • On your desktop, create a folder called “Sea Dragon Images”
  • Next, in your browser of choice navigate to morguefile.com.  This is a free photo archive
  • In the search box, type in London and hit enter
  • Pick an image on the search results page and click on it.  You’ll get a properties box that describes the attributes of the file you’ve chosen
  • Click on the Download button on this attributes page.
  • http://baron72.files.wordpress.com/2013/11/111013_1821_tutorialadd4.png?w=614
  • This will prompt you to open the file, save it or to cancel the download.  Click on “Save” and save it to the Sea Dragon Images folder that you made earlier

At this point, you should now have a folder with one high resolution image contained with it.  To make use of this image we are going to install a piece of kit called the Deep Zoom Composer. This is a facility that takes high resolution images and then transforms them into the appropriate format.

Let’s inspect these files before moving on.  Some changes will be needed to them shortly but it always helps to know what these are before altering them


File / Directory Name

Notes

Dzc_output_files

Directory containing the zoom images

Dzc_output.xml

XML file that dictates the zoom template size and format

Scene.xml

XML file containing the instructions and calculations for the images

SparseImageSceneGraph.xml

XML file that stipulates the zoom ratio, image path and background colours

The two items that we want to pay attention to here are the dzc_output_files directory and the dzc_output.xml.  These are the files that the Seadragon Viewer web part needs to talk to.  These next steps will show you how to combine your image output and the web part.

  • In the Generated Images directory generated by the Deep Zoom Composer rename the dzc_output_files directory and the dzc_output.xml to London. 
  • http://baron72.files.wordpress.com/2013/11/111013_1821_tutorialadd15.png?w=614
  • Once these files have been renamed upload the entire directory and the xml files to a SharePoint document library.  Right click the London.XML file and copy the shortcut:
  • http://baron72.files.wordpress.com/2013/11/111013_1821_tutorialadd16.jpg?w=614
  • Back in your SharePoint environment, navigate to the root site of the web application that the web part was installed to.
  • Access the Site Collection Features via Site Actions à Settings.  This will load a new screen.
  • On this new screen, look for the Site Collection Administration heading and click on the Site Collection Features under it.  This will also load a new page.
  • On this page, search for the SeaDragonViewer Feature1 and activate it.  This adds the web part to the web part gallery for all sites within this site collection.
  • Now that the part is available, navigate to the page or site where the Seadragon viewer is to be added.  When selecting the web part it will be grouped under the Innovation category.
  •  
  • http://baron72.files.wordpress.com/2013/11/111013_1821_tutorialadd17.png?w=614
  • Once the web part has been added, enter the configuration options (Edit Page --> Edit Web Part) and look for the Miscellaneous section.  This will have three configuration options: -
    • XMLPath: This is where the URL for the renamed XML file needs to be placed
    • WPWidth: Setting for the Web Part Width
    • WPHeight: Setting for the Web Part Height
  • http://baron72.files.wordpress.com/2013/11/111013_1821_tutorialadd18.png?w=614
  • Paste the link of the XML file that you copied earlier into the XML Path field and press Apply then OK
  • You will now have a web part with a high resolution image that you can zoom into and pan around without any loss of quality
  • http://baron72.files.wordpress.com/2013/11/111013_1821_tutorialadd19.png?w=614

That’s it.  You’re all done. There is more that you can do with the Deep Zoom Composer. And naturally SharePoint gives you plenty of ways to integrate this Web Part into your own solutions.

References