multiple photos in .epub

Xabache · 06-24-2010, 08:53 PM

i am creating .epub files using ecub 1.08 on win xp

ive been making them from utf8 .txt files with a single cover image
i would like to continue to do the same but my problem is a want to add my back cover
both images are 480x768 .jpg though the front scales nicely the back should be as large as possible for readability and thus side by side looks bad

how can i add a second cover photo preferably at the top of the epub file in front of the index
my primary goal is the second photo and i can flex on the how's

so how can i add a second photo?

thanks =)

charleski · 06-25-2010, 05:12 AM

Create an html file containing the following and import it into your project.

Code:

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title></title>
</head>
<body>
  <div class="centerAligned">
    <img class="imgstyle" alt="" src="[path to your image file]" />
  </div>
</body>
</html>

Edit your css to add class selectors with the styling you want, e.g. 'centerAligned' is usually just {text-align: center} and 'imgstyle' will be something like {height: 100%}, though obviously you can alter these as needed and the selector names are arbitrary.

Move the new imported file up or down until it's in the right place, then compile your book.

Xabache · 06-26-2010, 02:36 AM

code:

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title></title>
</head>
<body>
<div class="centerAligned">
<img class="imgstyle" alt="" src="C:\Archive\Fragment\Ztorage\Pro\0pub\back.jpg " />
</div>
</body>
</html>

I open this with my web browser and it displays the photo i need
I build my book as normal with this html file in the folder and its builds as normal, with only the difference that there is a "chapter 1" now in my index and a blank page -- which it leads too -- between my index and the beginning of my text. this is i presume where the photo should appear, what have a missed? no photo appears. everything else looks fine.

we are close

charleski · 06-26-2010, 04:26 AM

Maybe you should upgrade to the latest version of eCub (1.11). I know that earlier versions had quite a few bugs.

Xabache · 06-26-2010, 11:01 AM

in ecub 1.11 i am clicking
new > enter book title, identifier, author > next > select project folder [epub is checked|mobi is not] > next > top radio switch checked > next > four stock setting checked, utf-8 selected > next > four files found back.jpg, body.txt, front.jpg, photoadder.html > next > use existing file but switch covers to front instead of back > finish > compile > open .epub with adobe digital editions 9.0.1 > looks perfect, but, no second picture just a blank space -- now at the end of the file -- and a new chapter in the index.

what am i doing wrong?
you say import does that mean what i am doing or is import something else?

goal: to add a second photo, a second cover page after the first cover page. any ideas?

charleski · 06-27-2010, 10:33 AM

You'll need to make sure the image is included in the epub. Have you imported that as well? The path given in the html needs to point to where the image is in the epub structure.

Xabache · 06-27-2010, 01:56 PM

<img class="imgstyle" alt="" src="C:\Archive\Fragment\Ztorage\Pro\0pub\back.jpg " />

to

<img class="imgstyle" alt="" src="back.jpg " />

did the trick i have a second photo in my .epub file. thanks
my problem is basically solved and thank you for your time... if i could nit pick the results though: what i now have is this order: cover photo, index, second photo and body. what i would like is: cover photo, second photo and body.

is there a way to eliminate the index?
and can i make this second photo scalable -- so it shrinks with the frame size -- like the primary cover photo

and [only] if not...
is there way to move the second photo before the index? and is there a way to eliminate the new "chapter 01" that the imported photo creates in the index with its presence in the file, without eliminating the photo itself.

perfection is always just one step away. =)

charleski · 06-27-2010, 04:22 PM

Quote:

Originally Posted by Xabache

is there a way to eliminate the index?

Go to Edit->Project Preferences..., Options tab and uncheck 'Generate TOC'

Quote:

and can i make this second photo scalable -- so it shrinks with the frame size -- like the primary cover photo

If a {height:100%; max-width: 100%} image style isn't doing the trick change the code to

Code:

  <svg width="100%" version="1.1" preserveAspectRatio="XMidYMid meet" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 [image width in pixels] [image height in pixels]" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image width="[image width in pixels]" height="[image height in pixels]" xlink:href="[path to image]"></image>
</svg>

Quote:

is there a way to eliminate the new "chapter 01" that the imported photo creates in the index

Select the entry in the Files tab and uncheck 'Show in TOC'.

Xabache · 06-27-2010, 05:05 PM

perfection =)

thanks again for your time

Xabache · 06-27-2010, 05:05 PM

perfection =)

thanks again for your time

