Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Software > Sigil

Notices

Reply
 
Thread Tools Search this Thread
Old 07-04-2011, 01:49 PM   #1
anamardoll
Chasing Butterflies
anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.
 
anamardoll's Avatar
 
Posts: 3,132
Karma: 5074169
Join Date: Mar 2011
Location: American Southwest
Device: Uses batteries.
Question 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.
anamardoll is offline   Reply With Quote
Old 07-04-2011, 02:14 PM   #2
shall1028
Nameless Being
 
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.
  Reply With Quote
Old 07-04-2011, 02:22 PM   #3
anamardoll
Chasing Butterflies
anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.
 
anamardoll's Avatar
 
Posts: 3,132
Karma: 5074169
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.
anamardoll is offline   Reply With Quote
Old 07-04-2011, 02:27 PM   #4
shall1028
Nameless Being
 
Quote:
Originally Posted by anamardoll View Post
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.
  Reply With Quote
Old 07-04-2011, 02:42 PM   #5
anamardoll
Chasing Butterflies
anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.
 
anamardoll's Avatar
 
Posts: 3,132
Karma: 5074169
Join Date: Mar 2011
Location: American Southwest
Device: Uses batteries.
Quote:
Originally Posted by shall1028 View Post
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...
anamardoll is offline   Reply With Quote
Old 07-04-2011, 03:03 PM   #6
shall1028
Nameless Being
 
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.
  Reply With Quote
Old 07-04-2011, 03:06 PM   #7
anamardoll
Chasing Butterflies
anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.
 
anamardoll's Avatar
 
Posts: 3,132
Karma: 5074169
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!!

Last edited by anamardoll; 07-04-2011 at 03:10 PM.
anamardoll is offline   Reply With Quote
Old 07-04-2011, 03:33 PM   #8
shall1028
Nameless Being
 
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...
  Reply With Quote
Old 07-04-2011, 03:50 PM   #9
theducks
Well trained by Cats
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 29,659
Karma: 54369090
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
Quote:
Originally Posted by anamardoll View Post
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
theducks is offline   Reply With Quote
Old 07-04-2011, 03:55 PM   #10
anamardoll
Chasing Butterflies
anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.anamardoll ought to be getting tired of karma fortunes by now.
 
anamardoll's Avatar
 
Posts: 3,132
Karma: 5074169
Join Date: Mar 2011
Location: American Southwest
Device: Uses batteries.
Quote:
Originally Posted by anamardoll View Post
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*
anamardoll is offline   Reply With Quote
Old 07-05-2011, 08:27 AM   #11
mrmikel
Color me gone
mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.
 
Posts: 2,089
Karma: 1445295
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.
mrmikel is offline   Reply With Quote
Old 07-05-2011, 10:41 AM   #12
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
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.
Jellby is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 12:07 AM.


MobileRead.com is a privately owned, operated and funded community.