Images!

anamardoll · 07-04-2011, 01:49 PM

I'm really new to the Sigil/ePub/HTML stuff, so please bear with me if this is a stupid question -- my Googlefu failed me with this.

I'd like to add some images to an ePub. Each image would have its own "page", and I've figured out how to do that in Sigil, yay. But here's what I'm still missing and I'm not sure what to add to the code to get it:

1. It would be nice to have the image resize down to the reader screen size. Is there a way to tell the code to do this, or do I need to optimize the image for my 5" reader and then just let it have white space around it on the 7"? I have to think there is a way to resize, since my covers seem to do this already, but I don't know the code.

2. I would like the center of the image to always be at the center of the reader screen. I've noticed with the image I have now, that it's getting set to the upper left hand corner on my 7" reader, instead of in the center like it's supposed to be.

Here's what I currently have now:

Code:

<p class="calibre6" id="calibre_pb_5">
  <a class="calibre7" id="_Toc296770305"></a>
  <span class="sd-abs-pos">
    <img alt="DSC04389.JPG" class="calibre16" src="../Images/tmp0_html_m1bae5114.jpg" />
  </span>
  <br class="calibre5" />
  <br class="calibre5" />
</p>

Thank you in advance for the help.

shall1028 · 07-04-2011, 02:14 PM

How about something like the following:

Code:

<?xml version="1.0"?>
<!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>
  <title>Mystery of a Hansom Cab</title>
</head>

<body>
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="738" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 470 738" width="470">
      <image height="738" width="470" xlink:href="../Images/hansom-cab.jpg"></image>
    </svg>
  </div>
</body>
</html>

Note: the small x in "xMidYMid" is not a typo.

anamardoll · 07-04-2011, 02:22 PM

I'm sorry, I'm trying to learn so forgive me if this is a foolish thing to say...

But it seems like that code is specifying exact pixel sizes? This is, I think, what I am trying to get away from -- I'd like the image to resize appropriately based on the size of the reader screen.

shall1028 · 07-04-2011, 02:27 PM

Quote:

Originally Posted by anamardoll

But it seems like that code is specifying exact pixel sizes?

The pixel sizes are those of the image and not the screen. To be ridiculous: if you have an image 16384 x 16384 you specify those as the width and height then the image would be resized to fit the screen while keeping the aspect ratio.

anamardoll · 07-04-2011, 02:42 PM

Quote:

Originally Posted by shall1028

The pixel sizes are those of the image and not the screen. To be ridiculous: if you have an image 16384 x 16384 you specify those as the width and height then the image would be resized to fit the screen while keeping the aspect ratio.

When I put your SVG tag in, the image doesn't render anymore on either my device nor in the Calibre viewer...

shall1028 · 07-04-2011, 03:03 PM

You are using "../Images/tmp0_html_m1bae5114.jpg"?

How are you editing the ePub? If you like you can send me the ePub file as an attachment to a private message and I can have a go at it.

anamardoll · 07-04-2011, 03:06 PM