06-24-2010, 08:53 PM	#1
Xabache Carbon Reserve Posts: 44 Karma: 10 Join Date: Jun 2010 Device: PC	multiple photos in .epub i am creating .epub files using ecub 1.08 on win xp ive been making them from utf8 .txt files with a single cover image i would like to continue to do the same but my problem is a want to add my back cover both images are 480x768 .jpg though the front scales nicely the back should be as large as possible for readability and thus side by side looks bad how can i add a second cover photo preferably at the top of the epub file in front of the index my primary goal is the second photo and i can flex on the how's so how can i add a second photo? thanks =)

06-25-2010, 05:12 AM	#2
charleski Wizard Posts: 1,196 Karma: 1281258 Join Date: Sep 2009 Device: PRS-505	Create an html file containing the following and import it into your project. Code: <?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> <title></title> </head> <body> <div class="centerAligned"> <img class="imgstyle" alt="" src="[path to your image file]" /> </div> </body> </html> Edit your css to add class selectors with the styling you want, e.g. 'centerAligned' is usually just {text-align: center} and 'imgstyle' will be something like {height: 100%}, though obviously you can alter these as needed and the selector names are arbitrary. Move the new imported file up or down until it's in the right place, then compile your book.

06-26-2010, 11:01 AM	#5
Xabache Carbon Reserve Posts: 44 Karma: 10 Join Date: Jun 2010 Device: PC	in ecub 1.11 i am clicking new > enter book title, identifier, author > next > select project folder [epub is checked\|mobi is not] > next > top radio switch checked > next > four stock setting checked, utf-8 selected > next > four files found back.jpg, body.txt, front.jpg, photoadder.html > next > use existing file but switch covers to front instead of back > finish > compile > open .epub with adobe digital editions 9.0.1 > looks perfect, but, no second picture just a blank space -- now at the end of the file -- and a new chapter in the index. what am i doing wrong? you say import does that mean what i am doing or is import something else? goal: to add a second photo, a second cover page after the first cover page. any ideas? Last edited by Xabache; 06-26-2010 at 11:06 AM.

06-27-2010, 01:56 PM	#7
Xabache Carbon Reserve Posts: 44 Karma: 10 Join Date: Jun 2010 Device: PC	<img class="imgstyle" alt="" src="C:\Archive\Fragment\Ztorage\Pro\0pub\back.jpg " /> to <img class="imgstyle" alt="" src="back.jpg " /> did the trick i have a second photo in my .epub file. thanks my problem is basically solved and thank you for your time... if i could nit pick the results though: what i now have is this order: cover photo, index, second photo and body. what i would like is: cover photo, second photo and body. is there a way to eliminate the index? and can i make this second photo scalable -- so it shrinks with the frame size -- like the primary cover photo and [only] if not... is there way to move the second photo before the index? and is there a way to eliminate the new "chapter 01" that the imported photo creates in the index with its presence in the file, without eliminating the photo itself. perfection is always just one step away. =) Last edited by Xabache; 06-27-2010 at 02:02 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Breaking up an Epub that contains multiple books	Pookeysgirl	Calibre	5	08-06-2010 10:18 AM
Bug: entries with multiple formats trigger multiple conversions	flinx1	Calibre	12	05-21-2010 06:23 AM
No photos to EPUB from RTF files	DVC	Calibre	30	04-08-2010 03:16 PM
Multiple html to epub conversion.	Barthelemy	ePub	4	03-30-2010 06:18 AM

06-26-2010, 02:36 AM	#3
Xabache Carbon Reserve Posts: 44 Karma: 10 Join Date: Jun 2010 Device: PC	code: <?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> <title></title> </head> <body> <div class="centerAligned"> <img class="imgstyle" alt="" src="C:\Archive\Fragment\Ztorage\Pro\0pub\back.jpg " /> </div> </body> </html> I open this with my web browser and it displays the photo i need I build my book as normal with this html file in the folder and its builds as normal, with only the difference that there is a "chapter 1" now in my index and a blank page -- which it leads too -- between my index and the beginning of my text. this is i presume where the photo should appear, what have a missed? no photo appears. everything else looks fine. we are close

06-26-2010, 04:26 AM	#4
charleski Wizard Posts: 1,196 Karma: 1281258 Join Date: Sep 2009 Device: PRS-505	Maybe you should upgrade to the latest version of eCub (1.11). I know that earlier versions had quite a few bugs.

06-27-2010, 10:33 AM	#6
charleski Wizard Posts: 1,196 Karma: 1281258 Join Date: Sep 2009 Device: PRS-505	You'll need to make sure the image is included in the epub. Have you imported that as well? The path given in the html needs to point to where the image is in the epub structure.

06-27-2010, 05:05 PM	#9
Xabache Carbon Reserve Posts: 44 Karma: 10 Join Date: Jun 2010 Device: PC	perfection =) thanks again for your time

Advert

Advert