Pictures and undesirable blank pages

GregorSoren · 06-01-2018, 11:08 PM

HELLO EVERYONE!

I need some help with my new ebook. I'm trying to insert pictures (I wanted them big, covering a whole new page without any text if possible). Any tips or codes I can use to avoid the undesirable blank pages that come out before and after the picture page?

Thanks

Turtle91 · 06-02-2018, 10:23 AM

I use an SVG wrapper for full page pictures. However, I've heard that some devices (kindle??) might have problems with that if it is other than the cover image.

Code:

<body style="margin:0; padding:0; text-align:center; background-color:black">

  <div style="margin:0; padding:0">
    <svg 
		xmlns="http://www.w3.org/2000/svg" 
		height="100%" width="100%" 
		preserveAspectRatio="xMidYMid meet" version="1.1" 
		viewBox="0 0 600 1050" 
		xmlns:xlink="http://www.w3.org/1999/xlink">
        <image width="600" height="1050" xlink:href="../Images/img_008.gif"/>
    </svg>
  </div>
</body>

RbnJrg · 06-02-2018, 10:56 AM

Quote:

Originally Posted by GregorSoren

HELLO EVERYONE!

I need some help with my new ebook. I'm trying to insert pictures (I wanted them big, covering a whole new page without any text if possible). Any tips or codes I can use to avoid the undesirable blank pages that come out before and after the picture page?

Thanks

Just put your image as background in a new .xhtml file. For example:

1. In your .xhtml file:

Code:

<body></body>

2. In your .css file:

Code:

body {
     margin: 0;
     padding: 0;
     background: url("../Images/YourImageHere.jpg");
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center top;
}

Don't forget to link the .css file with the .xhtml file.

By the way, this is a perfect workaround to solve the svg cover bug with ADE 4.x under epub3. I attach an epub3 so you can watch better how ADE reproduce with this method the behavior of a svg wrapper (but without bug).

Regards
Rubén

PS: I don't know why Sigil can't support the value "contain" for the "background-size" property. In Sigil, you won't see anything (maybe a Sigil bug) but in ADE works fine.

slowsmile · 06-02-2018, 08:06 PM

The way I normally format full page ebook images in an epub is by using inline styling that uses percentage values within the <img> tag in the html:

Example:
<img alt="image001" src="../Images/YOUR_IMAGE.jpg" style="width: 100%; height: auto;"/>

The above code will ensure that the displayed image is at maximum page width and height in Sigil.

If you have alot of ebook images to convert and you want the above done automatically then you could just run Sigil's CustomCleanerPlugin plugin and be sure to select "Reformat smaller ebook images to preserve image size" in the options dialog. This choice will convert and resize all ebook images to a percentage of current device screen size. This also means that any ebook images that are greater than page size will automatically be resized to 100% page width/height.

And if you are formatting your epub for Kindle upload only, then I would advise you to just run the AddKindleMediaQueries Sigil plugin. This plugin will dual format all ebook images using media queries to ensure that all images are dispalyed properly on KF8 devices(with percentage values) and on older KF7 devices(with pixel values).

RbnJrg · 06-03-2018, 09:15 AM

Quote:

Originally Posted by slowsmile

The way I normally format full page ebook images in an epub is by using inline styling that uses percentage values within the <img> tag in the html:

Example:
<img alt="image001" src="../Images/YOUR_IMAGE.jpg" style="width: 100%; height: auto;"/>

The above code will ensure that the displayed image is at maximum page width and height in Sigil.

But of that way can have text below (or above) the image. Suppose a picture with a width of 600px with a height of 100px. With a screen of 800x600 always will have text before or after the image an the OP doesn't want any text in the image page.

Notjohn · 06-03-2018, 10:17 AM

Quote:

Originally Posted by RbnJrg

But of that way can have text below (or above) the image. Suppose a picture with a width of 600px with a height of 100px. With a screen of 800x600 always will have text before or after the image an the OP doesn't want any text in the image page.

I always put the image in a section/file of its own. If the image is horizontal, I generally include a caption in the same section, but there's certainly no requirement that it be done that way.

I've never experienced a blank page after, or especially before, an image. Wouldn't that only come about if there were some hidden formatting or a substantial demand for margin-bottom in the division style?

RbnJrg · 06-03-2018, 11:13 AM

Quote:

Originally Posted by Notjohn

I always put the image in a section/file of its own. If the image is horizontal, I generally include a caption in the same section, but there's certainly no requirement that it be done that way.

That it works. Of that way one will be sure that no text will be before or after the picture (unless one uses a caption as you say, but this is a choice).