Looks like maybe it was as simple as stripping out all those classes. (That'll teach me to use a converter, but I still am not quite at the DIY phase of epub creation.) Taking out the classes (which were apparently overriding all my "width="100%"" attempts) did the trick on the resizing:

Code:

<body dir="ltr">
  <img alt="DSC04389.JPG" width="100%" name="Picture 1" src="../Images/tmp0_html_52416fa5.jpg" />
</body>

I would still welcome tips on how to make sure the image is centered. Right now, it's at the top of the page instead of the center. Thanks!!

shall1028 · 07-04-2011, 03:33 PM

There are posts elsewhere discussing vertical centering and they all come back to HTML considering a page infinitely high and therefore having no identifiable center. Kind of reminds me of the question: "How long is a piece of string?"

The SVG solution I posted does work for images (at least on my Kobo) although if the image is smaller than the screen it will scale it up the way the code stands.

I agree with stripping out uneeded classes and divs. Calibre should just use <p> for your basic paragraph but it seems to always want to use <p class="calibre3"> or some such nonsense. If every paragraph is class=calibre3 then it is redundant. Grump. Grump. Grump...

theducks · 07-04-2011, 03:50 PM

Quote:

Originally Posted by anamardoll

Looks like maybe it was as simple as stripping out all those classes. (That'll teach me to use a converter, but I still am not quite at the DIY phase of epub creation.) Taking out the classes (which were apparently overriding all my "width="100%"" attempts) did the trick on the resizing:

Code:

<body dir="ltr">
  <img alt="DSC04389.JPG" width="100%" name="Picture 1" src="../Images/tmp0_html_52416fa5.jpg" />
</body>

I would still welcome tips on how to make sure the image is centered. Right now, it's at the top of the page instead of the center. Thanks!!

Just Don't count on it

happening.

Each reader software does 'it's own thing'
Sigil/Calibre will center
ADE will not without lots of (code) gyrations.

Toss in a 'Conversion' to another format

anamardoll · 07-04-2011, 03:55 PM

Quote:

Originally Posted by anamardoll

Looks like maybe it was as simple as stripping out all those classes. (That'll teach me to use a converter, but I still am not quite at the DIY phase of epub creation.) Taking out the classes (which were apparently overriding all my "width="100%"" attempts) did the trick on the resizing:

Code:

<body dir="ltr">
  <img alt="DSC04389.JPG" width="100%" name="Picture 1" src="../Images/tmp0_html_52416fa5.jpg" />
</body>

I would still welcome tips on how to make sure the image is centered. Right now, it's at the top of the page instead of the center. Thanks!!

And, of course, I see that this will work great for portrait, but not at all for landscape. *sigh*

mrmikel · 07-05-2011, 08:27 AM

There may be something else consider if the images are all sizes. Width="100%" will blow up a small jpg into a bigger blurry one.

There may be a hit on performance if you put giant jpgs in and force a reader with limited compute power to shrink them.

Kinda depends on whether this is mostly for you or for others.

Jellby · 07-05-2011, 10:41 AM

It's probably better to use reasonably-sized images and "max-width: 100%" (and "max-height: 100%" if it works), to scale down images that don't fit the screen, but leave small images (or in big screens) untouched.

07-04-2011, 01:49 PM	#1
anamardoll Chasing Butterflies Posts: 3,129 Karma: 5058657 Join Date: Mar 2011 Location: American Southwest Device: Uses batteries.	Images! I'm really new to the Sigil/ePub/HTML stuff, so please bear with me if this is a stupid question -- my Googlefu failed me with this. I'd like to add some images to an ePub. Each image would have its own "page", and I've figured out how to do that in Sigil, yay. But here's what I'm still missing and I'm not sure what to add to the code to get it: 1. It would be nice to have the image resize down to the reader screen size. Is there a way to tell the code to do this, or do I need to optimize the image for my 5" reader and then just let it have white space around it on the 7"? I have to think there is a way to resize, since my covers seem to do this already, but I don't know the code. 2. I would like the center of the image to always be at the center of the reader screen. I've noticed with the image I have now, that it's getting set to the upper left hand corner on my 7" reader, instead of in the center like it's supposed to be. Here's what I currently have now: Code: <p class="calibre6" id="calibre_pb_5"> <a class="calibre7" id="_Toc296770305"></a> <span class="sd-abs-pos"> <img alt="DSC04389.JPG" class="calibre16" src="../Images/tmp0_html_m1bae5114.jpg" /> </span> <br class="calibre5" /> <br class="calibre5" /> </p> Thank you in advance for the help. __________________ Email me for a free copy. Visit my site for deconstructions and indie interviews. ~ Ana Mardoll

07-04-2011, 02:22 PM	#3
anamardoll Chasing Butterflies Posts: 3,129 Karma: 5058657 Join Date: Mar 2011 Location: American Southwest Device: Uses batteries.	I'm sorry, I'm trying to learn so forgive me if this is a foolish thing to say... But it seems like that code is specifying exact pixel sizes? This is, I think, what I am trying to get away from -- I'd like the image to resize appropriately based on the size of the reader screen. __________________ Email me for a free copy. Visit my site for deconstructions and indie interviews. ~ Ana Mardoll

07-04-2011, 03:06 PM	#7
anamardoll Chasing Butterflies Posts: 3,129 Karma: 5058657 Join Date: Mar 2011 Location: American Southwest Device: Uses batteries.	Looks like maybe it was as simple as stripping out all those classes. (That'll teach me to use a converter, but I still am not quite at the DIY phase of epub creation.) Taking out the classes (which were apparently overriding all my "width="100%"" attempts) did the trick on the resizing: Code: <body dir="ltr"> <img alt="DSC04389.JPG" width="100%" name="Picture 1" src="../Images/tmp0_html_52416fa5.jpg" /> </body> I would still welcome tips on how to make sure the image is centered. Right now, it's at the top of the page instead of the center. Thanks!! __________________ Email me for a free copy. Visit my site for deconstructions and indie interviews. ~ Ana Mardoll Last edited by anamardoll; 07-04-2011 at 03:10 PM.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
HTML + Images = MOBI without Images	SunLight	Amazon Kindle	5	08-25-2012 02:27 PM
Reuse of Images	crutledge	Sigil	3	05-30-2010 08:55 AM
Images	Hunterpub	Introduce Yourself	5	04-13-2009 07:26 PM
No images	anelson87	Sony Reader	1	01-03-2009 05:00 PM
images	junkml	Feedback	4	04-09-2007 05:32 PM

07-04-2011, 03:03 PM	#6
shall1028 Zealot Posts: 144 Karma: 73978 Join Date: Jun 2010 Device: Kobo	You are using "../Images/tmp0_html_m1bae5114.jpg"? How are you editing the ePub? If you like you can send me the ePub file as an attachment to a private message and I can have a go at it.

07-04-2011, 03:33 PM	#8
shall1028 Zealot Posts: 144 Karma: 73978 Join Date: Jun 2010 Device: Kobo	There are posts elsewhere discussing vertical centering and they all come back to HTML considering a page infinitely high and therefore having no identifiable center. Kind of reminds me of the question: "How long is a piece of string?" The SVG solution I posted does work for images (at least on my Kobo) although if the image is smaller than the screen it will scale it up the way the code stands. I agree with stripping out uneeded classes and divs. Calibre should just use <p> for your basic paragraph but it seems to always want to use <p class="calibre3"> or some such nonsense. If every paragraph is class=calibre3 then it is redundant. Grump. Grump. Grump...

07-05-2011, 08:27 AM	#11
mrmikel Book Twiddler Posts: 979 Karma: 1118807 Join Date: Apr 2008 Location: Central Oregon Coast Device: PRS-300	There may be something else consider if the images are all sizes. Width="100%" will blow up a small jpg into a bigger blurry one. There may be a hit on performance if you put giant jpgs in and force a reader with limited compute power to shrink them. Kinda depends on whether this is mostly for you or for others.

07-05-2011, 10:41 AM	#12
Jellby frumious Bandersnatch Posts: 5,147 Karma: 2505637 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon	It's probably better to use reasonably-sized images and "max-width: 100%" (and "max-height: 100%" if it works), to scale down images that don't fit the screen, but leave small images (or in big screens) untouched.


Advertisement Enthusiast