quarto

How to put a logo below the sidebar in a quarto book?

I would like to build a png-image below the sidebar on the right in a quarto-book:

enter image description here

I have tried to find a solution with the help of ChatGPT. Unfortunately not successful. So I don't have a solution. But here is my code:

index.qmd:

# Preface {.unnumbered}

This is a Quarto book.

To learn more about Quarto books visit <https://quarto.org/docs/books>.

_quarto.yml:

project:
  type: book

book:
  title: "q_book_exampl"
  author: "Norah Jones"
  date: "2.7.2024"
  chapters:
    - index.qmd 
format:
  html:
    theme: cosmo

Here is the test image: enter image description here

Solution

  • You could do it like this: A logo can be used in the sidebar by configuring _quarto.yml as described here in the documentation. Additionally we add a small EventListener which applies appendChild in order to relocate the image below the content of the sidebar.

    enter image description here

    _quarto.yml:

    project:
  type: book

book:
  title: "q_book_exampl"
  author: "Norah Jones"
  date: "2.7.2024"
  chapters:
    - index.qmd
  sidebar:
    logo: 'testImage.png'

format:
  html:
    theme: cosmo 
    include-in-header:
      text: |
        <script>
          document.addEventListener("DOMContentLoaded", function() {
            var sidebar = document.getElementById('quarto-sidebar');
            var logo = sidebar.getElementsByTagName('img')[0];
            
            sidebar.appendChild(logo);
          });
        </script>