How to Make an iPad Photo Book

Posted on by

Warning! Requires some light coding skills and patience!

Updated, see bottom.

Since Apple released iBooks 1.2, their reader app for iPad, many large publishers have been making e-books that look more like the photo books that Blurb prints.

The books show a full two-page spread, and the photos can go all the way to the edge of the “page.” In particular, the Ansel Adams in the National Parks book is pretty a pretty satisfying example of what can be done. Thanks to Liz Castro and Liza Daly, the techniques to create these e-books are available to anyone who can handle some basic HTML code. Specifically, you can make, for free, an “ePub” file, the kind of e-book format iBooks uses, and load it on your iPad through iTunes (or via email, if that’s easier). Below is a basic (or, as simple as I can make it) tutorial on how to make your own iPad photo book.

Note: Does this seem harder than it should be? It is. Stay tuned for news from Blurb about easier ways to do this!

What you’ll need

  • a set of photos you want to make into a book
  • If on Windows, a compression program, such as the free 7-Zip
  • a basic understanding of HTML
  • a text editor, such as Notepad (comes free with almost all versions of Windows), Notepad++ or TextWrangler (free for MacOS).
  • a measure of patience, since the format is much less forgiving than web page coding.

Download the sample book

The contents of the sample-photo-book.zip archive

I’ve made a sample photo book that you can download and use as a starting point. It has 28 pages, and matches the size of Blurb’s “small square” book (7 inches square). It’s set up so that if you simply add your images to it (and they are named following a pattern), most of the work is done for you. If you’d like a differently-shaped book, please contact me (info at bottom) and I will help.

sample-photo-book.zip Square format (7 in. x 7 in.)

sample-photo-book-portrait.zip Portrait format (8 in. x 10 in.)

sample-photo-book-landscape.zip Landscape format (10 in. x 8 in.)

Prepare your photos

The files that make up an e-book

For an iBooks e-book, your photos should be no larger than 768 pixels (since that’s the width resolution of an iPad). You can use any program you wish; both Picasa (free for Windows) and Preview (included in MacOS) can crop and resize images (if you need help on doing that, see resize and crop instructions for Picasa, resize and crop instructions for MacOS Preview). Figure out which images you want on each page, and if you want to have some pages for text only (the sample has spots to add text if you wish).

  1. The target size you should resize and crop your images to depends on what format book you want to make:
    • Square format book: 768 x 768 pixels
    • Portrait format book: 576 x 720 pixels
    • Landscape format book: 720 x 576 pixels

    Save them in JPEG format.

  2. Rename your images so they match the pages they’ll appear on (starting on page 2, since page 1 is the cover image), and follow this pattern: page-02.jpg, page-03.jpg, etc. For this book, I set up only one photo per page, but it’s very possible to have more (contact me, see below).
  3. Find and open the sample-photo-book.zip file you downloaded. It will become a folder by the same name, open it
  4. Inside the sample-photo-book folder (among other files and folders), you’ll see an OEBPS folder; open it.
  5. You’ll see an images folder
  6. Copy your images into the images folder.

Adding Your Cover

Add a cover image for the bookshelf icon and the very first page of your book:

  1. Pick one of the photos (or any image) from your collection and resize it as in the previous step.
  2. Name it cover.jpg, and copy it to the images folder (as above).

Adding Your Title

To set the title of your book (so iBooks knows what to show):

  1. Open the sample-photo-book folder, and the OEBPS folder within it.
  2. Locate the content.opf file and open it in a text editor.
  3. Find the <metadata>block: 
    <metadata xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns:opf="http://www.idpf.org/2007/opf">
  <dc:title>Your Title</dc:title>
  <dc:creator opf:role="aut">Your Name</dc:creator>
  <dc:language>en-US</dc:language>
  <dc:rights>All Rights Reserved.</dc:rights>
  <dc:publisher>Self</dc:publisher>
  <dc:identifier id="BookId">urn:uuid:http://blurb.com</dc:identifier>
  <meta name="cover" content="cover-image"/>
</metadata>

    …and replace Your Title and Your Name (in bold above) with whatever you’d like the book to be identified with.

  4. Replace the url http://blurb.com with any web address you want to use that is unique to you. You can use a personal website, facebook page, etc., as long as it’s unique. If you don’t have a url you want to use, you can leave it as http://blurb.com. Readers won’t see this url.

Making a Two Page Spread

