[MaestroZanni]

How do I add a new page to an ePub eBook?

I have a lot of eBooks that have the wrong cover page and I know how to change them. That's not my issue. My issue is that when I add a new cover page to an ePub eBook, it automatically deletes the old one. For a small but significant number of my eBooks, I don't want to erase the old image that served as the cover page. I just want the old cover page to become the second page of the book, which means it would come right after the first page where the new cover image is.

Here's is an example to illustrate my dilemma.

I have a book Thief of Time, by Terry Pratchett that has the wrong cover image. Here is a screenshot of what it looks like now: Image A.
The right cover for the eBook is this Image B

I know how to make Image B the cover page. But that's only half of what I am trying to achieve. I want Image B to become the new cover page without erasing image A in the process which is what happens by default. I want Image B to follow Image A as the second page of the eBook where I would title it as "Praise for the book" in the table of contents. Basically I want to add a new page without erasing the one it replaces but just changing the order of all the other pages to accommodate it.

How do I do that?

I would be eternally grateful if someone helped me figure this out.

Thanks for your help

Kind regards,

MZ

[Fizban]

I don't know if it is possible in Calibre, but if no one else comes up with a method for you, you might try downloading the ebook editor, Sigil (https://sigil-ebook.com/), and open the epub with it.

All you have to do then is right-click->create a copy of the titlepage, then import the new image and change the image name on the titlepage, leaving the copy as your second page.

Only problem you might have doing this is that if the epub is badly formed then Sigil might mess it up (though it's easily fixable if you know how to code html). Usually it's not a problem but definitely save it under a new name until you've tested it.

[MaestroZanni]

I don't know if it is possible in Calibre, but if no one else comes up with a method for you, you might try downloading the ebook editor, Sigil (https://sigil-ebook.com/), and open the epub with it.

All you have to do then is right-click->create a copy of the titlepage, then import the new image and change the image name on the titlepage, leaving the copy as your second page.

Only problem you might have doing this is that if the epub is badly formed then Sigil might mess it up (though it's easily fixable if you know how to code html). Usually it's not a problem but definitely save it under a new name until you've tested it.

Hey,

I appreciate your reponse. I downloaded Sigil, and tried to do what you suggested but it didn't work. It keeps crashing every time I try.

[NovaPhoenix]

I appreciate your reponse. I downloaded Sigil, and tried to do what you suggested but it didn't work. It keeps crashing every time I try.

In Sigil, you can use the Chapter Break option, which splits any chapter in two. On the new chapter, which will show as just an empty page, click "insert an image" and choose image A from your computer, then save the file.

I hope this helps.

[MaestroZanni]

I appreciate your reponse. I downloaded Sigil, and tried to do what you suggested but it didn't work. It keeps crashing every time I try.

In Sigil, you can use the Chapter Break option, which splits any chapter in two. On the new chapter, which will show as just an empty page, click "insert an image" and choose image A from your computer, then save the file.

I hope this helps.

I think there is a problem with the app. Everytime I try editing anything in my eBook Sigil keeps crashing. I uninstalled then reinstalled the app. I get the same result. It keeps crashing.

[MaestroZanni]

I don't know if it is possible in Calibre, but if no one else comes up with a method for you, you might try downloading the ebook editor, Sigil (https://sigil-ebook.com/), and open the epub with it.

All you have to do then is right-click->create a copy of the titlepage, then import the new image and change the image name on the titlepage, leaving the copy as your second page.

Only problem you might have doing this is that if the epub is badly formed then Sigil might mess it up (though it's easily fixable if you know how to code html). Usually it's not a problem but definitely save it under a new name until you've tested it.

Ok. I managed to make Sigil work without crashing. But it still doesn't work.
I followed your instructions. Right Click Cover (under Text) > Add Copy
It creates another copy where I have 2 identical pages with the same cover which is what it's supposed to do.
I changed the copy name to "Praise for the book". Have a look here.


Only when I import the eBook into Calibre to add the new cover, not only does it replace the old cover (which is what is what happens by default), but it also replaces the image the in the copy I created on the second page.

Any advice?

Thanks again,

MZ

[Fizban]

Okay, I think I see the problem - by not changing the name of the image shown on the 2nd page, when you import into Calibre and change the cover, both pages get editted. What you need to do is change the cover within Sigil itself.

1) First, try changing the name of the new file to "praise_for_the_book" as some ereaders do not recognize spaces in the file names and therefore will just skip over files with spaces in the name.

2) Add the new cover within Sigil itself by doing the following:
a) Double-click on your titlepage file to open it.
b) Delete the old image on the titlepage - this will leave it just on the praises page.
c) Scroll down in the left pane to Images and right click on it->Add Existing Files
d) Browse to where you have a copy of the new cover image and choose it
e) Sigil adds the image into your book
f) At the top of Sigil, click the image icon to add an image to your page.
g) It will show you a list of images contained in your ebook - choose the one you want to show on the titlepage.
h) Do any formating you want - center align, etc.
i) Save the book with both images included
j) THEN import into Calibre

