How To Show Google Book Covers in Presto for DB/TextWorks
When we build web search interfaces for bibliographic databases with our Andornot Starter Kit or Andornot Discovery Interface, we usually include code to fetch book cover images from Google Books. Javascript on the search results pages takes the ISBNs from the bibliographic records and passes them into the Google Books API. If Google Books has a record, the cover image is displayed, as a link to more info in the Google Books database. This adds visual appeal to predominantly textual pages and provides users with valuable additional information about the work.
If you’re using Presto for DB/TextWorks as the web search interface to your database, you can configure it to show Google book covers as well. All you need is our Google book cover script and some experience editing Presto screens.
Here are the steps to take to add Google Book covers to your Presto for DB/TextWorks site.
1. Download the Andornot Google Books script here. As noted in the file, these are offered under an MIT open source license. You are free to use reuse, redistribute, modify etc. this script as long as the license text within it is retained.
2. As described in the Presto Administrator’s Guide, a custom script file called CustomCommonScripts.js is included on every page. So, just copy the contents of Andornot’s Google Books script into this file, which you’ll find in <Presto-install-path>\WebApps\Mercury\jscript\CustomCommonScripts.js (if the file doesn’t exist yet, just create it). The script relies on the jQuery javascript library, but that’s already included in Presto.
3. To use the script, you just need to wrap the ISBN from a record inside a div with the class “isbn”, like this:
<div class="isbn">9780140187465</div>
To do this, you will need to edit the detail screen for your catalogue content type to add three Custom Value Controls. The Presto Administrator’s Guide has more information and examples of these.
The first custom value control will contain only this bit of HTML: <div class="isbn">
The second custom value control will contain the ISBN data field (you’ll want to select the option to suppress hit highlighting on it).
The third custom value control will contain the closing div: </div>
All three will be associated with the ISBN field, so they will only appear on the detail screen when there’s data in that field.
Our Google Books script will look for the “isbn” div and replace the contents within it with a call to the Google Books API for the cover image, if available.
ISBN’s often have more than just straight numbers in them. Sometimes there’s punctuation or trailing text. Our Google Books script is pretty good at ignoring all of that, so don’t worry about cleaning up your ISBNs first.
Have fun!