If you want to have an image that spans a two-page spread, you’ll need to do some editing of the sample files. Two-page spreads must start on an even-numbered page (that is, a left-hand page). If you don’t have any two-page spreads, you can skip this part.

  1. Crop the image you want to use in the spread to be the size of two full pages:
    • Square format book: 1536 × 768 pixels
    • Portrait format book: 1152 x 720 pixels
    • Landscape format book: 1440 x 576 pixels

    Save it in JPEG format.

  2. Name the image for the first page in the spread (for example, if the spread is on pages 2 and 3, name it page-02.jpg).
  3. Copy the image to the images folder, above.
  4. In the sample-photo-book folder, open the OEBPS folder, then open the content.opf file inside, in a text editor (see above if you need help picking one).
  5. Find the line in the code where it refers to the images for the page you want to use in your spread. Since you only have one image for two pages, remove the line that refers to an image your book doesn’t use. For example, if your book has a spread on pages 2 and 3, remove the line <item id="image_03" href="images/page-03.jpg" media-type="image/jpeg"/>. The list of images should match the files you added to the images folder.
  6. Save the content.opf file.
  7. In the same folder, find the .xhtml files for the pages your spread will be on. For example, if your spread is on pages 2 and 3, find the page-02.xhtml and page-03.xhtml files.
  8. Open them in a text editor.
  9. Find the <div> tag in the code that places the image, and add a class to tell iBooks which part of the image to show. For the page on the left (the first page in the spread), make sure it says left, and right for right. For example, for the spread on pages 2 and 3, in the page-02.xhtmlfile, it should be: 
    <div class='page'>
  <div class='figure full-bleed left'>
    <img src='images/page-02.jpg' alt='image'/>
    <div class='figcaption'></div>
  </div>
</div>
  10. For the second page in the two-page spread, add the class for the side (see previous step) and change the image file name so it’s the same image as the first page (since the spread is just the same wide image). For example, for the spread on pages 2 and 3, open the page-03.xhtmlfile, and make it read: 
    <div class='page'>
  <div class='figure full-bleed right'>
    <img src='images/page-02.jpg' alt='image'/>
    <div class='figcaption'></div>
  </div>
</div>
  11. Make sure to save both files.

Compressing and Packaging the Book

E-books are copied on to your iPad in compressed (specifically ZIP) format. But, it needs to be compressed in a particular way. For this task, Windows and MacOS are very different. For Windows:

  1. Using a free program such as 7-Zip, create a new compressed archive (a “ZIP” file) called photo-book.zip.
  2. Open the sample-photo-book folder, and copy the file mimetype into the archive first.
  3. Now, copy the other folders (META-INF and OEBPS) into the archive.
  4. Save the archive and quit
  5. Locate the photo-book.zip file. Rename it to photo-book.epub.

For Mac:

  1. Download this program, ePub Zip
  2. Drag and drop the sample-photo-book folder on to it.
  3. Locate the sample-photo-book.epub file and rename it to photo-book.epub.

Opening the Photo Book on an iPad

You’ll use iTunes to copy your book to your iPad, but you can attach it to an email as well and send it to yourself. To use iTunes;

  1. Locate the photo-book.epub file
  2. Open iTunes
  3. Drag and drop the photo-book.epub file on to iTunes.
  4. In iTunes, you should now see your book in the “Books” area.
  5. Connect your iPad and sync with iTunes.
  6. On your iPad, open iBooks.
  7. Open your book.

If there are problems, don’t worry. It’s really easy to screw something up, and even a small typo will make it so your book doesn’t open. Using your patience, retrace your steps. If you need help, leave a comment or send me a note at bclemens at blurb dot com (no spaces, replacing the dots with periods).

Technical Notes

For those that are interested in the nuts and bolts (as sourced above), the way that a fixed-page-size e-book is different than a garden-variety ePub file is:

  • Each page is a separate .xhtml file (normally, each .xhtml file is a separate book chapter). This makes it not such a good choice for an e-book made mostly of text.
  • Each .xhtml file has a <meta name="viewport" content="width=704, height=704" /> line in the <head> section. The width and height are the size in pixels of the book “page.”
  • A file is added to the META-INF folder named com.apple.ibooks.display-options.xml, with the contents: 
    <?xml version="1.0" encoding="UTF-8"?>
<display_options>
  <platform name="*">
    <option name="fixed-layout">true</option>
    <option name="open-to-spread">true</option>
  </platform>
  <platform name="*">
    <option name="orientation-lock">landscape-only</option>
  </platform>
</display_options>

