2 Replies Latest reply: Jan 20, 2010 11:23 PM by Wendy_Palmer RSS

    Front Cover Image Display

    Community Member
      The front cover image of my epub file will not fit the page in Digital Editions. The Image remains extremely large and you can only see the top left hand corner of it in both the reading pain and the thumbnail. How do i get my front cover image to fit the page?

      Regards
      Hannah
        • 1. Re: Front Cover Image Display
          thisby Community Member

          Hi--

           

          I'm also having less than ideal cover display in ADE for epubs, but I'm posting our current approach, in case it's closer to okay and helpful for you, Hannah..?

           

          (We're still getting a white ring around the thumbnail, and the cover isn't fit to height on first display....if anyone has any tips to tweak this, please post them...!)

           

          Here's what we're doing:

           

          cover.xhtml:


          <?xml version="1.0" encoding="utf-8"?>
          <!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>
          </head>
          <body style="oeb-column-number: 1;">
          <div>
          <img src="images/978-0-472-03320-1-frontcover.jpg" style="width: 100%; max-width: 100%; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;border:0px;" alt="cover"/>
          </div>
          </body>
          </html>

           

          and, these bits in content.opf:

           

            <item href="images/978-0-472-03320-1-frontcover.jpg" id="cover-image" media-type="image/jpeg"/>

           

          ...[clipped]...

           

            <item id="coverpage" href="cover.xhtml" media-type="application/xhtml+xml"/>


          ...[clipped]...

           

            <itemref idref="coverpage" linear="yes" />

           

          ...[clipped]...

           

          <reference type="cover"
                     title="Cover"
                     href="cover.xhtml"/>

           

          We're also making sure our cover is some 90 x 130 ratio (e.g. 500 x 722, 415 x 600, etc.)

           

          It's better, but, like I said, if anyone knows what to change to get rid of white border on thumbnail and to display cover fit-to-height, please let me know..!

           

          Thanks...

           

          --Kate

          • 2. Re: Front Cover Image Display
            Wendy_Palmer Community Member

            Hi, Kate. You posted this months ago, so maybe you sorted it yourself, but I found to get rid of the white border around the thumbnail, adding this in the cover.xhtml worked:

             

            <body style="margin:0; padding: 0; border-width: 0">

             

            instead of <body style="oeb-column-number: 1;">, which I found didn't seem to change anything on my file. I also didn't seem to get any effect from the opf edits you listed.

             

            I haven't been able to work out cover fit-to-height, though...I have been trying to work it through SVG but I think that is far beyond my fledging skills...