03-06-2017, 12:54 PM | #1 |
Head of lunatic asylum
Posts: 349
Karma: 77620
Join Date: Jun 2012
Location: UTC +1
Device: Tolino Vision 3HD
|
WANTED: Correct image integration via <img>
I am looking for an easy recipe to embed images (covers & others) into ePubs. It should be Aspect Ratio correct & stabil. Code:
<div> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 500 751" preserveAspectRatio="none"> <image width="500" height="751" xlink:href="cover.jpeg"/> </svg> </div> After much testing I create a very simple code: (looks too simple ). Works generally fine, but not 100% - and I can't find out why! Code:
<body> <img src="cover.jpeg" max-width="100%" height="100%"/> </body> Code:
body { font-family: Arial, sans-serif; display: block; margin: 0; } Spoiler:
|
03-06-2017, 09:29 PM | #2 |
A Hairy Wizard
Posts: 3,094
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
This is a question that is brought up quite often here and you will find many different answers depending on the target device. I would recommend searching both the workshop and the epub threads to see all the pro's and con's for each technique.
My personal favorite is using the svg wrapper code that you mentioned. It does take a little bit of study to understand, but it isn't too bad. The svg wrapper will allow you to properly scale an image to fill the whole screen while keeping the proper aspect ratio. The height portion of <img> is not reliable - so I only use <img> for inserting images of a specific size onto a page. Cheers, |
Advert | |
|
03-07-2017, 04:02 AM | #3 |
Obsessively Dedicated...
Posts: 3,200
Karma: 34977896
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
|
@ Dion --- now, BE CAREFUL with that phrase "fill the screen". People say that all the time, but they never stop to explain --- your image will fill the screen in the *longest dimension*. It will NOT fill the screen all the way around, to all four edges, UNLESS the image just *happens* to be the exact same aspect ratio as the device screen. Otherwise, you will have, for example, white borders along the sides if the image is tall and narrow.
Or, UNLESS you don't "preserveAspectRatio", and then the image distorts. Novice bookmakers can get confused when they see "fill the screen", and wonder why their images have white borders along the sides, or along the top & bottom. (I throw this out there in remembrance of my own new bafflements and confusions) @chaot --- your svg code is missing the setting that will preserve aspect ratio, and keep your image from getting stretched or squashed. If you use "None", the image will distort to match the screen aspect ratio. Try adding it like this (by the way, Sigil will always *alphabetize* the tags, which I hate, I want them in logical order, not alphabetic. But they work either way.) Spoiler:
If you use "preserveAspectRatio="xMidYMid meet", the image will never get distorted, no matter the size of the device screen. But you will, of course, get borders along the edges that don't meet the screen edge. Last edited by GrannyGrump; 03-07-2017 at 05:24 AM. |
03-07-2017, 12:22 PM | #4 | ||
Head of lunatic asylum
Posts: 349
Karma: 77620
Join Date: Jun 2012
Location: UTC +1
Device: Tolino Vision 3HD
|
Quote:
A word to your recommendation to look around. I know you mean this amicably and I can make you sure: It isn't like I wake up in the morning with an question and think: OK, let's ask in mobileread. I grappled with this image issue already since weeks - I looked obviously on the wrong places. Of course I recognized preserveAspectRatio="none" in the malfunctional code and that it should say something else than none. But please keep in mind: Knowing nothing (or not enough) it's difficult to decide, what is important to look for. Quote:
As quick I felt confident I start to change that <img>issue everywhere. xlink:href="cover.jpg" or xlink:href="../Images/cover.jpg" depends, how the cover-image is named (with path or without). Is that correct??? My images come normaly just as cover.jpg, or after conversion, as cover.png. Last edited by chaot; 03-07-2017 at 01:43 PM. Reason: that issue → that <img>issue, add: for covers |
||
03-08-2017, 03:16 AM | #5 | ||
Obsessively Dedicated...
Posts: 3,200
Karma: 34977896
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
|
Quote:
For example, you should be able to make your view port any multiple of 800x600. But it is simplest to just match the image dimensions. Quote:
The image without path WILL display in Calibre reader, which suggests it might be ok for QT-based reading apps, but it would be best to always include the path in your href definition. A long time back, Jellby gave me this link for a great tutorial on SVG links at the W3.org wiki : https://www.w3.org/wiki/SVG_Links. Well worth your time to step through the tutorial. And the rest of their wiki, too. The MobileRead wiki has information about SVG also, which can get you started. |
||
Advert | |
|
03-08-2017, 11:50 AM | #6 |
Head of lunatic asylum
Posts: 349
Karma: 77620
Join Date: Jun 2012
Location: UTC +1
Device: Tolino Vision 3HD
|
I must admit that my apathy against long-winding and incomprehensible code structures (I count <div><svg ... </div>: 241 characters (without empty spaces)) for to right place a cover ... wow!! ... is partly the reason for why I got hung up to find a way of integration via <img>.
Structures like that remember me to the modes from the 50s (of the 18th century) - that time we phrase 3 sentences just to say: That's sh..! cover.jpg without path works fine in my ereader. But to make that issue future-proof, I agree to change. So I add Code:
OEBPS/Images/cover.jpg
But adding Code:
../Images/cover.jpg
Thanks for the recommended reads: I'm tired of experiments without positive results. Too time consuming! |
03-08-2017, 12:09 PM | #7 |
Resident Curmudgeon
Posts: 73,956
Karma: 128903250
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
When you use SVG, you have to specify the dimensions using the actually height and width of the images. ADE has a bug where if you don't do it like that, the aspect ratio will be distorted.
I've seen plenty of cases where 1600x1200 or 800x600 is used and with ADE, they don't work. But using the actual pixels of the image will work in all cases. |
03-08-2017, 01:59 PM | #8 | |
Wizard
Posts: 2,297
Karma: 12126329
Join Date: Jul 2012
Device: Kobo Forma, Nook
|
Quote:
For images in the middle of your book, RbnJrg recently told me about this Sigil Plugin, InsertImageSVG: https://www.mobileread.com/forums/sh...d.php?t=283333 It makes creating the typical SVG wrapper so much faster/easier. Last edited by Tex2002ans; 03-08-2017 at 02:05 PM. |
|
03-08-2017, 02:09 PM | #9 | |
null operator (he/him)
Posts: 20,565
Karma: 26954694
Join Date: Mar 2012
Location: Sydney Australia
Device: none
|
Quote:
Don't worry, many English speakers also misuse them. Also, long-winded is the more common expression, but I quite like long winding, it conveys the same figurative sense, and it rhymes with much binding . . . BR |
|
03-12-2017, 05:44 PM | #10 | |
A Hairy Wizard
Posts: 3,094
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Quote:
Thanks for the clarification - you are, of course, correct. To fix the white border - sorta - I add a "background-color:black" to the <body>. Most covers look better with a black border than a white border but you can change that color to best compliment the cover. In those cases I import the image into photoshop where I can use the eyedropper to get the RGB values of the best color and then use "background-color:RGB(x,x,x)". Of course, this all relies on the device honoring the inline style and supporting color... |
|
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Aura Kobo Aura image (.img) | Sinseman | Kobo Reader | 49 | 01-29-2022 07:02 AM |
correct way to set background image to pdf's | ni_c | Editor | 0 | 09-08-2015 02:17 AM |
First Contact/Alien Integration wanted | artifact | Reading Recommendations | 25 | 08-10-2014 03:08 AM |
[SOLVED] Aligning text inside a <p> and an image <img> vertically (iBooks) | AlPe | ePub | 1 | 10-20-2012 12:00 PM |
"Insert Image" renames .jpg's incorrectly... but shows the correct image! | megacoupe | Sigil | 4 | 03-06-2011 08:13 PM |