View Full Version : Adjusting Cover Size


jhempel24
12-27-2011, 08:59 AM
I'm trying to get the cover of Scott Siglers' The All-Pro to fill the entire screen on my Nook Color.

Converting with Calibre really screws up the book as far as page numbers go...for instance the entire 13 week regular season in this book is ALL on page 106 out of 124 pages, when the book itself should read 455 pages or so.

It's nit-picky, but hey, I want to learn how to do this anyway lol.

Now I've looked at the code, and it's different that the "svg" tags, the cover is actually in there with a <p class> type of tag.

Anyway to resize with that?

Toxaris
12-27-2011, 01:50 PM
I always put the covers in a SVG wrapper with the correct image and viewbox size and put the width and height to 100%. Works every time.

jhempel24
12-27-2011, 01:53 PM
If I use the svg wrapper it deletes the image for some reason

Toxaris
12-27-2011, 04:18 PM
What code do you use?

jhempel24
12-27-2011, 11:55 PM
I figured it out, this used a CSS file for the image handling for the cover, dug a bit deeper into the coding...I swear it should have been easier than this LOL

in the CSS there was a :

img#coverimage {
padding: 0;
margin: 0;
}

I just added a line that said "width: 100%;" and that did the trick.

jhempel24
12-28-2011, 12:07 AM
I spoke too soon, while it's adjusted in Sigil when you open it, it's NOT adjusted in Calibre when you view it.

EDIT: Nevermind, added "Height: 100%;" to the file and it'll view okay

rrand123
12-28-2011, 11:46 AM
Hello
- this is my first post so if I've missed something obvious please excuse me!

I am making a non-copyright ebook for somebody using Sigil which I will then convert to mobi using Calibre - I've done this before.

I know that according to KDP Amazon don't recommend that you have the cover as the first page when making a book. Inspite of this it's something I'm trying to do!

I have found the code which needs to be inserted in the 'guide' part of the opf. file in Sigil - this is for having the preface as first page but is easily amended to cover:

<reference href="cover.html" type="cover" title="Cover">
<reference type="toc" title="toc" href="toc.html" >
<reference type="start" title="Preface" href="Preface.html" >

This works ok - but for some reason the cover image (600px x 800 px added to Sigil file) shows with a large white border when viewed on the Kindle

Sorry it's a long-winded post,

Please make any explanations very simple - I'm not very bright!

Thank you,

Robert

PS - I've seen this - but am not sure where the coding should be put and which prog. /file.?

img#coverimage {
padding: 0;
margin: 0;
}

theducks
12-28-2011, 12:02 PM
Hello
- this is my first post so if I've missed something obvious please excuse me!

I am making a non-copyright ebook for somebody using Sigil which I will then convert to mobi using Calibre - I've done this before.

I know that according to KDP Amazon don't recommend that you have the cover as the first page when making a book. Inspite of this it's something I'm trying to do!

I have found the code which needs to be inserted in the 'guide' part of the opf. file in Sigil - this is for having the preface as first page but is easily amended to cover:

<reference href="cover.html" type="cover" title="Cover">
<reference type="toc" title="toc" href="toc.html" >
<reference type="start" title="Preface" href="Preface.html" >

This works ok - but for some reason the cover image (600px x 800 px added to Sigil file) shows with a large white border when viewed on the Kindle

Sorry it's a long-winded post,

Please make any explanations very simple - I'm not very bright!

Thank you,

Robert

PS - I've seen this - but am not sure where the coding should be put and which prog. /file.?

img#coverimage {
padding: 0;
margin: 0;
}
It may be simpler (not verified)
Assumes each of those sections are separate pages (files)

In the Book Browser: right-click the filename for the section. select 'Add semantics'

(I hope you can figure it out from here :D )
Save when all done

rrand123
12-28-2011, 12:24 PM
Thank you,
I'd already given that a try but it doesn't seem to help.
Robert

Toxaris
12-29-2011, 02:46 AM
I spoke too soon, while it's adjusted in Sigil when you open it, it's NOT adjusted in Calibre when you view it.

EDIT: Nevermind, added "Height: 100%;" to the file and it'll view okay

If you add both 'widht: 100%' and 'height: 100%' you will probably end up with having the aspect ratio distorted.

Serpentine
12-29-2011, 03:11 AM
If you add both 'widht: 100%' and 'height: 100%' you will probably end up with having the aspect ratio distorted.

If you add both to an img it will not distort - iirc it will try to fit to height only. If you do it via svg, you will end up breaking the AR (assuming you provide the x/y and image size).

Personally I just use height:100%; on a centered image without the svg. (and no padding/margins on anything)

jhempel24
12-29-2011, 03:16 AM
If you add both 'widht: 100%' and 'height: 100%' you will probably end up with having the aspect ratio distorted.

Nope, it will not.

rrand123
12-29-2011, 06:09 AM
for trying to help me - it's much appreciated.
Robert

Toxaris
12-29-2011, 09:04 AM
If you add both to an img it will not distort - iirc it will try to fit to height only. If you do it via svg, you will end up breaking the AR (assuming you provide the x/y and image size).

Personally I just use height:100%; on a centered image without the svg. (and no padding/margins on anything)

For SVG the aspect ratio is easily preserved with the attribute 'preserveAspectRatio', so no problem there.

If setting both the image width and height to 100% does not give problems, fine. I was mistaken with a hard setting in pt.

rrand123
12-29-2011, 09:34 AM
What's an SVG - and how do I use it for the cover?
I think it's some sort of graphic. For the cover I'm currently using a Jpeg (600 x 800) compressed for web to reduce file size. Should I be doing something different to get the cover to work?

Thank you,

Robert

sassanik
01-16-2012, 04:57 AM
I am having the same problem with the Nook covers not displaying correctly, the overflow the bounds of the screen.

It looks fine when I upload to Amazon and when I view in Calibre. If I run the file through Calibre and then edit in Sigil the cover gets the svg tag.

I am guessing there is some setting that the Nook is looking for to size the image correctly. I have set up the file with a the semantics of "cover" added to that area.

Do I need to add in specific html? I hate to mess around the css file, mostly because I am not very good at it!

Looking at the code view on one of the calibre generated epubs I see:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 600 800" width="100%">
<image height="800" width="600" xlink:href="../Images/cover.jpeg"></image>
</svg>

without calibre the code looks like
<p><img alt="" src="../Images/cover.jpg" />&nbsp;</p>

so in theory something like
<p><img alt="" src="../Images/cover.jpg" height="100%" width="100%" /></p>

should fix it?

Amy

huebi
01-16-2012, 06:05 AM
<p><img alt="" src="../Images/cover.jpg" height="100%" width="100%" /></p>


Thats how i do it, but without width and a class named coverimg having the rules for centered, padding and margins assigned to the p-element.

JSWolf
01-20-2012, 05:20 PM
Here is the proper code. Fix as needed. It keeps the cover aspect ratio correct.

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ops="http://www.idpf.org/2007/ops" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<head>
<title>Ready Player One</title>
<link href="Clin_9780307887450_epub_css_r1.css" rel="stylesheet" type="text/css"/>
<meta content="application/xhtml+xml; charset=utf-8" http-equiv="Content-Type"/>
</head>
<body style="margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; text-align: center;">
<div class="cover">
<img alt="" src="images/Clin_9780307887450_epub_cvi_r1.jpg" height="100%"/>
</div>
</body>
</html>

and in the CSS...

div.cover {
text-align: center
}