MobileRead Forums - View Single Post

ni_c · 08-26-2015, 02:38 AM

Hey all,

im looking for a better url embedding solution for images with calibre's editing program

The default suggestions to use

<a href="www.example.com"><img src="example.jpg"></a>

but it doesnt work with ebooks (at least conversions to pdf)

but what ive found does are the following and couple variations

<a href="www.example.com">
<img src="example.jpg" ></a>

which shows the link on hover but also displays the floating banner anywhere it likes on the horizontal plane of the image height; And for some reason if the <a href="www.example.com">
<img src="example.jpg" align="left"></a>

and aligns what i wanto use in the first place to use its text wrapping behaviour, but what actually happens with above, is itll only open url links when clicking on the very bottom edge of the image, so isnt practical.

am hoping someone around here might know of fairly simple solutions, as im obviously not expert with html, tho dont mind experimenting.

So specifically want the floating url banner thing to always appear near the cursor like normal behavior, to have the whole image clickable, and still use align property with images that have embeded urls.

cheers

minor update, well i just looked at the epub being edited in the ebook viewer, and it doesnt even show floating url banners, so less an issue using that fwiw

Also while here, just realized image files can be decorated from the stylesheet.css individually with their alt names which is pretty cool, and logical... If anyones interested, heres the basic syntax needed:

Obviously the all generic terms just

img { ...code here... }

to customise individual images, first set a custom alt name, say 'AA' for example, then just write it as

img[alt="AA"] { ...code here... }

or to exclude that instead write it as

img:not([alt="AA"]) { ...code here... }

mutiple exception rules can be added using

img:not([alt="AA"]):not([alt="AB"]):not([alt="AC"]) { ...code here... }

and that appears the only way, it doesnt even accept targeting multiple items with the usual comma rule

08-26-2015, 02:38 AM	#1
ni_c Enthusiast Posts: 40 Karma: 10 Join Date: Jul 2015 Device: none	problem ebedding links in image files Hey all, im looking for a better url embedding solution for images with calibre's editing program The default suggestions to use <a href="www.example.com"><img src="example.jpg"></a> but it doesnt work with ebooks (at least conversions to pdf) but what ive found does are the following and couple variations <p class="calibre1"><a href="www.example.com"></p> <p class="calibre1"><img src="example.jpg" ></p></a> which shows the link on hover but also displays the floating banner anywhere it likes on the horizontal plane of the image height; And for some reason if the <p is replaced with <div or <em it still works). One way to stop the floating url banner appearing and jumping everywhere is to just add the align property like <p class="calibre1"><a href="www.example.com"></p> <p class="calibre1"><img src="example.jpg" align="left"></p></a> and aligns what i wanto use in the first place to use its text wrapping behaviour, but what actually happens with above, is itll only open url links when clicking on the very bottom edge of the image, so isnt practical. am hoping someone around here might know of fairly simple solutions, as im obviously not expert with html, tho dont mind experimenting. So specifically want the floating url banner thing to always appear near the cursor like normal behavior, to have the whole image clickable, and still use align property with images that have embeded urls. cheers minor update, well i just looked at the epub being edited in the ebook viewer, and it doesnt even show floating url banners, so less an issue using that fwiw Also while here, just realized image files can be decorated from the stylesheet.css individually with their alt names which is pretty cool, and logical... If anyones interested, heres the basic syntax needed: Obviously the all generic terms just img { ...code here... } to customise individual images, first set a custom alt name, say 'AA' for example, then just write it as img[alt="AA"] { ...code here... } or to exclude that instead write it as img:not([alt="AA"]) { ...code here... } mutiple exception rules can be added using img:not([alt="AA"]):not([alt="AB"]):not([alt="AC"]) { ...code here... } and that appears the only way, it doesnt even accept targeting multiple items with the usual comma rule Last edited by ni_c; 08-27-2015 at 05:11 AM.