However, with that method, still remains the problem of the vertical position of the image (the width will be 100% so no problem with the horizontal position). By using the image as background, you can control that position with the property "background-position". With the value "center center" (or 50% 50%) you can set it exactly in the center (or wherever you want by using percentages). And with the property "background-size" with the value "contain" you'll be sure that the image will have the bigger size possible.

Quote:

I've never experienced a blank page after, or especially before, an image. Wouldn't that only come about if there were some hidden formatting or a substantial demand for margin-bottom in the division style?

As you, I also never experienced a blank page before an image, but I think that could be some issue with "padding-bottom" in the division style previous to the new .xhtml file with the image.

Regards
Rubén

DiapDealer · 06-03-2018, 12:39 PM

Quote:

Originally Posted by RbnJrg

PS: I don't know why Sigil can't support the value "contain" for the "background-size" property. In Sigil, you won't see anything (maybe a Sigil bug) but in ADE works fine.

Might be a bug in QtWebKit. I notice that when using "contain," the image is actually visible in Book View--albeit very, very, tiny. Not sure what's up there. The value of "cover" also does some weird cropping (weird in how it crops, not that it crops). I believe the the values are intended to be supported by QtWebKit, but how well (and on what platforms) they're supported is another thing. Have to do some research.

RbnJrg · 06-03-2018, 02:48 PM

Quote:

Originally Posted by DiapDealer

Might be a bug in QtWebKit. I notice that when using "contain," the image is actually visible in Book View--albeit very, very, tiny. Not sure what's up there. The value of "cover" also does some weird cropping (weird in how it crops, not that it crops). I believe the the values are intended to be supported by QtWebKit, but how well (and on what platforms) they're supported is another thing. Have to do some research.

