Cover and pictures in e-pub

Vantage1 · 05-05-2019, 07:06 AM

Hello

I'm rather new as a user of Calibre.

I wonder if anyone can help me with the following issues:

- how can one get pictures in a word doc, or ODT, rtf, converted in e-pub? I only got a map, and text of course, from a ODT in e-pub after converting, no pictures however;

- I downloaded a book cover and inserted/converted it in the e-pub as cover; but also the map in the epub was replaced by this cover; is this a bug? Or how can i prevent this?

Thanks for the help.

Turtle91 · 05-05-2019, 11:37 AM

You need to save the image as a file, then add it to the epub. Finally you will need to create a link in your epub to the correct image file. I would recommend using the best resolution image you can find...usually downloading will be better than an embedded image.

In Word you can right click on the image and "Save As Picture". eg. "MyPic.jpg"

Then in your html:

Code:

<div><img alt="" src="../Images/MyPic.jpg" /></div>
/* make sure you have the correct path (inside the epub) to your image file */

or

Code:

<div><img alt="" src="../Images/cover.jpg" /></div>
<div><img alt="" src="../Images/map.jpg" /></div>

or even more advanced - you can wrap it in an SVG container for a full page image like a map or cover:

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Cover</title>
</head>

<body style="margin:0; padding:0; text-align:center; background-color:black">
  <h1 style="display:none" title="Cover"/>

  <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 1066 1600"
           xmlns:xlink="http://www.w3.org/1999/xlink">
       <image width="1066" height="1600" xlink:href="../Images/cover.jpg"/>
    </svg>
  </div>
</body>
</html>

Vantage1 · 05-05-2019, 12:28 PM

OK, thanks, Turtle91!

lumpynose · 05-05-2019, 02:10 PM

What are the advantages to wrapping the image in an SVG container?

Turtle91 · 05-05-2019, 02:31 PM

On most devices it allows for an image to expand to the full size of the display screen while maintaining it's aspect ratio. By setting the image size(WxH) and the viewbox(WxH) to the same numbers, you can then use other functions like height/width at 100% for max screen usage, or 50% for half the screen; preserveAspectRatio="xMidYMid meet" will center the image vertically and horizontally.

I like using it for images that take up a whole page, like maps and covers. If I want an inset image then I'll use a <div class="yadda"><img alt="" src="../Images/example.jpg" /></div> option. That way I can style it as desired for size, positioning, text wrapping, etc.

lumpynose · 05-05-2019, 02:36 PM

Thanks, I never would have guessed. I thought svg was just for drawing things. How did you learn this?

Turtle91 · 05-05-2019, 07:05 PM

I think it was here on MR. There have been several threads that talk about it.

Vantage1 · 05-09-2019, 01:47 PM

I still wonder why the book cover also replaced a map in the book while converting to e-pub (my second question)

Turtle91 · 05-09-2019, 01:52 PM

?? not sure. Perhaps there was something wrong with the file name or path of the map and Sigil reverted to the only good path it had???

theducks · 05-15-2019, 02:08 PM

Quote:

Originally Posted by Vantage1

I still wonder why the book cover also replaced a map in the book while converting to e-pub (my second question)

A book cover has flags 1 for the page (must be separate) and 1 for the Image file
Sigils Add cover will do this for you
If something else replaced a cover (BTW page file or just the image on the page?)
When thing are not properly defind, you end up with either Duplicate (looking) covers (there can only be one 'cover', any other are just pages)
Many semantics (the flags i was talking about) can only be applied Once and many files can also only have ONE applied to it (another good reason foe splitting files)

05-05-2019, 07:06 AM	#1
Vantage1 Junior Member Posts: 3 Karma: 10 Join Date: May 2019 Device: Sony e-reader	Cover and pictures in e-pub Hello I'm rather new as a user of Calibre. I wonder if anyone can help me with the following issues: - how can one get pictures in a word doc, or ODT, rtf, converted in e-pub? I only got a map, and text of course, from a ODT in e-pub after converting, no pictures however; - I downloaded a book cover and inserted/converted it in the e-pub as cover; but also the map in the epub was replaced by this cover; is this a bug? Or how can i prevent this? Thanks for the help.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
EPUB Cover pictures	poudigne	Calibre	3	03-05-2014 12:57 PM
Book cover pictures.	mahal48	Sigil	9	08-20-2013 11:18 AM
K4 Mac or PC K4PC cover Pictures	Gardenman	Amazon Kindle	0	03-06-2011 07:59 PM
PRS-300 Pictures: Pink 300 + Sony red cover + custom cover	h0bbes	Sony Reader	5	01-04-2010 12:41 PM
Cover pictures in Mobipocket	crewpsu	Reading and Management	5	03-07-2008 10:28 AM

05-05-2019, 12:28 PM	#3
Vantage1 Junior Member Posts: 3 Karma: 10 Join Date: May 2019 Device: Sony e-reader	OK, thanks, Turtle91!

05-05-2019, 02:10 PM	#4
lumpynose Wizard Posts: 1,086 Karma: 6719822 Join Date: Jul 2012 Device: Palm Pilot M105	What are the advantages to wrapping the image in an SVG container?

05-05-2019, 02:31 PM	#5
Turtle91 A Hairy Wizard Posts: 3,349 Karma: 20171571 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	On most devices it allows for an image to expand to the full size of the display screen while maintaining it's aspect ratio. By setting the image size(WxH) and the viewbox(WxH) to the same numbers, you can then use other functions like height/width at 100% for max screen usage, or 50% for half the screen; preserveAspectRatio="xMidYMid meet" will center the image vertically and horizontally. I like using it for images that take up a whole page, like maps and covers. If I want an inset image then I'll use a <div class="yadda"><img alt="" src="../Images/example.jpg" /></div> option. That way I can style it as desired for size, positioning, text wrapping, etc.

05-05-2019, 02:36 PM	#6
lumpynose Wizard Posts: 1,086 Karma: 6719822 Join Date: Jul 2012 Device: Palm Pilot M105	Thanks, I never would have guessed. I thought svg was just for drawing things. How did you learn this?

05-05-2019, 07:05 PM	#7
Turtle91 A Hairy Wizard Posts: 3,349 Karma: 20171571 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	I think it was here on MR. There have been several threads that talk about it.

05-09-2019, 01:47 PM	#8
Vantage1 Junior Member Posts: 3 Karma: 10 Join Date: May 2019 Device: Sony e-reader	I still wonder why the book cover also replaced a map in the book while converting to e-pub (my second question)

05-09-2019, 01:52 PM	#9
Turtle91 A Hairy Wizard Posts: 3,349 Karma: 20171571 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	?? not sure. Perhaps there was something wrong with the file name or path of the map and Sigil reverted to the only good path it had???

Advert

Advert