07-04-2011, 01:49 PM | #1 |
Chasing Butterflies
Posts: 3,132
Karma: 5074169
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> |
07-04-2011, 02:14 PM | #2 |
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> |
Advert | |
|
07-04-2011, 02:22 PM | #3 |
Chasing Butterflies
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. |
07-04-2011, 02:27 PM | #4 |
Nameless Being
|
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.
|
07-04-2011, 02:42 PM | #5 |
Chasing Butterflies
Posts: 3,132
Karma: 5074169
Join Date: Mar 2011
Location: American Southwest
Device: Uses batteries.
|
When I put your SVG tag in, the image doesn't render anymore on either my device nor in the Calibre viewer...
|
Advert | |
|
07-04-2011, 03:03 PM | #6 |
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. |
07-04-2011, 03:06 PM | #7 |
Chasing Butterflies
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> Last edited by anamardoll; 07-04-2011 at 03:10 PM. |
07-04-2011, 03:33 PM | #8 |
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... |
07-04-2011, 03:50 PM | #9 | |
Well trained by Cats
Posts: 29,778
Karma: 54830978
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Quote:
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 |
|
07-04-2011, 03:55 PM | #10 | |
Chasing Butterflies
Posts: 3,132
Karma: 5074169
Join Date: Mar 2011
Location: American Southwest
Device: Uses batteries.
|
Quote:
|
|
07-05-2011, 08:27 AM | #11 |
Color me gone
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. |
07-05-2011, 10:41 AM | #12 |
frumious Bandersnatch
Posts: 7,515
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.
|
Thread Tools | Search this Thread |
|
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 |