Author Topic: image loss with amazon upload in html  (Read 133 times)  

Offline reilyg

  • Status: Madeleine L'Engle
  • **
  • Posts: 59
    • View Profile
    • Reily Garrett
image loss with amazon upload in html
« on: April 16, 2018, 09:27:52 AM »
Hi Folks,
I'm hoping someone can help with a specific issue. I'm trying to upload a file to Amazon and keep my text wrap to the side of my images. After upload, the previewer always shows them "inline".  I tried uploading as web page filtered to keep the text beside the images, but the images disappear altogether.
Anyone with ideas?  I'd really appreciate it.  I'm trying to wrap the text to the right of my images - not above and below.
Thanks in advance

Reily Garrett | website | blog | facebook

Offline Loosecannon

  • Status: Lewis Carroll
  • **
  • Posts: 180
  • Gender: Male
  • Western frontier
    • View Profile
    • Modus Operandi Press
Re: image loss with amazon upload in html
« Reply #1 on: April 16, 2018, 08:54:50 PM »
Wrapping text around an image (i.e. left/right float) is definitely do-able, but needs to be properly coded in the html so KindleGen (the KDP conversion program) recognizes it. Two other things to consider as the online previewer is old/not fully up to date generally and its handling of special html/CSS is known to be buggy and inaccurate compared to a Kindle device. Two: Text wrap is not supported on many older B&W Kindles, so those will show inline images no matter what you code. (but the newest line of Paperwhite model do support it).

Sounds like you are using Word, and their html output is inferior and full of tons of crap compared to something like LibreOffice. I use the later with the Latex writer2xhtml plgin to get a clean EPUB export, then use sigil to make final corrections/tweaks/drop caps/metadata addition. If it is more code than the below example it is too cluttered, I'd bet.

For wrapping text, here is what the html should look like, just as an example:
Code: [Select]
<p class="Body" dir="ltr"><img alt="Mypicture" class="frameGraphics" id="graphic6" src="../Images/image006.jpg" style="margin-left:0;margin-right:9.6px;width:20%;float:left" /><span style="font-family:Baskerville;font-style:normal">Here is the text I am wrapping around the nice picture, blah blah...</span></p>
Hope that helps!