Sigil's "Tools > Add Cover..." not auto resizing

PhilippeBruno · 10-04-2023, 05:51 AM

I am trying to add a cover to my EPUB using Tools > Add Cover... in Sigil 2.0.

My cover image is 1000 x 1600 pixels.

It does add a cover.xhtml file to my EPUB and all seems good, but when I open my EPUB in Thorium (an EPUB viewer), the cover image does not resize nicely within the window (on my smaller laptop screen... on my larger external 4K monitor, the problem goes unnoticed) and I have to scroll up and down to see the entire image. Other EPUBs have their cover automatically resize to the Thorium window and do not require me to scroll up and down to see the entire image.

The code inserted by Sigil looks like this:

Code:

...
<body>
  <div style="text-align: center; padding: 0pt; margin: 0pt;">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1000 1600" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image width="1000" height="1600" xlink:href="etc/Cover.jpg"/>
    </svg>
  </div>
</body>
...

How can I modify the above code to make the cover page automatically resize to the Thorium's window?

KevinH · 10-04-2023, 09:27 AM

That code was generated for epub2. For epub3 Sigil now uses 100vh for height and 100vw for width instead of 100% for each. Thorium is a full featured epub3 reader but should read epub2 as well. Try making that change.

PhilippeBruno · 10-04-2023, 09:37 AM

Thanks for your reply. It... almost... works. Actually, it does resize as expected, but there is a peculiar problem... Some sort of dimensionless page (like some 0 width page) is appended after the cover page and the Thorium scroll bar moves to the left, then to the right again as I keep flipping through the pages...

PhilippeBruno · 10-04-2023, 09:41 AM

Quote:

Originally Posted by KevinH

That code was generated for epub2. For epub3 Sigil now uses 100vh for height and 100vw for width instead of 100% for each. Thorium is a full featured epub3 reader but should read epub2 as well. Try making that change.

Or actually, is there an updated plugin, config file, etc. that I should add to my Sigil install to bring the "Add Cover..." option to epub3 standards?

KevinH · 10-04-2023, 09:45 AM

It already is. Sigil looks at what you chose for epub type for your epub, then uses the appropriate code. What epub type are you editing or creating?

KevinH · 10-04-2023, 09:46 AM

Quote:

Originally Posted by PhilippeBruno

Or actually, is there an updated plugin, config file, etc. that I should add to my Sigil install to bring the "Add Cover..." option to epub3 standards?

Quote:

but there is a peculiar problem... Some sort of dimensionless page (like some 0 width page) is appended after the cover page and the Thorium scroll bar moves to the left, then to the right again as I keep flipping through the pages...

So change it to 99vh or 98vh and or 99vw or 98vw.

KevinH · 10-04-2023, 09:54 AM

See this related earlier thread.

https://www.mobileread.com/forums/sh...d.php?t=354137

Note, there are bugs in ADE and now Thorium about using 100% that means a bit a trial and error will be needed to get this to work on most platforms.

Another possible solution is to leave the 100% for height and width but instead add height="98vh" to the parent div style so that it will constrain the vertical height of the svg element to fit on one page vertically.

And ..,
If you are editing an epub2, and want to update it to epub3, you can use the ePub3itizer plugin in Sigil.

PhilippeBruno · 10-04-2023, 09:58 AM

Quote:

Originally Posted by KevinH

So change it to 99vh or 98vh and or 99vw or 98vw.

95vh did the trick! Thanks a lot.

PhilippeBruno · 10-04-2023, 10:00 AM

Quote:

Originally Posted by KevinH

See this related earlier thread.

And ..,
If you are editing an epub2, and want to update it to epub3, you can use the ePub3itizer plugin in Sigil.

Doing this right now... Thanks again for that hint!

KevinH · 10-04-2023, 10:12 AM

And once you have a cover page that works on all the reading platforms you want, remember to save just that file using Sigil's BookBrowser and you can use it to create your own cover template that Sigil can then use in place of its own.

To create the template start with your saved version and use placeholders to replace image specific items (see below) to create a cover-template2.xhtml and/or cover-template3.xhtml and placie it into your Sigil Preferences folder. It will be used next time.

To illustrate here is the epub3 default cover source code that shows the placeholders and how they are used:

Code:

const QString HTML5_COVER_SOURCE =
    "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\" ?>\n"
    "<!DOCTYPE html>\n\n"
    "<html xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:epub=\"http://www.idpf.org/2007/ops\">\n"
    "<head>\n"
    "  <title>Cover</title>\n"
    "</head>\n"
    ""
    "<body>\n"
    "  <div style=\"height: 100vh; text-align: center; padding: 0pt; margin: 0pt;\">\n"
    "    <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"100%\" preserveAspectRatio=\"xMidYMid meet\" version=\"1.1\" viewBox=\"0 0 SGC_IMAGE_WIDTH SGC_IMAGE_HEIGHT\" width=\"100%\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n"
    "      <image width=\"SGC_IMAGE_WIDTH\" height=\"SGC_IMAGE_HEIGHT\" xlink:href=\"SGC_IMAGE_FILENAME\"/>\n"
    "    </svg>\n"
    "  </div>\n"
    "</body>\n"
    "</html>\n";

Sigil will automatically fill these values for you (things that change for every image).

SGC_IMAGE_WIDTH
SGC_IMAGE_HEIGHT
SGC_IMAGE_FILENAME

