I wanted to show one of those flash flip books on a web site I maintain. There is a wealth of commercial solutions but they seem to be expensive and, at the same time, not very flexible. I needed flexibility because I wanted a particular effect where the flip book is displayed as an overlay on the web page (think a cross between a flip book and lightbox) and I wanted to integrate it into a wordpress plugin. Fortunately I found an excellent open source flip book solution by Ruben Swieringa.

Flex flip book

The flip book is written in Adobe Flex and released under the CC BY license. It supports embedded images and flash movies, text labels, transparent pages and much more. I just needed a way to show a preview of some static PDF files so I adapted the code code for this purpose:

Flip book overlay on a web page

• Load book pages from XML description file (one image per page; only image files supported).
• Allow web page javascript to flip the pages.
• Random bug fixes…

The modified source code is available here: flipbook-20100308

WordPress integration

The wordpress plugin is still lacking a lot of features and probably has a load of bugs; but it is usable. The plugin uses the shortcode API to allow easy insertion of books into wordpress posts and pages. It is available here: book-20100308.

When you install and activate the plugin, it will create the necessary database tables to handle the books you upload. You need to manually create the folder on your web server where the uploaded pages will reside. The folder must be in the uploads folder and must be called book (usually wp-content/uploads/book/). It should have the same permissions as the uploads folder. There is currently a bug that will mess things up if you haven’t set the uploads folder in settings > miscellaneous, so you have to set that even if you use the default folder.

There is no admin interface for managing books but there is an HTTP API for creating books that is really easy to use. The database will have to be manipulated manually if you need to edit an existing book. A new book is created with the HTTP interface in wp-content/plugins/book/manage.php. You can for example use the utility cURL that is available on many linux systems (line breaks inserted for readability):

$ curl -F log=USERNAME -F pwd=PASSWORD -F name="Name of the book"
 -F "page[]=@page-1.jpg" -F "page[]=@page-2.jpg"
 example.com/wp-content/plugins/book/manage.php

This will create a new book in the database with the specified name and pages. You can upload as many page images (as either png or jpg) as you want. The example above won’t really be a book because it will only have two pages. USERNAME and PASSWORD should be the ones that you use to log in to your wordpress site. When the pages have been uploaded and the book created, the script will return the text “Success” followed by the id of the book that you will have to enter in the shortcode.

The shortcode is called book and has the following required parameters:

• book: the id of the book as returned by the manage.php script (it can also be found in the database manually).
• pdf: link to PDF version of the book.
• The content text will be the name of the book.

Next you should customize the CSS for the book display. Here’s an example of how it might look (text is in danish).

Creating image files from PDF documents

You need your book pages as image files for the above to work. Often times I find myself with PDF documents that I want to convert to images. I decided to use the poppler library for this conversion as it has the best rendering of fonts of the solutions I tested. I created a python script that does the conversion automatically. It is a command line utility that depends on the python-poppler bindings. Example:

$ pdftopng.py document.pdf output 420 595

#!/usr/bin/env python

import sys, os
import poppler
import cairo

if __name__ == '__main__':
    uri = 'file://%s' % os.path.abspath(sys.argv[1])
    prefix = sys.argv[2]
    width = int(sys.argv[3])
    height = int(sys.argv[4])

    doc = poppler.document_new_from_file(uri, None)
    for i in range(doc.get_n_pages()):
        page = doc.get_page(i)
        page_width, page_height = page.get_size()
        surface = cairo.ImageSurface(cairo.FORMAT_ARGB32, width, height)
        cr = cairo.Context(surface)

        cr.translate(0, 0)
        cr.scale(width/page_width, height/page_height)
        page.render(cr)
        cr.set_operator(cairo.OPERATOR_DEST_OVER)
        cr.set_source_rgb(1, 1, 1)
        cr.paint()

        surface.write_to_png('%s-%u.png' % (prefix, i+1))

This will create output-1.png, output-2.png etc. for each page in the PDF document. The images will be 420×595 in the example above. You can easily convert these to JPEG with imagemagick in linux if you want to save some bandwidth:

$ for f in output-*.png; do convert -quality 90 "$f" "${f%%.png}.jpg"; done

When you have a satisfactory JPEG file for each page you can upload them as a book with the cURL method above.