1

I am writing an article in org mode to be exported to HTML for being published on the web. By looking at the documentation, I have not been able to find a way to insert an image before the title of the article.

So for instance, I would like my page to look like this (the black border indicates the computer screen)

enter image description here

How do I do this? Do I add some header information? Currently my header in the org file looks like this.

#+TITLE: Hello World 
#+AUTHOR: A.U.Thor
#+EMAIL:  hello.world@NOSPAM.outlook.com

#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="style.css" />
#+OPTIONS: num:nil

Maybe the solution to this is to use CSS, by specifying that a certain figure element comes before the title? I am not very good at CSS but this is my best guess. Maybe the ORG guys have already developed some native (and easily remembered) syntax for this?

  • A strange way around is to modify org-html-preamble-format, where you can redefine the HTML code for the whole title section, and add your image there. Maybe you can do it in a per-file basis so you don't mess your whole orgmode config. – Juancho Sep 19 at 14:22
1

Add file:some-directory/image1.png into #+TITLE:

I use this technique for exporting to HTML and for rendering org-mode pages in GitLab.

e.g.

#+TITLE: file:some-directory/image1.png                    My Long Title Preceded by Many Spaces

which exports to html

<title><img src="some-directory/image1.png" alt="image1.png">                    My Long Title Preceded by Many Spaces</title>

Thanks for asking your question!


This answer was validated using:
emacs version: GNU Emacs 25.2.1
org-version: 9.1.2

| improve this answer | |
2

In addition to the answer of Melioratus which I accepted, I also noticed that I can embed native HTML code in the title via the inline HTML mechanism of org mode.

So for instance, this also works and allows me to add extra attributes like width and height.

#+TITLE:  @@html:<img src="file:///home/pictures/bird.svg" alt="" / width="150px">@@  Hello World

This is more flexible but much cruftier than the neat syntax suggested by Melioratus that should work for most cases.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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