CODEWITHSUNDEEP
r-markdownquartotableofcontents
John Sinclair
John Sinclair

Reputation: 1

How can I add an image to the top of the TOC in a quarto HTML Document

How can I add an image above the table of contents (TOC) in a Quarto html document?

I'm able to add an image to the top of the table of contents (TOC) in a Rmarkdown report using the following code:


<script>
  $(document).ready(function() {
    $('#TOC').parent().prepend('<div id=\"nav_logo\"><img src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Posit_logo.svg/640px-Posit_logo.svg.png\"></div>');
  });
</script>

<style>
#TOC { 
margin-top: 120px; <!-- toc top from page top -->
} 
#nav_logo {
  position: fixed; 
  width: 240px;
  margin-top: 10px;
}
</style>

which produces this: Rmarkdown Example

But I am unable to replicate this in Quarto.

Upvotes: 0

Views: 84

Answers (1)

Daniel_j_iii
Daniel_j_iii

Reputation: 3252

enter image description here

luckily Quarto is based a lot around Rmarkdown. you can use the same solution provided here. Atleast don't have to specify the navbar, and may have to play around with the background-size paramter and different TOC and image layouts.

---
title: "Untitled"
format: html
toc: true
toc-depth: 2
---
<style>
#TOC {
  background: url("logo.png");
  background-size: 50%;
  padding-top: 80px !important;
  background-repeat: no-repeat;
}
</style>
## Quarto
## Running Code

Upvotes: 0

Related Questions