Students were having trouble making gigapixel StoryMaps for images, and as the makers of this cool tool admit, “the gigapixel feature of StoryMap is not as easy to use as most of our other tools because it requires hosting a folder of images on a web server.” Fortunately, because we have Davidson Domains, you can host a folder of images on a web server—right in your own domain. So it should work.
When students reported trouble—and a media tutor couldn’t solve the problem—the first thing I did was go to Knight Lab’s help page. Whenever you’re working with open source tools, it’s really important to contact the developers and Google around to get support from other people who have played with the tool. You’ll be amazed by how responsive and helpful the people in the DH community can be. And indeed, with an hour or two, I had a reply to my email inquiry about what was going wrong for the students.
They asked for the “share” URL of the StoryMap that wasn’t working, and when I didn’t hear back from the student, I decided to test the tool myself by creating a new StoryMap from scratch. To my surprise and delight, it worked.
This is my test storymap, linked here.
And here it is embedded in a wire frame:
The question is: why did my Story Map work and theirs didn’t?
I don’t know, but I’ll walk you through the steps I took.
- First, I found a very large image, downloading it from the Beinecke Digital Library. If your image isn’t big enough (and I’m not sure how big it has to be, but probably at least 1000 pixels), then you’ll need to Google around to learn how to make it bigger.
- I save my image as “Loy-Virgins-Rogue” and I put it in a new folder called “StoryMap-Virgins” on my desktop.
- Working in Chrome with a big screen, I open two windows—one for working in and one for following the StoryMap instructions. Since I have access to Photoshop to Zoomify my image, I make sure to click on “Show me How.” Following their instructions, I proceed:
- Open the image in Adobe Photoshop.
- From the Image menu, choose Image Size
- If the dimensions aren’t in pixels, use the menu next to “Dimensions:” to set it to pixels.
- Make a note of the dimensions: the first number is width, the second is height. (Mine were 5741 x 3662.)
- From the File menu choose Export > Zoomify.
- Set the output folder (in my case “StoryMap-Virgins” and click OK. Take note of (or edit) the “Base Name” (in my case “Loy-Virgins-Rogue,” which is the name I gave my image). Photoshop will create a folder with that name in your output folder. Later, you’ll need to put that “Base Name” folder on a web server.
- After you click OK, Photoshop will open a page in your browser showing your Zoomify export. You can ignore this.
- Meanwhile, the export will have created a new folder in the output folder. (My new folder was called “Loy-Virgins-Rogue” and contains an ImageProperties xml doc and two Tile Group subfolders). Right click this new exported folder to Zip it.
- Now its time to host this folder, which contains your gigapixel image, on your domain. Go to domains.davidson.edu and login.
- Go to File Manager> Public HTML
- Click “Upload” (you have to look around for the right button)
- Upload zipped folder
- Go back to Public HTML view, click “reload”
- Select uploaded zip folder, click “extract” (again look around for this button)
- Make note of the folder name. (Mine is Loy-Virgins-Rogue). You need this folder name to figure out the URL, which is not obvious, but it is easy. You just add the folder name to your domain URL, e.g. http://www.domainname.com/foldername. (The URL for my image folder was http://www.suzannechurchill.com/Loy-Virgins-Rogue). Remember these URLs are case sensitive and don’t allow for spaces.
- Now go to Story Map and click create a new StoryMap and click the Gigapixel button.
- Enter your image dimensions. (Mine were 5741 x 3662.)
- Enter the URL for your image folder. (Mine was http://www.suzannechurchill.com/Loy-Virgins-Rogue).
- Once your image appears, you can give your StoryMap a title and an introductory blurb. Add a new slide for each part of the image you want to annotate. Use the +/- tab to zoom or back up to the area you want to write about. Situate the little text marker next to the place you want to anchor the explanation. This part takes some experimenting to make sure you get it right, but you can hit “save” and toggle back and forth between Edit and Preview to see if you’ve got it right.
- Share your StoryMap once you’ve got it the way you want it. The pop up window will give you a URL and if you scroll down a bit, it will give you code to embed your StoryMap in an iFrame. Copy this code into the Text view of a WordPress page or post, publish, and voila! You can share your StoryMap, just as I did in this post.