Insert a logo in upper right corner of R markdown html document

Question

I'm trying to put my company logo on the right corner of my html document

Here my code:

<script>
  $(document).ready(function() {
    $head = $('#header');
    $head.prepend('<div class="knitr source"><img src="logo.png" width="220px" align="right"   ></div>')
  });
</script>

---
title: "Title"
author: "Author"
date: "Date"
theme: bootstrap
output: html_document
keep_md: true
---

```{r echo=FALSE,  include=FALSE}
knitr::include_graphics('./logo.png')
```

<br>

## 1) Header

<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

However, because the logo.png is a local file when sharing the html document people are not able to see it.

Additionally, I tried the following approach

---
title: "Title"
author: "Author"
date: "Date"

output: 
  html_document:
    css: markdown.css
    includes:
      in_header: extLogo.html
---

where extLogo.html

<div class="logos"><img src="logo.png" width="220px" align="right"></div>

But it creates a div outside the div where the Title is (<div class="container-fluid main-container">). Can anyone help on this?

Answer 1

You can use htmltools::img with a little inline CSS for positioning. src can take a path directly, but when images aren't just handled like plots, sometimes knitting fails to convert images to a URI properly, which in turn causes them to fail to render. Using self_contained: false in the YAML is a quick solution, but it's not much harder to use knitr::image_uri to manually convert the image:

---
title: "Title"
author: "Author"
output: html_document
---


```{r, echo=FALSE}
htmltools::img(src = knitr::image_uri(file.path(R.home("doc"), "html", "logo.jpg")), 
               alt = 'logo', 
               style = 'position:absolute; top:0; right:0; padding:10px;')
```

---

# 1. Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Answer 2

The accepted answer works if you are using classical html output. If like me, you also work with bookdown, the logo need to appear on every pages. So, in case somebody find this answer but want to add a logo with bookdown, I give my proposition:

• We need to create an external file with a script to be called in header, thankfully we can create it directly in the rmarkdown script.
• We also use htmltools::img to allow including the image without external image file.

Here is my rmarkdown script to be used as an example:

---
title: "Logo with Bookdown"
author: "Author"
date: '`r format(Sys.time(), "%d %B, %Y")`'
output:
  bookdown::gitbook:
    includes:
      in_header: header.html
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

```{r htmlTemplate, echo=FALSE}
# Create the external file
img <- htmltools::img(src = knitr::image_uri(file.path(R.home("doc"), "html", "logo.jpg")), 
               alt = 'logo', 
               style = 'position:absolute; top:50px; right:1%; padding:10px;z-index:200;')

htmlhead <- paste0('
<script>
document.write(\'<div class="logos">',img,'</div>\')
</script>
')

readr::write_lines(htmlhead, path = "header.html")

```

# Page 1

This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.

When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:

```{r cars}
summary(cars)
```

# Page 2

You can also embed plots, for example:

```{r pressure, echo=FALSE}
plot(pressure)
```

Note that the `echo = FALSE` parameter was added to the code chunk to prevent printing of the R code that generated the plot.

Answer 3

I took a quite different approach to the answers above, using only CSS and without absolute positioning. I added the following CSS code chunk to my document, but you can also create a standalone CSS file and include that in the Rmd YAML header.

```{css, echo=FALSE}
#header {
  background-image: url("data: BASE64 encoded string for image");
  background-repeat: no-repeat;
  background-position: 95%;
  padding: 5px;
}
#header > * {
  max-width: calc(100% - 225px);
}
@media only screen and (max-width:600px){
#header > .title { 
  margin-top: 105px;
}
#header > *
  max-width: 100%;
}
#header {
  background-position: 10px 10px;
}
}
```

There's a few things going on here. To address the original question about the image, you need to base64 encode the image yourself and put the string into the background-image URL.

It also handles the issue of overlap of logo and header content in a reactive way, setting max-width on all header elements, and placing the logo above the title on narrow windows (less than 600px).

If you don't care about overlap at all, then you only really need the first #header selector code. If you don't care about the narrow device reactive layout then you can keep the first two selectors and drop the @media block.

The two pixel values 225px and 105px are based on my logo, and will need to be changed to fit your image plus some padding.

Answer 4

@alistaire's accepted answer was really useful. However in my case the title and the logo were overlapping, since the title in my markdown is really long.

Looking around I came up with the following solution, and I post it in case is useful for anybody.

```{js logo-js, echo=FALSE}
$(document).ready(function() {
  $('#header').parent().prepend('<div id=\"logo\"><img src=\"www/xxxxx.png\" style=\"position:absolute; top:0; right:0; padding:20px; height:120px\"></div>');
  $('#header').css('margin-right', '120px')
});
```

This should be added anywhere in the markdown, and of course it only works for HTML output. The idea is to add a new div for the logo, and then add a margin-right to the title so that it does not overlap.

Note that I don't think this is really optimal; my use of css is clumsy and if somebody figures out a better way I'm glad to hear. Anyhow it seems works ok.

Answer 5

As a complement to alistaire answer, and answering the question from Marco. One can use width, and height to select the size of the figure. For example,

---
title: "Title"
author: "Author"
output: html_document
---


```{r, echo=FALSE}
htmltools::img(src = knitr::image_uri(file.path(R.home("doc"), "html", "logo.jpg")), 
               alt = 'logo', 
               style = 'position:absolute; top:0; right:0; padding:10px;',
               width = "300px",
               heigth = "300px")
```

---

# 1. Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor

Answer 6

To get the logo top right aligned inside the header div, do this:

1. Make file called header-logo.html containing:

<script>
  $(document).ready(function() {
    $('#header').prepend('<img src="https://via.placeholder.com/350x350" style="float:right" width="30%"/>');
  });
</script>

2. Update your .Rmd with:

 output:
   html_document:
     includes:
       in_header: header-logo.html

3. base64 encode the logo manually and replace the url in src if you want the .HTML be self contained.

Answer 7

In case you make a rmarkdown website and you would like to add a logo to the right in the navbar:

In the _site.yml include a before_body:

include:
  before_body: logo.html

In the html template:

<script type="text/javascript">
$(function() {
$('.navbar-right').before($('.logo'));
})
</script>

<div class="logo pull-right">
<img src="logo.png" alt="logo" width="150" style="margin-top: 15px;">
</div>

Key is to include the pull-right class in the div you insert.