View Full Version : Link to cover image in TOC


scheife
03-07-2013, 06:18 PM
Hi all.

I have a request from my client to create a link in the ePub TOC that links to the embedded cover image. In other words, adding the cover image to the start of the file and making a link to it is not an option, as it duplicates the cover at the beginning of the eBook when viewed on the iPad, ADE, etc. Is there a way to create a TOC entry that links to the already-embedded cover image? Any help would be appreciated.

Tex2002ans
03-07-2013, 07:52 PM
I do not know the way your EPUB is constructed, but usually the first HTML file in the EPUB is something along the lines of "cover.xhtml" which only holds code to show the cover image.

If you add this code to your inline TOC, when clicked, will lead directly back to the "cover.xhtml" file:

<p><a href="../Text/cover.xhtml">Cover Image</a></p>

Red: Location of the file you want the link to send the reader to (Sigil places files in the Text folder, but your file placement may be different).
Blue: The text you want to display in the book.

GrannyGrump
03-07-2013, 10:09 PM
If you are using Sigil or other software that generates an automatic table of contents, you could also add a Heading tag to the file that has your cover image. You can style the header to "display: none" so it doesn't interfere with the placement or aspect ratio of the image.

This has worked for me, using Sigil to create the ToC. Display is fine in ADE, v 1.8.

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!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>
<style type="text/css">
/*<![CDATA[*/
body {margin:0; padding: 0; border-width: 0; }
@page {margin: 0; padding: 0; border-width: 0; }
h1 {display: none}
div {
text-indent: 0em;
text-align: center;
}
/*]]>*/
</style>
</head>

<body>
<div>
<h1 id="heading_id_2" title="Cover"></h1>

<svg xmlns="http://www.w3.org/2000/svg" height="99%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 600 800" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="800" width="600" xlink:href="../Images/cover.jpg"></image>
</svg>
</div>
</body>
</html>

JSWolf
03-12-2013, 09:05 AM
What I do is type in the word cover on thr cover page. I style it and then let Sigil use that for the ToC entry. After the ToC is finished, I remove it and I don't have extra code hanging about.