Yes, it might be a bug in QtWebkit. When I wrote "maybe a Sigil bug" was because Calibre supports quite well the property "background-size: contain" and I think (I can be wrong) that Calibre also utilizes QtWebkit (but I don't know if is the same version that Sigil uses).

slowsmile · 06-03-2018, 08:17 PM

@RBnJrg...It's probably true that the "background-size" property would work for epubs and work on ADE. But "background-size" would not work for Kindle conversions because both the "background" property and the "background-size" property are not supported or recognized in the proprietary HTML used by Kindle format because Kindle devices only allow the background color to be controlled by the Kindle device user. This is also the reason why the "background" property is not allowed in Kindle format. Here is a list of Kindle supported html tags:

Kindle List of supported HTML Tags

I also have no idea how the OP is inserting his ebook images. How did he generate his epub file? Did he use a bad conversion? He hasn't said. And there are plenty of other converters out there besides Calibre.

From my own experience, ebook images can be easily inserted into an epub as full-page or smaller images without problems and without extra pages being generated in the epub. Such image pages, when generated properly, will display without problems in Sigils Book View. After generating the full-page image epub file, all that needs doing is to ensure that the image is in a separate image file in Sigil's Book Browser with all the appropriate entries in the opf manifest and Images folder. Doing the latter will absolutely ensure that there is no extra spacing or blank pages after the displayed image.

As far as I can ascertain(without any html extracts to look at from the OP), the only way extra blank pages could be generated in the epub would be due to either incorrect setup in Calibre or incorrect setup or bad conversion on whatever epub converter he has used.

And as far as I'm concerned, there are too many unanswered 'what ifs' concerning the OPs image problem. We really don't have enough info in other words. And what would really help us solve his problem is to get some answers and feedback from the OP.

slowsmile · 06-03-2018, 08:35 PM

@GregorSoren...Some questions for you:

What word-processing app did you use to write your book? Did you use MS Word or LibreOffice etc.

Did you use the enter key alot to create blank lines in your doc? (Using more than three consecutive blank lines after your images in your doc would probably be enough to automatically and consistently generate blank pages after your images in your epub conversion)

What converter did you use to convert your doc to epub? Did you use Calibre or did you use some other converter?

Would it be possible for you to upload and post a link on MR that contains a Sigil html file from your epub showing the image spacing or page problem?

Could you also upload and post a link to the main epub stylesheet from your ebook as well ?

Thanks.

RbnJrg · 06-04-2018, 06:38 PM

Quote:

Originally Posted by slowsmile

@RBnJrg...It's probably true that the "background-size" property would work for epubs and work on ADE. But "background-size" would not work for Kindle conversions because both the "background" property and the "background-size" property are not supported or recognized in the proprietary HTML used by Kindle format because Kindle devices only allow the background color to be controlled by the Kindle device user. This is also the reason why the "background" property is not allowed in Kindle format. Here is a list of Kindle supported html tags:

Kindle List of supported HTML Tags

Hi Slowsmile;

Well, don't believe much what Amazon says in that page

When the .kf8 format was realeased, Amazon published a free .mobi ebook (about five, six years ago) whose name was (is) "Kindle Format 8 Sample". In that ebook, it was showed the new features of that "new format", among them, the possibility of working with background images. I attach a copy of that ebook so you can watch it.

So, Kindle can manage background images since the beggining of .kf8. Of course, the old .mobi format can't show anything. But, there is a little trick in order that Kindle shows a background image (as I wrote in my previous post); the page that contains the background must have some text. It's not neccesary much text, just one or two sentences. The trick is in applying the property "visibility: hidden" to that text so the reader only can see the image.

I built an epub and a .mobi (with that .epub) that I attach, so you can understand better what I say. And below you can see a screenshot of my old Kindle showing the background image:

Click image for larger version

Name: screen_shot-36194.gif
Views: 251
Size: 46.8 KB
ID: 164300

Quote:

I also have no idea how the OP is inserting his ebook images. How did he generate his epub file? Did he use a bad conversion? He hasn't said. And there are plenty of other converters out there besides Calibre.

You are right. We don't know if the OP wants an .epub or a .mobi (.azw3, .kf8). Also, we don't know if, in the case of a .mobi, he will use Calibre, Kindlegen, Kindlepreviewer, etc. to convert the .epub or if he's using a word processor to build the source. But I suppose that he's building an .epub; if not, why is he posting in the Sigil forum?

But in any case (.epub or .kf8), he can use the method of using a background image, with the possibility of setting it in the position he wants. With an image in a new .xhtml file, very probably the OP will want that image verticaly centered. Well, is easy to achieve that by using "background-position: 50% 50%" (or whatever values the OP wishes). IMHO, is by far the easiest method to center an image in a new page.

Regards
Rubén

slowsmile · 06-04-2018, 08:12 PM

@RbnJrg...I've had a look at your image in the various formats and I would completely agree with you that KF8 devices can use the "background" property without any problems. But when I checked your mobi "background" image on E-Ink emulation on the older Kindle Previewer your background image was missing. I also realize that many indie authors who format their own ebooks don't really care about ensuring that KF7 image formatting is done correctly -- because it's such a hassle to dual format all ebook images for correct displays on both KF7 and KF8 devices. Most assume that no-one uses E-Ink devices any more. Unfortunately there are alot of E-Inks(older KF7 devices) still being used out there. So if someone who owns an E-Ink buys your ebook and cannot see your reference images because you've used the "background" property then there is a good likelihood that he/she will complain about this in the reviews of your ebook on Amazon, perhaps leading to poor sales of your ebook as a consequence.

As far as I'm concerned, this isn't really a big deal. Indie authors can and should format their Kindle ebooks how they like. But it is perhaps worthwhile just to highlight one major downside of using the 'background" property to display images on older KF7 devices.

DiapDealer · 06-04-2018, 08:56 PM

Quote:

Originally Posted by slowsmile

But when I checked your mobi "background" image on E-Ink emulation on the older Kindle Previewer your background image was missing.

The eink emulator in KindlePreviewer is notoriously unreliable. I'd trust the image Rubén attached of the background-image rendering on his K7 device much more. But regardless ... I think we've gone a lot farther down the KindleBook rabbit hole than we need to already. Especially with no followup material from the OP indicating that it's even relevant.

exaltedwombat · 06-06-2018, 10:26 AM

Quote:

Originally Posted by slowsmile

Is the height parameter necessary?

06-01-2018, 11:08 PM	#1
GregorSoren Junior Member Posts: 1 Karma: 10 Join Date: Jun 2018 Device: none	Pictures and undesirable blank pages HELLO EVERYONE! I need some help with my new ebook. I'm trying to insert pictures (I wanted them big, covering a whole new page without any text if possible). Any tips or codes I can use to avoid the undesirable blank pages that come out before and after the picture page? Thanks

06-02-2018, 08:06 PM	#4
slowsmile Witchman Posts: 628 Karma: 788808 Join Date: May 2013 Location: Philippines Device: Android S5	The way I normally format full page ebook images in an epub is by using inline styling that uses percentage values within the <img> tag in the html: Example: <p class="center"><img alt="image001" src="../Images/YOUR_IMAGE.jpg" style="width: 100%; height: auto;"/></p> The above code will ensure that the displayed image is at maximum page width and height in Sigil. If you have alot of ebook images to convert and you want the above done automatically then you could just run Sigil's CustomCleanerPlugin plugin and be sure to select *"Reformat smaller ebook images to preserve image size"* in the options dialog. This choice will convert and resize all ebook images to a percentage of current device screen size. This also means that any ebook images that are greater than page size will automatically be resized to 100% page width/height. And if you are formatting your epub for Kindle upload only, then I would advise you to just run the AddKindleMediaQueries Sigil plugin. This plugin will dual format all ebook images using media queries to ensure that all images are dispalyed properly on KF8 devices(with percentage values) and on older KF7 devices(with pixel values). Last edited by slowsmile; 06-03-2018 at 05:16 AM.

06-03-2018, 08:17 PM	#10
slowsmile Witchman Posts: 628 Karma: 788808 Join Date: May 2013 Location: Philippines Device: Android S5	@RBnJrg...It's probably true that the "background-size" property would work for epubs and work on ADE. But "background-size" would not work for Kindle conversions because both the "background" property and the "background-size" property are not supported or recognized in the proprietary HTML used by Kindle format because Kindle devices only allow the background color to be controlled by the Kindle device user. This is also the reason why the "background" property is not allowed in Kindle format. Here is a list of Kindle supported html tags: Kindle List of supported HTML Tags I also have no idea how the OP is inserting his ebook images. How did he generate his epub file? Did he use a bad conversion? He hasn't said. And there are plenty of other converters out there besides Calibre. From my own experience, ebook images can be easily inserted into an epub as full-page or smaller images without problems and without extra pages being generated in the epub. Such image pages, when generated properly, will display without problems in Sigils Book View. After generating the full-page image epub file, all that needs doing is to ensure that the image is in a separate image file in Sigil's Book Browser with all the appropriate entries in the opf manifest and Images folder. Doing the latter will absolutely ensure that there is no extra spacing or blank pages after the displayed image. As far as I can ascertain(without any html extracts to look at from the OP), the only way extra blank pages could be generated in the epub would be due to either incorrect setup in Calibre or incorrect setup or bad conversion on whatever epub converter he has used. And as far as I'm concerned, there are too many unanswered 'what ifs' concerning the OPs image problem. We really don't have enough info in other words. And what would really help us solve his problem is to get some answers and feedback from the OP. Last edited by slowsmile; 06-03-2018 at 09:31 PM.

06-03-2018, 08:35 PM	#11
slowsmile Witchman Posts: 628 Karma: 788808 Join Date: May 2013 Location: Philippines Device: Android S5	@GregorSoren...Some questions for you: What word-processing app did you use to write your book? Did you use MS Word or LibreOffice etc. Did you use the enter key alot to create blank lines in your doc? (Using more than three consecutive blank lines after your images in your doc would probably be enough to automatically and consistently generate blank pages after your images in your epub conversion) What converter did you use to convert your doc to epub? Did you use Calibre or did you use some other converter? Would it be possible for you to upload and post a link on MR that contains a Sigil html file from your epub showing the image spacing or page problem? Could you also upload and post a link to the main epub stylesheet from your ebook as well ? Thanks. Last edited by slowsmile; 06-03-2018 at 09:33 PM.

06-04-2018, 08:12 PM	#13
slowsmile Witchman Posts: 628 Karma: 788808 Join Date: May 2013 Location: Philippines Device: Android S5	@RbnJrg...I've had a look at your image in the various formats and I would completely agree with you that KF8 devices can use the "background" property without any problems. But when I checked your mobi "background" image on E-Ink emulation on the older Kindle Previewer your background image was missing. I also realize that many indie authors who format their own ebooks don't really care about ensuring that KF7 image formatting is done correctly -- because it's such a hassle to dual format all ebook images for correct displays on both KF7 and KF8 devices. Most assume that no-one uses E-Ink devices any more. Unfortunately there are alot of E-Inks(older KF7 devices) still being used out there. So if someone who owns an E-Ink buys your ebook and cannot see your reference images because you've used the "background" property then there is a good likelihood that he/she will complain about this in the reviews of your ebook on Amazon, perhaps leading to poor sales of your ebook as a consequence. As far as I'm concerned, this isn't really a big deal. Indie authors can and should format their Kindle ebooks how they like. But it is perhaps worthwhile just to highlight one major downside of using the 'background" property to display images on older KF7 devices. Last edited by slowsmile; 06-05-2018 at 04:29 AM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Blank pages	Sablerose	Marvin	11	02-08-2014 09:06 AM
Blank pages in a book	DigiCam1	Library Management	3	02-24-2013 02:06 PM
Blank Pages	PAULINE BIRCHNAL	Conversion	5	01-02-2012 12:47 PM
Troubleshooting one after another blank pages	monsterbadgog	Amazon Kindle	0	02-20-2011 04:02 PM
Blank pages	JSWolf	Calibre	4	11-29-2008 01:22 PM