View Full Version : multiple photos in .epub


Xabache
06-24-2010, 09: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, 06:12 AM
Create an html file containing the following and import it into your project.

<?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, 03: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 :chinscratch:

charleski
06-26-2010, 05: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, 12:01 PM
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, 11: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, 02: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, 05:22 PM
is there a way to eliminate the index?

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

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

<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>


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, 06:05 PM
perfection =)

thanks again for your time

Xabache
06-27-2010, 06:05 PM
perfection =)

thanks again for your time