I use some code to export org-mode images embedded as base64, courtesy of I believe originally John Kitchin - from this post here.
However, I should say, I do not yet fully understand all of it! It overwrites org-html--format-image
, from ox-html.
Here it is:
(defun replace-in-string (what with in)
(replace-regexp-in-string (regexp-quote what) with in nil 'literal))
(defun embed-org-html-images ()
(interactive)
(defun org-html--format-image (source attributes info)
(progn
(setq source (replace-in-string "%20" " " source))
(format (concat "<img src=\"data:image/%s;base64,%s\"" " class=\"" "%s" "\" />")
(or (file-name-extension source) "")
(base64-encode-string
(with-temp-buffer
(insert-file-contents-literally source)
(buffer-string)))
(file-name-nondirectory source)))))
I amended it to include the image file name (source) as a class on the image tag. That way it can be accessed in css by escaping the .
. Example: image\.jpg {width:50%;}
.
The problem is that org-html export wraps images in figures, and those are difficult to style, since they seem to add IDs that change when the document structure changes, which is all the time.
Keep in mind, the embedded base64 approach above, strips the attributes added to the image tag from the org-html export syntax: example: #+ATTR_HTML: :class img-1
will get stripped in the export.
I've been attempting to use the source of the image as the ID for the figure, instead of I guess the 'info' argument that is passed in as parameter to the following function:
(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>\n%s%s\n</figure>"
"\n<div%s class=\"figure\">\n%s%s\n</div>")
;; ID.
(if (org-string-nw-p label) (format " id=\"%s\"" label) "")
;; Contents.
(if html5-fancy contents (format "<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)))))
Essentially, I'd like to pass the 'source' in, in the same way it's passed in org-html--format-image.
Then it could be included here:
(format " id=\"%s\"" label)
%s
is the placeholder for, I think the info
argument?
Any ideas how to achieve this?
` tags, and those are today `` tags, but it seems the best approach. To just remove the wrapping `` element, if possible. `org-html-prefer-user-labels` would apply, if the tags weren't getting stripped.