CODEWITHSUNDEEP
org-mode
hatmatrix
hatmatrix

Reputation: 44942

org-mode export as html: inline images displayed and linked?

If I use the folowing syntax,

#+ATTR_HTML: width="200"
[[file:highres.jpg][file:highres.jpg]]

I should expect that the page would display highres.jpg in the specified size, and when clicked on, would like to the file itself? Which is what I get from these instructions. However, when I generate the html from an org-mode file, the image is displayed but not linked/clickable. Am I doing something wrong or have I misunderstood?

Upvotes: 5

Views: 4121

Answers (2)

Evgeniy Berezovsky
Evgeniy Berezovsky

Reputation: 19248

In more recent versions of org-mode, the format seems to have changed. The following works for me in Emacs 24.4.1:

#+ATTR_HTML: :width 200
[[file:highres.jpg]]

Upvotes: 4

Jonathan Leech-Pepin
Jonathan Leech-Pepin

Reputation: 7884

In your example it is treating it as being without description because the description is identical to the link itself. The instructions you link to say to use a generated thumbnail for the description (which will be displayed instead of the full image).

On the other hand, I wasn't able to get it to respect #+ATTR_HTML: width="200" when I did change the description text to allow for a difference

#+ATTR_HTML: width="200"
[[file:highres.jpg][./highres.jpg]]

Instead the inlined clickable image was full-size. I don't know if this is intended or not, the best place to ask that would likely be the mailing list (where they may also be able to fix it if it is a bug).

Added Testing of issue

Using the following Org snippet

* SVG test

#+CAPTION: Test
#+ATTR_HTML: width="200" title="Hello"
[[./img/Bitmap.svg][file:./img/Bitmap.svg]]

#+Caption: Test2
#+ATTR_HTML: width="200" title="Hello as well"
[[./Bitmap.svg]]

I get the following HTML, which does explain why the strange result with regards to image sizes occurs:

<p>
<a href="./img/Bitmap.svg" width="200" title="Hello"><img src="./img/Bitmap.svg" alt="Bitmap.svg"/></a>
</p>

<div class="figure">
<p><img src="./Bitmap.svg" width="200" title="Hello as well" alt="./Bitmap.svg" /></p>
<p>Test2</p>
</div>

The initial image is being adjusted in size, instead of the link image. Definitely a question of how the exporter interprets the #+ATTRL_HTML information. Under the current exporter the best choice might well be to generate a thumbnail of the image for insertion.

Upvotes: 2

Related Questions