Add a cover
If you didn’t create your cover in InDesign (e.g. you are using the same master InDesign document for print and epub), you need to add one to the epub package. Here’s a step-by-step guide.
Create an image
- First, create a cover image at 150dpi and close to, but not more than 1000px on its longest side.
- Save it as cover.jpg.
- Add it to the OEBPS folder.
Optional: If you like, you can add cover.jpg to a subfolder in OEBPS (e.g. “OEBPS/images”), but then remember that when working on the code described below, all references to the cover image must include the folder in the path, i.e. “images/cover.jpg”.
Create an XHTML file to control the cover
A short XHTML file tells ereading systems how to display the cover. You can use the same XHTML file for all your epubs, if you name your image file and folders in the same way each time.
So, in a text editor (like Notepad), paste this XML only and save as the file as cover.xhtml.
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Cover</title> <link rel="stylesheet" type="text/css" href="template.css" /> </head> <body class="cover"> <p class="cover"><img class="cover" alt="" src="cover.jpg" /></p> </body> </html>
Optional: In the
Add cover.xhtml to the OEBPS folder. Remember that if your cover.jpg and stylesheet template.css are not in the same folder as your cover.xhtml, adjust the paths before their file names in this code.
Add the cover to the metadata, manifest and spine
You’ll find the metadata, manifest and spine in the content.opf file, which is in the OEBPS folder. Open it in a text editor.
Cover in metadata
Reading systems need to know what image in the epub is the cover image. A good way to do this is to mention the cover in the metadata in content.opf.
<meta name="cover" content="cover-image"/>
Where “cover-image” is the ID of the cover.jpg in the manifest.
iBooks needs this in order to create the book’s cover icon in its bookshelf view.
Tech note: This is a best-practice suggestion, but is not yet formalised in the epub specification. The eventual, formalised form of this metadata might be different.
Cover in manifest
The manifest is a randomly ordered list of everything in the epub folders. The spine is an ordered list of the book content. Both need to include the cover.
- Open the content.opf file (preferably in a HTML-recognising text editor like TextPad, but Notepad will do).
- After the
tag, insert the following two lines (the order of items in the manifest is not important):
<item id="cover" href="cover.xhtml" media-type="application/xhtml+xml"/> <item id="cover-image" href="cover.jpg" media-type="image/jpeg"/>
Cover in spine
The spine tells a reading system in what order to read things in the epub package.
After the <spine toc=”ncx”> tag, insert the following line (the order in the spine is very important; cover first!):
<itemref idref="cover" linear="no"/>
Tech note: The linear="no" part is optional, but recommended. It tells the reading system not to include the cover in the normal reading flow of the epub. That is, it’s not a page of content, it’s just the cover.
Add the cover to the CSS file
The CSS file contains information about how things should look, such as colours and spacing of text and images. You’ll find the CSS file in the OEBPS folder, usually called template.css (or, often, style.css).
Open the CSS file in a text editor and add the following lines:
/*Cover*/
body.cover {
margin: 0;
padding: 0;
text-align: center;
}
p.cover {
margin: 0;
padding: 0;
text-align: center;
}
img.cover {
max-height: 100%;
}
Note: This is our preference for displaying cover images. Others do this differently. The margin and padding here override the automatic white space ADE adds around elements. The text-align puts the cover in the middle of the reader’s viewport. Both the body and p classes are necessary, because they control different aspects of cover display in ADE.
Note: In a moment you’ll add more code to the CSS file. Once you’re confident of this process, you can jump ahead to do that now. For now, stay with us.
Note: If you’re using an .xpgt file to control margins and columns in ADE, do not link to it in your cover.xhtml file, or you’ll get white space around your cover page.
Tech note: Some people say you should use SVG for covers. SVG is a great format for creating crisp vector graphics, so this would be best practice if most ereaders supported it, but they don’t.
Further reading on covers
Advice from Adobe
Adobe provides the following advice regarding covers. We don’t actually agree with it at the moment (for various reasons), but if you want to experiment with it, go ahead!
The right aspect ratio for the thumbnail. … Our thumbnail size is 90×130. For a cover page to fit well in that, and also look good at larger sizes, you’ll want to create a single image with that aspect ratio. (567×819 should work well.) In the CSS you’ll want to set the max-width to 100%, all margins and padding set to zero.
img { max-width: 100%; padding: 0; margin: 0; }Keeping the cover always centered.
You’ve probably noticed that in Adobe Digital Editions, when you shrink the text enough, the reading view goes into a two column or three column mode. That’s great for the text, but not so good for the image, you’d rather keep it centered. A one column view is usually best. This is one case where I’d probably just include the style information in the XHTML file for the cover. You’ll want to style the ‘body’ tag with the oeb-column-number property and a value of 1, like this: <body style=”oeb-column-number: 1;”> The inline style will override the default style, and you’ll have a single column for everything in that particular body element.
Best practice from Threepress
Threepress is run by two of the smartest people in epub tech. Their advice on covers is excellent.