Doorgaan naar de website
OCLC Support

Internet Archive BookReader integration



The Internet Archive BookReader is a popular open-source page flip viewer. Similar to Mirador viewer integration, this recipe allows the user to add a button on the item detail page, which opens a custom page with the BookReader viewer launched. It also uses the built-in IIIF support in CONTENTdm, and is similar but simpler to implement compared to Mirador viewer. The BookReader only works with image files and will appear on the page when the correct file types are displayed. The basic steps are:

  1. Create and upload an empty custom page as the container for BookReader viewer.
  2. Download Internet Archive BookReader code from Github and upload the files to CONTENTdm.
  3. Upload the JavaScript that inserts the BookReader button and loads the viewer.

Step 1 – Create the custom page container

This step is very similar to Mirador viewer's custom page. You can download BookReader.html (use CONTENTdm Cookbook Demo Site to download source code) and upload it to top level in fileManager: Website Configuration Tool > Global >Custom > Custom Pages > manage files.

Step 2 – Add the BookReader package to CONTENTdm

Download Internet Archives BookReader from their Github. Click the Code button on the upper-right corner of the list of files, and then click Download ZIP. You only need the "BookReader" directory inside the unzipped file. Upload the BookReader directory to top level in fileManager: Website Configuration Tool > Global >Custom > Custom Pages > manage files. You can do drag-and-drop with uploading an entire directory.

Step 3 - Custom JavaScript file

There is one JavaScript file that need to be uploaded. Download the bookreader-cp.js and upload it to: Website Configuration Tool > Global >Custom > Custom Scripts.

 Note: If you want this recipe to support zooming, experiment with modifying the size parameters in the recipe. It is controlled by these two lines in the recipe's main JS file:

let canvasHeight = canvases[i].height || 1200

let canvasWidth = canvases[i].width || 800

The size is capped in the recipe because BookReader downloads a lot of data at once.


Save and publish the changes you made in Website Configuration Tool.

To verify this recipe, first clear your local browser cache (or use a private/incognito window) to make sure you have the most recent version of your custom JavaScript files. Navigate to an item on your website that is an image file (to be certain it has IIIF API support). You should see the BookReader icon on the right side and to the right of the Download or Print icons. Click the BookReader icon. A separate window will open with that record loaded inside the BookReader viewer.

Image 1: BookReader icon


Image 2: BookReader viewer displays selected image file



 Note: This recipe was tested with IA BookReader 4.18.5, which can be downloaded from GitHub at: Other or more recent versions may work, too, but have not been verified.