4

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?

7
  • Not tested, but setting org-html-html5-fancy to t and org-html-doctype to "html5" should export images to a figure tag.
    – mutbuerger
    Oct 10, 2016 at 11:56
  • I've got those covered, but still doesn't work. Maybe they are being overwritten during export somehow?
    – Daniel
    Oct 10, 2016 at 11:59
  • Since you publish the document, did you use the :html-html5-fancy and :html-doctype keys in your plist?
    – mutbuerger
    Oct 10, 2016 at 13:08
  • @mutbuerger thx. That did the trick. It's exporting as figures now. (though the img tag get's wrapped within an extra unnecessary <p> tag, but I can live with that.)
    – Daniel
    Oct 10, 2016 at 13:42
  • Actually, the extra <p> tag messes up my CSS, so I've got another problem now.
    – Daniel
    Oct 10, 2016 at 13:51

1 Answer 1

3

The relevant variables are

(setq org-html-html5-fancy t
      org-html-doctype "html5")

To publish the document with org-html-publish-to-html you can also use the :html-doctype and :html-html5-fancy keys in the plist argument (or in your org-publish-project-alist).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.