org-roam / org-roam-server

A Web Application to Visualize the Org-Roam Database
MIT License
639 stars 51 forks source link

HTML attributes being placed incorrectly in inline images #46

Open prasoon2211 opened 4 years ago

prasoon2211 commented 4 years ago

Hi, When I add an HTML attribute to an inline image, it gets added to the surrounding <p></p> element: for example:<p width="400px"><image ..... /></p>

However, if format my image link in a way that breaks the regexp that filters for the image path and manually export my org file to HTML, then the width attribute gets applied properly: to the <image/> element itself. This however breaks the image preview in org-roam-server

My elisp is pretty poor so I couldn't understand how to fix this but overall, we just need make sure that the enclosing paragraph element doesn't get inserted

goktug97 commented 4 years ago

Can you give a full example from your org file

prasoon2211 commented 4 years ago

Hi, sorry for the delayed reply. Here's a gist with an org file and generated HTML: https://gist.github.com/prasoon2211/3aa3c031142cb27b51a691768ac0500f#file-test-html-L111

Relevant org snippet and generated HTML is as follows: Org

- Straightforward in 2-d case: Make a parallelogram and then, compute area.
  #+attr_html: :width 500px
  [[file:images/20200621200530-determinants_measure_how_much_a_linear_map_expands_shrinks_a_unit_of_signed_volume/gCaz32020-06-25_22-54-41_.png]]

HTML

<p width="500px">
<img src=ea8a832fcec3f7bcf214384da9c2274cc5fb67da4accedae883aecf8d5beeb78 alt=/Users/prasoon.shukla/Documents/org/zettelkasten/images/20200621200530-determinants_measure_how_much_a_linear_map_expands_shrinks_a_unit_of_signed_volume/gCaz32020-06-25_22-54-41_.png />
</p></li>

As you can see, the width attribute is being applied to an surrounding <p> element. If I however change the way in which I include images (by removing the file: part of the link, replacing it with [[./images/.....]]), the generated HTML does correctly apply the width to the actual <image> tag. But, because org-roam-server doesn't find this file in its regexp search, it the image is not longer accessible via the server: image