In your case you would need to tweak the height: 100vh to 95vh in the div's inline style.

Hope this helps.

10-04-2023, 05:51 AM	#1
PhilippeBruno Member Posts: 14 Karma: 10 Join Date: May 2017 Device: Android tablet	Sigil's "Tools > Add Cover..." not auto resizing I am trying to add a cover to my EPUB using Tools > Add Cover... in Sigil 2.0. My cover image is 1000 x 1600 pixels. It does add a cover.xhtml file to my EPUB and all seems good, but when I open my EPUB in Thorium (an EPUB viewer), the cover image does not resize nicely within the window (on my smaller laptop screen... on my larger external 4K monitor, the problem goes unnoticed) and I have to scroll up and down to see the entire image. Other EPUBs have their cover automatically resize to the Thorium window and do not require me to scroll up and down to see the entire image. The code inserted by Sigil looks like this: Code: ... <body> <div style="text-align: center; padding: 0pt; margin: 0pt;"> <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1000 1600" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"> <image width="1000" height="1600" xlink:href="etc/Cover.jpg"/> </svg> </div> </body> ... How can I modify the above code to make the cover page automatically resize to the Thorium's window?

10-04-2023, 09:54 AM	#7
KevinH Sigil Developer Posts: 8,160 Karma: 5450818 Join Date: Nov 2009 Device: many	See this related earlier thread. https://www.mobileread.com/forums/sh...d.php?t=354137 Note, there are bugs in ADE and now Thorium about using 100% that means a bit a trial and error will be needed to get this to work on most platforms. Another possible solution is to leave the 100% for height and width but instead add height="98vh" to the parent div style so that it will constrain the vertical height of the svg element to fit on one page vertically. And .., If you are editing an epub2, and want to update it to epub3, you can use the ePub3itizer plugin in Sigil. Last edited by KevinH; 10-04-2023 at 09:56 AM.

10-04-2023, 10:12 AM	#10
KevinH Sigil Developer Posts: 8,160 Karma: 5450818 Join Date: Nov 2009 Device: many	And once you have a cover page that works on all the reading platforms you want, remember to save just that file using Sigil's BookBrowser and you can use it to create your own cover template that Sigil can then use in place of its own. To create the template start with your saved version and use placeholders to replace image specific items (see below) to create a cover-template2.xhtml and/or cover-template3.xhtml and placie it into your Sigil Preferences folder. It will be used next time. To illustrate here is the epub3 default cover source code that shows the placeholders and how they are used: Code: const QString HTML5_COVER_SOURCE = "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\" ?>\n" "<!DOCTYPE html>\n\n" "<html xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:epub=\"http://www.idpf.org/2007/ops\">\n" "<head>\n" " <title>Cover</title>\n" "</head>\n" "" "<body>\n" " <div style=\"height: 100vh; text-align: center; padding: 0pt; margin: 0pt;\">\n" " <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"100%\" preserveAspectRatio=\"xMidYMid meet\" version=\"1.1\" viewBox=\"0 0 SGC_IMAGE_WIDTH SGC_IMAGE_HEIGHT\" width=\"100%\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n" " <image width=\"SGC_IMAGE_WIDTH\" height=\"SGC_IMAGE_HEIGHT\" xlink:href=\"SGC_IMAGE_FILENAME\"/>\n" " </svg>\n" " </div>\n" "</body>\n" "</html>\n"; Sigil will automatically fill these values for you (things that change for every image). SGC_IMAGE_WIDTH SGC_IMAGE_HEIGHT SGC_IMAGE_FILENAME In your case you would need to tweak the height: 100vh to 95vh in the div's inline style. Hope this helps. Last edited by KevinH; 10-04-2023 at 10:28 AM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Indexing in SIGIL - How to add "See also..."	roland1	Sigil	13	12-17-2021 01:21 PM
"Add cover" feature request	Phssthpok	Editor	4	11-24-2017 12:13 PM
How do I add image files to my library with thumbnails in the "cover" view?	woodr2011	Library Management	6	09-25-2015 07:56 PM
a cover "page" in html for Sigil	Notjohn	Sigil	9	07-26-2013 07:39 PM
Add cover and "shelves" in recipe?	ehead	Recipes	7	06-28-2013 11:32 PM

10-04-2023, 09:27 AM	#2
KevinH Sigil Developer Posts: 8,160 Karma: 5450818 Join Date: Nov 2009 Device: many	That code was generated for epub2. For epub3 Sigil now uses 100vh for height and 100vw for width instead of 100% for each. Thorium is a full featured epub3 reader but should read epub2 as well. Try making that change.

10-04-2023, 09:37 AM	#3
PhilippeBruno Member Posts: 14 Karma: 10 Join Date: May 2017 Device: Android tablet	Thanks for your reply. It... almost... works. Actually, it does resize as expected, but there is a peculiar problem... Some sort of dimensionless page (like some 0 width page) is appended after the cover page and the Thorium scroll bar moves to the left, then to the right again as I keep flipping through the pages...

10-04-2023, 09:45 AM	#5
KevinH Sigil Developer Posts: 8,160 Karma: 5450818 Join Date: Nov 2009 Device: many	It already is. Sigil looks at what you chose for epub type for your epub, then uses the appropriate code. What epub type are you editing or creating?