Currently my images are exported with org-html-publish-to-html
, and they end up as inlined <img src=''/>
. I want them inside figures, so I'm working around this my problem by injecting the following in my org document:
#+BEGIN_HTML
<figure>
<img src="./the_image_path.png"/>
<figcaption style="font-size:0.8em">This is a caption.</figcaption>
</figure>
#+END_HTML
This solution isn't ideal, since I may want to generate images on the fly with org-babel, and I'll want to target them with CSS.
How can I tell org-mode to export links to images as figures?
EDIT:
It turns out setting the following on my project-alist does the trick.
:html-html5-fancy t
:html-doctype "html5"
However, the output is still messed up because org-mode adds an unnecessary p tag to the image:
<figure>
<p><img src="../media/dog.jpg" alt="dog.jpg" width="60%">
</p>
<figcaption><span class="figure-number">Figure 1:</span> This is a dog.</figcaption>
</figure>
The culprit is the following function from ox-html. Note the suspicious <p>
tags:
(defun org-html--wrap-image (contents info &optional caption label)
"Wrap CONTENTS string within an appropriate environment for images.
INFO is a plist used as a communication channel. When optional
arguments CAPTION and LABEL are given, use them for caption and
\"id\" attribute."
(let ((html5-fancy (org-html--html5-fancy-p info)))
(format (if html5-fancy "\n<figure%s>%s%s\n</figure>"
"\n<div%s class=\"figure\">%s%s\n</div>")
;; ID.
(if (org-string-nw-p label) (format " id=\"%s\"" label) "")
;; Contents.
(format "\n<p>%s</p>" contents)
;; Caption.
(if (not (org-string-nw-p caption)) ""
(format (if html5-fancy "\n<figcaption>%s</figcaption>"
"\n<p>%s</p>")
caption)))))
So I redefine the function on my web-config.el
and remove the
tags, and everything works ok. But is there a better way to do it? Perhaps with an advice?
org-html-html5-fancy
to t andorg-html-doctype
to"html5"
should export images to a figure tag.:html-html5-fancy
and:html-doctype
keys in yourplist
?