View Single Post
Old 06-28-2023, 04:20 PM   #6
DNSB
Bibliophagist
DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.
 
DNSB's Avatar
 
Posts: 46,380
Karma: 169098492
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos
I use Sigil for most epub editing tasks but the calibre editor will work much the same.

Basically, copy and paste everything from the "<style type="text/css">" to the "/div>" which are bolded in the code box. Locate the image size, modify the SVG wrapper with the image size and image file name. I've attached a sample of a page displaying a single image. The <h3 class="hidden">Chapter Title</h3> allows a title for the page in the ToC without having the text visible. You can leave it out if you are not using a ToC to jump between chapters.

Since you mention the images are the same size, you can modify one file and then use that as the source to copy/paste leaving only the image file name needing to be changed.

Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
  <meta charset="utf-8"/>
  <title>Cardinal PNG</title>
  <link href="../Styles/stylesheet.css" rel="stylesheet" type="text/css"/>
  <style type="text/css">
@page {padding: 0; margin:0}
            body { text-align: center; padding:0; margin: 0; }
</style>
</head>

<body>
  <h3 class="hidden">Cardinal PNG</h3>

  <div>
    <svg height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1500 2000" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="2000" width="1500" xlink:href="../Images/cardinal.png"/></svg>
  </div>
</body>
</html>
CSS stylesheet:

Code:
body {
  display: block;
  font-size: 1em;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  widows: 1;
  orphans: 1;
}

.hidden {
  display: none;
}

Last edited by DNSB; 06-28-2023 at 04:23 PM.
DNSB is online now   Reply With Quote