[MaestroZanni]

Okay, I think I see the problem - by not changing the name of the image shown on the 2nd page, when you import into Calibre and change the cover, both pages get editted. What you need to do is change the cover within Sigil itself.

1) First, try changing the name of the new file to "praise_for_the_book" as some ereaders do not recognize spaces in the file names and therefore will just skip over files with spaces in the name.

2) Add the new cover within Sigil itself by doing the following:
a) Double-click on your titlepage file to open it.
b) Delete the old image on the titlepage - this will leave it just on the praises page.
c) Scroll down in the left pane to Images and right click on it->Add Existing Files
d) Browse to where you have a copy of the new cover image and choose it
e) Sigil adds the image into your book
f) At the top of Sigil, click the image icon to add an image to your page.
g) It will show you a list of images contained in your ebook - choose the one you want to show on the titlepage.
h) Do any formating you want - center align, etc.
i) Save the book with both images included
j) THEN import into Calibre

Thank you so much for your help Fizban.

I tried following your instructions but for some reason I am stuck at Step 2-b. I am unable to delete the image from the title page. See here.
There is no option to delete the image when I right click. I tried pressing delete on my keyboard but that deletes the entire titlepage not the image inside it.

Nevertheless I think I found another way, but I ran into a different problem which I am hoping you or someone else can help me with.

Here is what I did.

PHASE 1: CALIBRE

1. I saved a copy of the image file of the old cover on my desktop.
2. I changed the the cover page from the old image to the new image. By doing so the old image was deleted but its copy is saved my destkop.

PHASE 2: SIGIL

1. Right Click Text Folder > Add Blank HTML File
Instead of creating a copy of the old original title page I created a new blank page

2. Name the new blank page "Praise" and move it right under the titlepage where the the new cover is.
3. Right Click Image Folder > Add Existing File > Select old cover image from Desktop
4. Open the blank page titled "Praise".
5. Click Insert > File and selected the old cover image
6. Click save

MISSION ACCOMPLISHED!
When I open the file in Calibre both the cover page and praise page are in the eBook.

NEW PROBLEM

The image on the new "Praise" page I created does not fit the whole page. It only shows partially. Have a look. Yes, I know that if I open the eBook on my iPad I'll see the whole image. But I want to see the whole image on my computer too. I'm anal like that. Forgive me.

So how do I make the image fit on the whole page without reducing its size or quality?

I know it's possible. I've done it before in Calibre with the cover page. But I don't know how to do it when the image is on another page.

Practically all my eBooks have high res covers. Every time I download a new eBook I open it on my PC on Adobe Digital Editions (ADE) to verify if the whole cover fits on the page. Sometimes it doesn't. The image is too big and can only be partially seen. The simple way to fix this in Calibre's settings is by checking the "preserve aspect ratio" box and reconverting the ebook. By doing that and reopen the eBook in ADE, the cover image fits on the entire page with no loss of its quality or size.

Unfortunately as far as I know this setting change can only be done with images that are on the Cover Page.

I tried looking into Sigil's settings to see if I could make my image fit the whole page but I couldn't figure it out.

Do your know how to do it? On Calibre or Sigil, doesn't matter.

Thank you,

And sorry for being difficult and writing so much.

MZ

[Fizban]

Re the step 2b issue you should have just highlighted the image in the center pane and then hit the delete key. Sorry - I should have mentioned that step.

As far as your other problem....how familiar are you with HTML coding? Because the only way I know of to do it would require you to do that.

See in the middle at the top of Sigil how the book icon is highlighted in blue and next to it is a "<>" icon? That switches you over to code view.

Here's what I would do, though I'm giving you a few extra steps so hopefully you understand what you are doing rather than simply doing it by rote.

1) Switch to Code view.
2) In the left pane, open the Images tab and double-click on the image that you have showing on the praises.xhtml page.
3) Scroll to the bottom and take note of the dimensions of the image.
4) In the center pane of Sigil, note the tabs that show which files you have open and click on the titlepage.xhtml to switch to it.
5) Scroll down. You should see something like:

Code: Select all  <div>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="none" version="1.1" viewBox="0 0 457 751" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="751" width="457" xlink:href="../Images/cover.jpeg"/>
    </svg>
  </div>


6) Highlight and copy that entire section of code in titlepage.xhtml
7) Click in the center pane to switch to praises.xhtml.
Scroll down and most likely you'll see something simlar to:

Code: Select all<div>
  <img alt="Illustration" class="calibre1" src="../Images/00002.jpeg"/>