Update: Thanks to Joseph Vitterito for identifying a problem with the sample files. I have updated the code to fix a problem with spreads, and it comes with 28 pages by default.

Update 2: By request I created sample files for portrait and landscape format books and adjusted the instructions, above.

115 thoughts on “How to Make an iPad Photo Book”

  1. I am a delighted iPad user. It is truly an amazing device.

    Liz has shown us some awesome things that can be done in iBooks. I have one problem with that. iBooks is only available on iThings. Kindle, Nook and Kobo have apps for just about every device out there. If I’m going to spend money on a book, I’m more likely to buy at one of these bookstores than from Apple. And that’s before we start discussing Apple’s 30% extortion scheme.

    As a family historian, I want to create a book full of family stories, photos, movies and documents that family members can enjoy on any tablet. I’m hoping ePub3 provides the functionality I’ll need to do that, but right now iBooks doesn’t do it for me.

  2. Thanks for the tutorial!

    I’ll definitely be giving this a crack!
    Then one day I’ll get a physical copy printed from you guys!

  3. I love the idea of offering this as a option for my clients- would it make sense for Blurb to instead create and XHTML or HTML5 application for viewing the books on these types of devices? I would love to show the albums I create on my ipad to clients, but I can’t because the option is flash based.

    • Hi Kate: Stay tuned, that’s in the works! In the meantime, if you browse to the bookshow page on an iPad or iPhone, an HTML5 version is shown (no flash required).

  4. I don’t own an iPad (yet) but I appreciate
    Blurb’s innovation as it continually serves the best interest of its clients.

  5. I used your guide (which is very clear) for about 3 hours today to convert a book. The whole book is comprised of two page spreads. When I view the html pages in Dreamweaver, things look okay. But I wonder… is there some special code I need to remove or change for the following dilemmas:
    1. What do I do for PAGE 1?
    2. What do we do if we have MORE pages than 16? What other areas of the coding need to be updated to accommodate this?
    3. When I view the epub finished version, only the LEFT side of my two page spreads appears. I assume, again, something is wrong in my coding. I followed the directions exactly. When I view, for example, PAGE 3 in dreamweaver it appears correctly.

    Thanks for your help!
    Joseph

    • Hi,
      1. Page 1 can be a title page or the cover page. In the sample file it’s set up as the cover.
      2. You can add as many pages as you wish, by duplicating the xhtml files and renaming them, and adding lines to the content.opf file for the additional xhtml pages and images. I can send you a new sample file that has more pages if you let me know how many you’d want…
      3. Hm, it’s possible I made a mistake, but just to confirm: you changed the class to “right” in the right-hand pages? Can you send me your folder and I’ll fix it?

      • Greetings,

        I’ve coded my book with your method. It is entirely two-page spreads. It looks great except for one thing, Page 1. It shows up blank, while the cover image on the iBook shelf is present.

        I feel like I’ve tried everything. Am I missing something? I’d like page 1 to be the same as the cover image.

        Thanks for creating the template.

      • Hi, Since your book is all spreads and the first page can’t be a spread, you would have to add a new page-01.xhtml (I started with page 2 in the sample files to allow for this, but probably shoulda anticipated this and left a page-01.xhtml in). You can duplicate page-02.xhtml, adding a line for it in the content.opf file and changing the image file in it to cover.jpg — I can also send you a version of the sample files set up this way if you like. Which format are you using?

      • Ben,

        Thanks for the suggestion.

        I created the page 1 .xhtml file and updated the code in the content.opf file.

        Page one remains blank. It put the cover.jpg image intended for page one on page two and shifted all of my spreads.

        I am using the 7×7 square.

        Any ideas?

      • Two questions. First: if I want to intersperse my picture pages with explanatory text pages, what are the rules on formatting XHTML pages as text? Web editors don’t seem to know what to do with them, so it looks as though I will have to do it manually.

        What is the limit on file size for a salable iBook? I want to make my photos high-res enough to look good on the iPad and allow for some zooming.

      • I have another question already. After looking at all the Epub editors out there, I settled on Sigil as the one to use. When I sicced it on the .epub file compiled from my updated copy of your 11 x 8.5 landscape photo book, which I have successfully populated with my cover and several photo pages, it sees the .xhtml pages and the cover but none of my images.

        I’m afraid that if I modify your format so SIgil can find all my content, your page formats may no longer work. Have you run Sigil as an editor on your samples? Why does the ‘Sigil view” of an epub not jibe with yours?

      • Hi: The existing standard for epub doesn’t support layout information for photos, so Apple built on to the ePub spec to add this support to ebooks viewed in iBooks only. These are still vaid epub files, but other readers and editors (like Sigil, sony reader, nook, etc.) can’t use this information. A difficult trade-off, but that is the state of ebook formats these days :(

  6. Thanks for putting this together, Ben. It’s amazingly helpful for those of us trying to figure out how to get an “illustrated book” on the iPad in the way it was intended to look. However, I just followed your instructions and find that only my left page images are displaying. Can you put up a special link to the sample-photo-book that is the latest version?
    Thanks very much!!!
    - Bentley

    • Hi Bentley: I just reuploaded the fixed version of the sample files to make double sure it’s there; I believe it should fix that problem (depending on whether your book has 2-page spreads or not of course). The direct link is here. Please let me know if you have any trouble with it?

  7. Thanks for these detailed instructions. This tutorial really gets into specifics and I like that. I’ve bookmarked and stumbled this post for my visitors, and I’ll post something too to point people in your direction. Thanks again.

  8. Pingback: Creating Photo Books on iPad

  9. Hhhmm, thanks for putting this out, but seriously, I’d far rather pay for an app that does this without having to encode every page! Some of my books have over 100 pages, & I have quite a few books I’d like to show. I want an iPad & I want this functionality, but I’m holding back for now. Any idea when it’s due out, benclemens?

    • I understand and agree with you! Sorry I can’t be more specific about our plans, I wish I could :(

  10. Thanks for the tutorial… Really! I’m so excited about converting my soft cover book to an ePub or whatever Blurb is going to provide. I hope it will be soon.
    Gretchen

  11. Hi Ben,
    I was wondering how the fonts work with the new snook scheme. If I choose Garton medium font (which I intend to) to make my new book, how will it show up on the iBook?
    Also, can a 5 by 8 inches book be possible? Or does it have to be a square book?
    Many thaks
    Manu

    • Fonts can be embedded no problem, provided you have a license to distribute a font with your e-book. 5×8 is no problem, the 8×10 sample book is the same format and I can make you a 5×8 sample if you like…

      • Thanks Ben.
        Question: the font I have been talking about is for free download from the Internet. So, where do I get a license to distribute the font?
        Also, regarding images, do I have to provide copyrights? For very single image? What if the images are from the net with unknown copyrights?
        What is the procedure for all this.
        Much appreciated. Manu

      • Hi: Unfortunately I can’t help so much with whether the font it free to distribute with your ebooks; even fonts you get for free will have some kind of license. There are plenty of fonts that you can get that are redistributable, from sites like http://www.fontsquirrel.com/. Unless you created the images, it’s a similar situation. There are many images that are licensed as “creative commons,” which mean that the author allows some use by others; a search engine for these images is at http://search.creativecommons.org.

  12. Hello Ben,
    I am having a bit of trouble using higher resolution pictures, ie 1024×768.
    I have edited the xml img size, but they seem to be scaled smaller into the upper left hand
    corner of the page. When I zoom in, I can see that they are higher resolution, but they do not fill the page correctly. I am using your landscape zip as a template.
    Any ideas?
    Thanks,
    HectorBrothers

    • Hi: Unfortunately, this is a quirk in the way that iBooks renders books, I believe. The only way I have been able to get pictures to reliably scale is to either scale them to final size (720×576) or set the width and height in every xhtml document (e.g. <img width='720' height='576' src='' />. Using CSS sometimes works, sometimes doesn’t :(

  13. Hi! Thanks for the tutorial. Works great! I would like some more specific info on how to enter text (body text, and captions).
    Thanks!
    Marcelo

    • Hi Marcelo: In each of the pages there is a <figcaption> block, which you can put basic captions in; they will be positioned about 60pt up from the bottom of each page. For body text, these sample files wouldn’t work so well; I am working on other samples that would though. Is your book a combination of text and images, or?

  14. Hi Ben,
    The latest version of Pages for Mac has an option to export the book as an ePub PDF.
    I was wondering what you know about this? Does it do all the coding, and make the books look like photo books like what you have been talking about? Many thanks.

    • Hi: The ePub export in Pages is a truly wonderful thing; it has been very useful to me! However, it does not support positioning images or fixed-layout books like the photo book in this post. If you have a mainly text-based book, it could be a good option for that though.

  15. Hi, benclemens, thanks again for your help! I will try it…

  16. And yes, it has both, text and images (I’m sorry, I forgot to answer that). It’s a coffee table book. Maybe, I have to adapt it to this format, and perhaps put less text…

    • let me know how it goes…

  17. sure, thanks!

  18. Hi Ben,
    Stumbled upon this site. Would love to know what you think of it…
    http://pro.yudu.com/illustratedbooks/index.html
    Thanks
    Manu

    • I know the site, they do some good work… The app route is one I am not as interested in for publishing books (especially for individual book-makers) because the cost of development is so high (currently) and the cut that the app stores take on top of that make it hard to do things cheaply or make back your investment. At the TOC conference, there was a panel with five “top app makers” and all said that, though there teams were small and the apps were selling well, they had yet to make any money on their apps! But I have seen some amazing book apps lately, so I’m sure *someone* has figured out how to do it (for love, if not for money).

  19. Thanks for the information! I tried your samples without a hitch, but I have one question:

    When I tried the sample-photo-book (7×7) example, iBooks rotated and locked to a horizontal format. Is it possible to support both orientations, perhaps with a conditional CSS statement? Any thoughts on this?

    Again, thanks for the information!

    • Hi: Yes you can, that is set in the additional file that is in the META-INF directory, com.apple.ibooks.display-options.xml. In that file, the orientation is set on this line: <option name="orientation-lock">landscape-only</option>. This can be landscape-only, portrait-only, or none.

  20. Hi Ben
    Thank you for sharing your books and ideas with us. I’ve succesfully made a landscape e-book. I do have two questions:
    1. What does the url address in the content.opf file?
    2. Is it possible to make a small margin on each pages around the images? Especially with spreads, it would look great with a margin around to separate the images a little.

    • Hi: I’m glad it worked out! To answer your questions:
      1. The url is a unique identifier for the book that is required by the format if you want to distribute the book to other people or sell it. Otherwise it has no effect.
      2. Yes, I have a style for that already defined; add “inset” to the class=”" in the div for each figure you want to treat that way. Does that make sense?

  21. Hi Ben

    Thank you for your quick answer.
    About your answer about margins for images: “Yes, I have a style for that already defined; add “inset” to the class=”” in the div for each figure you want to treat that way. Does that make sense?”

    Because I know not much about HTML, this make no sense to me. Are you able to provide me a sample of a text string, to make it obvious for me, what to do?

    Best regards
    Preben

    • Hi: Yes of course, sorry for the cryptic reply :) In the page-xx.xhtml files where you want the image to have margin, change this <div class=’figure full-bleed ‘> to <div class=’figure inset’> — how about that?

  22. Hi Ben
    Thank you again. I tried to make this in the page-02.xhtml and page-03.xhtml files, but it makes no difference, when opening the book in iPad.

    Best regards
    Preben

  23. This is fine but it’s still very primitive formatting and it only works on Apple. The simple fact is the epub format is totally inadequate for books with rich formatting, really with any kind of formatting. It’s a terribly basic format that has essentially killed quality design in books as they transition over to digital. The format needs a lot more work.

  24. I followed your instructions but iTunes does not import the photo-book.epub (zipped) file.
    In other words, i don’t see my photo book in iTunes under ‘Books’.
    Please help.
    thanks

  25. This is the best explanation of creating a fixed-layout ebook for apple that I have found. By using your sample as a guide, the conversion was easy. Thank you!

  26. Hi Ben,
    When I tried to add the .epub file into iTunes, it would not do it. All my other epub files import just fine.
    What am I doing wrong.
    Thanks,

    • Hi: Sounds strange… does it just simply fail with no message? Can you email it to yourself and open it on an iPhone or iPad directly? Failing that, can you send it to me and I’ll take a look? bclemens at blurb dot com

  27. Hi Ben,

    Thank you for this great tutorial. Everything work perfectly when I created a 8×10 landscape book. I then wanted to add pages from your demo of 28 to a total of 50 pages. I added the properly named images to the folder, and copied and added the additional pages in xhtml. I then went into the content.opf file and copied and added the lines to match the new images and xhtml.

    Everything seemed to work well until I got to page 29. When I view the final ibook page 28 just repeats for the rest of the book. I have triple checked my coding, and can not see a problem. Is there something that I missed.

    Thanks for your help. Very exciting tool.

    James

    • I think I fixed it. I went into the xhtml docs and matched the page numbers using Dream Weaver. The preview is still a little funky around pages 28-32. It will flash the 29th page still but then go to the right image.

      Thanks again,

      James

      • Hi James: Glad it worked out; I think the funkiness is the fact that iBooks will still have some preview data for the book in its cache it tries to use; I can usually fix this by deleting the book from iBooks entirely, deleting it from iTunes, restarting my iPad, and then re-adding the book and syncing. Occasionally I have had to completely delete and reinstall iBooks on the iPad if that doesn’t work. At any rate, this is not something that readers of the finished book would see… hope this helps.

  28. Pingback: Fall» Blog Archive » creating photo book

  29. Hi, I found this extremely useful. Although I’m stuck. I followed the instructions. When I look at the pages in Dreamweaver, the images are there, when I zip it and put it on my iPAD, I get the cover only, all the pages show the ? error and no images. Any solutions? Thanks so much

    • Hi: That sounds like it might be the location of the image files, maybe make sure they are there? Or send me the epub, to bclemens at blurb dot com? thanks, Ben

      • I realized I had “pages-02″ instead of “page-02″
        Thanks so much for your help!

  30. Hello,

    Thank you for this tutorial. I have made my first iBook. I do have a problem with the spreads. When I open the xhtml pages with the spreads in texteditor I only see a picture and no code. So I can’t edit the code to make the spreads work. I’m sure I do something wrong but I can’t figure out what. Hope you can help.

    Kind regards,

    Henrieke van Assen
    the Netherlands

    • Hi Henrieke: I’d be happy to help, are you using Textedit for the Mac? It is not a good choice (since it interprets the code instead of just showing the code). TextWrangler is a better (free) app that will work; if that’s not it, maybe send me the files via email, bclemens at blurb dot com?

  31. Hello,

    Thank you for your quick response. I am indeed using Textedit. I will download TextWrangler and have another go. I will let the outcome know.

    Kind regards,

    Henrieke van Assen
    the Netherlands

  32. Hi Ben,

    thanks for your clear howto… Together with http://www.jedisaber.com/eBooks/tutorial.asp it helped me to construct my first photo-book. Even better, as I couldn’t wait for Blurb’s future plans, I’ve scripted the whole thing so I can create as many books as I want ;)

    One thing though, I noticed a stylesheet error in the landscape-example: the ‘left’ property for all ‘.figure.full-bleed.right img’ rules is -704, which gives some funny results in portrain or landscape mode…

    Cheers,

    David

  33. Pingback: make a book with pictures

  34. Having published quite a number of BLURB books I was looking for a means to do an “e-publishing” and I think this method is exactly what I wanted. However I have a problem: when I drag the “photo book” into iTunes I can see only the cover page. Where is the mistake? I dragged the photos as “page-02.jpg” etc. into the “image” folder.

  35. Hello. Many thanks for your detailed guide. I have a question, maybe just a personal question: when the photo-e-book landscape version is opened into iPad2 it’s on two pages (one side the other). How is possible to open and to show just one page each time, so the images can be bigger and everything seems more a landscape book (assuming to use iPad like a real heavy landscape photo-paper-book). Many thanks for your help. Regards.

    • Hi: you can do this by changing the file “com.apple.ibooks.display-options.xml” file (in the META-INF folder). In that file, change <option name="open-to-spread">true</option> to <option name="open-to-spread">false</option>. best, Ben

      • Hello. Many thanks for your reply. I’ve done and everything seems like I’d like to do. Thanks again for everything.

  36. Hello

    Since iBooks can handle PDF files and we are encouraged to use iBooks to read our PDFs, couldn’t one simply design their book as a PDF sized to iPod Touch or iPad dimensions and endeavour to sell it that way? Wouldn’t that work?

    I’m getting an iPod Touch for myself tomorrow (iPad’s too large as I already have a MacBook) to keep in my street photography camera bag which is too small for a iPad anyway and I plan to publish in ebook form from now on. I think my days publishing on paper are limited.

    I’m not too bad at code so will try this exercise here but I’ll also test a basic PDF ebook too.

    • Hi: Certainly PDF is an alternative for a book format, but I am somewhat attached to the ability to make books that have an actual spread, as that is an old and useful format for showing photography. And of course ebooks are a better format to sell if you want to distribute your books… but yes, by all means, use whatever works. PDF will be a lot easier to produce at the very least :)

  37. Hi Ben

    Is it possible to add a copyright page in this example (essentially a text page) after the cover? Not sure if that is possible?
    Regards

    • It would be; see the update to this post (at bottom!)…

  38. Hey Ben-

    First of all, thank you — this post has been a major help in getting my first fixed-width title together. And I gotta say, all went smooth UNTIL I tried to upload it to the iBooks store using iTunes Producer (shocker, right?). EPubCheck is all OK, yet Apple claims the following error:

    ERROR ITMS-9000: “META-INF/container.xml in sample-photo-book-portrait.epub must contain one and only one root file reference.” at Book (MZItmspBookPackage)

    I can’t, for the life of me, understand what’s wrong with the container.xml. I have only one root file reference, same as your template.

    Any thoughts?

    • Hi: I am a veteran of weird ibooks errors, that’s for sure! I haven’t encountered this one (and several people have reported uploading books created with this template to the ibookstore successfully), but maybe you could send me the files and I could take a look? bclemens at blurb dot com

  39. I tried creating a two page spread and the problem is thateachthe image doesn’t fill the entire screen. I’m trying to create a landscape two page spread. My images are 1440 x 576. The show up full width, but with a grey strip on the top and the bottom.
    Thanks!

    • Hi, sorry about the trouble; could you share the files with me? bclemens at blurb dot com …?

  40. Hello,

    Thanks for this very resourceful post, but my iPad isn’t able to download the sample photo book. It gives me error messages.

    • Hi, sorry about the trouble; what error messages? Can you share the files with me? bclemens at blurb dot com …?

  41. I’m going to try and replicate your coding as closely as possible for my own version of 59 single pages in a fixed landscape format at the iPhone/iPad dimensions of 960×640 making whatever code changes that are necessary. It’ll take me ages, I’m sure. But if it works, I’ll roll out a 1024×768 version for iPad 2. However, I am aware that there are margins in the iBooks window but I expect the app will feature my book in full regardless. At least I hope so.

    Before I begin, some more coffee to sharpen the mind. I’ll also drop the screen res on my laptop and enlarge the text so as to go easy on my eyes.

    I’ll report back a little later.

    Paul Treacy

  42. Hi Ben

    I’ve added 2 pages at the start, page-00.xhtml and page-01.xhtml. Can you advise how I would cater for these in the toc.ncx and content.opf files? I’ve tried but I’m not really getting it right.

    Thank you.

  43. Great tutorial works perfectly.

    One problem I have is I have some old publications I need in ebub but the page size is different from the default ones above and it would take forever to change the original files. (720×509) How do I change the page size of the book?
    I’ve tried just changing the CSS code but all it seems to do is scale the image up and crop the bottom off.

  44. Forget last post sorted it just need to change all page size’s.

  45. Thank you ever so for putting this together in such a concise way. Wihtin a morning, I’ve created my first eBook. Pretty empowering. I look forward to seeing Blurb tackle automating this process (or at least creating an easy Blurb-like way to create an eBook). I’ve been debating whether or not to get InDesign for this purpose…doesn’t look like I’ll need it for the kinds of boks I create. Thanks again!

  46. My book is longer than 28 pages, what do I do?

    • nevermind I got it! :)

  47. Okay, I have followed all the directions and I’ve made a successful book, thank you! I am wondering now though, is there a way to add an audio component to my book?

    • In the .opf file you’ll need (different type if you use mp3):

      In the xhtml body:

      See also:
      http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html

      • Seems that I can’t post xml – the lines should be similar to (replace # with angular brackets)
        .opf:
        #item id=”audio_p01″ href=”audio/p01.m4a” media-type=”audio/mp4a-latm”#

        xhtml:
        #audio src=”audio/p01.m4a” controls=”controls”#

  48. Hi Ben

    How can I make a photo book with size: width = 9in and height = 13 in

    • Hi Ram: This involves changing the size in the “viewport” part of each page. It’s set in pixels, so 9in x 72px/in = 648px, and 13in x 72px/in = 936px. The part to change is the meta tag in all .xhtml documents: <meta name="viewport" content="width=704, height=704" /> Let me know if that doesn’t make sense…?

  49. After much struggle I finally finished my eBook edition of Mixed Messages. It’s at http://tinyurl.com/mixedbook should you be interested. I used Photoshop, Aperture, Pages, TextEdit, Dreamweaver, ePub Zip and ePubchecker to complete it but learned a lot from this post.

  50. Wonderful set of instructions..thank you! I made a small sample book of images in no time. I’d like to play around with a text page but I don’t see the instructions for adding text in the Updates. Advise?? Thanks again!

    • There’s a “caption” area on the pages where you can add text… let me know what kind of text you’d want?

      • Aha.. I see the .figcaption now. I was hoping to add a page or two of copy with a Header, Subhead, bodytext, etc.

  51. Currently I have a Flash “Flippy Book” on my website that allows the users to turn pages of a book. I would like to make it so the browser will detect the OS and then display (depending) either the Flash file OR a page turning alternative for the iPad. Is it possible to take what you have done and instead of use it as an App on the iPad, integrate it to display and be used within a browser on the iPad?
    Thanks….Kelly

    • Actually, the preview for books on Blurb (“Bookshow”) does this now for people browsing the web on ipad/iphone/etc. Turning that into an app is something that is possible (and we’re very interested in), but the main barrier is getting the finished product into the App Store. We’re working on a tool that would let you do that for books created with BookSmart/Bookify and viewed in iBooks on iPad/iPhone… email me with your blurb username if you’d like to try it out (bclemens at blurb dot com).

      • hello,

        I would like try the tool to view in ibooks please.

        thank you,

        Blurb username: AWOL2011

  52. In the the meta data

    en-US

    Can you add two languages?

    • I think you can do multiple languages, e.g. “en-US, en-UK”

      • Thank you Ben

  53. If I would want to create an ebook very similar to Ansel Adams, can you tell me how can I go about it? Thank you.

  54. Hello, great tutorial, thank you very much, I am working a 1000+ page book, just images, like a comic book, would you happen to know what dimensions would give me a full image filled page (landscape)?

    • Hi: the “landscape” sample files should give you that…?

  55. I just figured it out, full page image: 720×1080 (spread 1440×1080) for sample-photo-book-landscape:

    1) Make images 720×1080
    2) Change corresponding xhtml pages code to:
    3) Change all the numbers 576 to 1080 in the stylesheet.css

    If you have spread images you have to fix the positioning of the right page in the stylesheet.css

    .standard-landscape .figure.full-bleed.right img {
    position:absolute;
    width:auto;
    height:auto;
    min-height:1080px;
    min-width:720px;
    top:0px;
    left:-704px;

    change the last line to: left:-720px:

    Let me know if I made any errors.

  56. Can explain more on the fig caption? Like font styles,size and where to put custom fonts.

  57. I want single page view in Fixed Layout format not for double page view. Kindly advice how to create the format or give a solution for double page view.

    • Hi: in the file, change the following line so it has the “false” value, like so: <option name="open-to-spread">false</option>

  58. Hi Ben,
    Thanks for the tutorial. I have a simple question, but I don’t know anything about the coding. I am adding content for pages 29 through 80. What else do I have to do, such as making more xhtml entries, etc.
    Thanks,
    Hope

    • Hi: you got it, add more entries in the OPF file for the additional pages (as well as entries for additional images)…

  59. Try “eBook Magic” developed specifically for this purpose. The book maker app is an ipad app that produces fixed format photo books and has text layouts as well. The app puts out printable 300dpi pdf’s as well as fixed format epub files uploadable and salable on itunes book store.

  60. Hello! I am creating a 32 page children’s book. The first and last pages need to be single pages; the remainder will render as spreads. I will be using the Sample Photo Book Portrait files. How do I update the code to ensure that pages 1 and 32 will be single pages? My apologies if you covered this elsewhere, but I couldn’t find the answer. Many thanks!

    • Hi Amanda: iBooks will show the first inside page of your book as the cover, unfortunately, with the first page you can edit being page two. You could leave page two blank, and start the book on page 3 instead…

  61. Thanks for your reply! I have another question. Can you add hyperlinks to an external website address in the fixed layout epub? And if so, is there any information you have on how to achieve this? Many thanks!

  62. Note: Does this seem harder than it should be? It is. Stay tuned for news from Blurb about easier ways to do this!

    This was the exciting part of this post and one I am looking forward to. I am hopeful this might be a prelude to an app that can import Blurb ebooks as this would really help my small business when it comes to distribution of my efforts. I see an app that buys the book direct from my shop in Blurb and securely lands the book into the app viewer. Am I anyway near to having my expectations met:-)

  63. Pingback: Put Your Pictures on Other People’s iPads | Benjamin Hall

  64. Pingback: Put Your Pictures on Other People’s iPads | jasonpickles.ca

  65. Pingback: What’s ePub? | webdevils.com

  66. Pingback: Put Your Pictures on Other People’s iPads | Gallery Photos and Camera

  67. Pingback: ePublishing picture books? | Laura At Work

Comments are closed.