How to insert an image above :toc: left of asciidoc multipage?

Question

I need to put an image above the toc at the left.

I'm using multidoctor-multipage to create a html multipage manual. I need to place a logo image above the Table of Content at the left, in order that it appears at all pages.

It is there a way to do that?

Answer 1

Assuming you mean asciidoctor-multipage here's an approach that should work.

The default theme for Asciidoctor doesn't have any built-in feature for branding the output. It does have a feature called Docinfo files that lets you embed custom CSS and JavaScript into every generated page.

The Docinfo files feature can be used to achieve your goal. Using JavaScript, an image can be added to the HTML wherever you want, and CSS styles can control the image presentation.

In the same folder as your AsciiDoc document, create the file docinfo.html with the following content:

<style>
#toc img.logo {
  width: 64px;
  height: 64px;
}
</style>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    var image = document.createElement('img')
    image.setAttribute('src', 'logo.svg')
    image.setAttribute('alt', 'Logo')
    image.classList.add('logo')
    var toc = document.querySelector('#toc')
    if (toc) {
      toc.insertAdjacentElement('afterbegin', image)
    }
  });
</script>

In your AsciiDoc file, just before the :toc: left attribute definition, add this line:

:docinfo: shared

Then, when you generate the HTML files with asciidoctor-multipage, the image gets loaded and positioned above the table of contents.

Notes:

• You have to copy the image into the same folder containing the HTML, or you'll see a broken image in your browser.
• You'll need to change logo.svg to whatever image filename you want to use.