</div>


Basically - an img tag as opposed to an svg tag.
9) Below the /div tag, paste the text you copied from titlepage.xhtml so you should see something like:

Code: Select all<div>
  <img alt="Illustration" class="calibre1" src="../Images/00002.jpeg"/>
</div>
 <div>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="none" version="1.1" viewBox="0 0 457 751" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="751" width="457" xlink:href="../Images/cover.jpeg"/>
    </svg>
  </div>


10) Now change the name of the image in the image tag from cover.jpeg to 00002.jpeg (or whatever the image name is)
11) Correct the dimensions listed for the height and width in both the viewBox= location as well as within the image tag.
12) Delete the top div to /div
13) Switch back to the book view by clicking on the book icon and you should see the entire image, though it will likely show as distorted while viewing in Sigil.

If you've made any errors, Sigil will warn you that the html code is broken and ask if you want to fix it either automatically or manually. Unless you are truly familiar with coding, I'd choose the automatically, which should give you the same outcome as indicated in step 13.

[MaestroZanni]

Re the step 2b issue you should have just highlighted the image in the center pane and then hit the delete key. Sorry - I should have mentioned that step.

As far as your other problem....how familiar are you with HTML coding? Because the only way I know of to do it would require you to do that.

See in the middle at the top of Sigil how the book icon is highlighted in blue and next to it is a "<>" icon? That switches you over to code view.

Here's what I would do, though I'm giving you a few extra steps so hopefully you understand what you are doing rather than simply doing it by rote.

1) Switch to Code view.
2) In the left pane, open the Images tab and double-click on the image that you have showing on the praises.xhtml page.
3) Scroll to the bottom and take note of the dimensions of the image.
4) In the center pane of Sigil, note the tabs that show which files you have open and click on the titlepage.xhtml to switch to it.
5) Scroll down. You should see something like:

Code: Select all  <div>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="none" version="1.1" viewBox="0 0 457 751" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="751" width="457" xlink:href="../Images/cover.jpeg"/>
    </svg>
  </div>


6) Highlight and copy that entire section of code in titlepage.xhtml
7) Click in the center pane to switch to praises.xhtml.
Scroll down and most likely you'll see something simlar to:

Code: Select all<div>
  <img alt="Illustration" class="calibre1" src="../Images/00002.jpeg"/>
</div>


Basically - an img tag as opposed to an svg tag.
9) Below the /div tag, paste the text you copied from titlepage.xhtml so you should see something like:

Code: Select all<div>
  <img alt="Illustration" class="calibre1" src="../Images/00002.jpeg"/>
</div>
 <div>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="none" version="1.1" viewBox="0 0 457 751" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="751" width="457" xlink:href="../Images/cover.jpeg"/>
    </svg>
  </div>


10) Now change the name of the image in the image tag from cover.jpeg to 00002.jpeg (or whatever the image name is)
11) Correct the dimensions listed for the height and width in both the viewBox= location as well as within the image tag.
12) Delete the top div to /div
13) Switch back to the book view by clicking on the book icon and you should see the entire image, though it will likely show as distorted while viewing in Sigil.

If you've made any errors, Sigil will warn you that the html code is broken and ask if you want to fix it either automatically or manually. Unless you are truly familiar with coding, I'd choose the automatically, which should give you the same outcome as indicated in step 13.

I actually don't know anything about HTML or code in general. I find code tedious and almost impossible to understand which is why I almost never attempt to try it because the experience is frustrating and I lose my patience very quickly.

However I was able to follow your instructions but I got confused at Step #9 and am not sure if I did the right thing.

In Step #9 you seam to suggest that I should paste the text I copied but not so that it replaces the entire code on the praise.xhtml tab. If that is the case, I am not sure exactly how to do that in that, I don't understand which part of the code in the praise.xhtml tab I am suppose to keep and which parts I am support to replace.

So what I did instead is that I pasted the entire code from the titlepage.xhtml tab onto the praise.xhtml tab leaving nothing left of the code that was previously on the latter.

I followed Step #10 to to the letter by changing teh name of the image "cover.jepg" to "Praise.jpg" which is what my other image is called.

I didn't follow Step #11 or #13 in part because I didn't completely understand them.

However, it still seams to have worked!

Have a look in the screenshot below





Did I mess things up but haven't realized it yet? Please let me know.

In the mean time THANK YOU SO VERY MUCH FOR YOUR HELP!!!

You're a star!

MZ

[Fizban]

Looks good to me - and yes, copy/pasting the entire page's html instead of just a portion works just as well in this instance.

Have you tested in Calibre to see if it works for you? If so, then I think you are good to go.

And I was glad to help and am pleased things seem to have worked out for you. I just hope you are able to duplicate what you did for other books.