2

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:  [email protected]

#+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?

3
  • 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
    Commented Sep 19, 2020 at 14:22
  • "How to add any other text before the title?" would be next question. Like inserting a header.org, for example.
    – mihai
    Commented Feb 4, 2022 at 13:57
  • +1 on using html-preamble - a concrete example of this is github.com/taingra/blog/blob/… resulting in the #preamble element appearing above #content (where the title is located) e.g. taingram.org/blog/org-mode-blog.html
    – xdl
    Commented Aug 10, 2023 at 12:33

2 Answers 2

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

1
  • Beautiful! Thanks! Commented Sep 22, 2020 at 15:50
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.

Your Answer

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

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