R Markdown: Putting an image in the top right hand corner of HTML and moving title down

Question

I would like to put a company logo image in the top right hand side of my R markdown report, and then move the title down, say 3 or 4 cm lower than the default position. The idea being that it looks like company letterhead.

Could anyone suggest how I could code this in my .Rmd file?

Thanks for any help!

Answer 1

Option 1:

Add this script at the beginning (or somewhere else) of your RMarkdown document:

<script>
   $(document).ready(function() {
     $head = $('#header');
     $head.prepend('<img src=\"logo.jpg\" style=\"float: right;width: 150px;\"/>')
   });
</script>

This will look like

For the script to work, the image has to be in the same folder as the .Rmd document. You could also give the <img>tag a certain id and add more precise CSS styling with

<style>
  #myLogo {
    float: right;
    width: 120px;
    ...
</style>

Option 2:

Create an extra HTML file (e.g. extLogo.html) that contains the logo like:

<div><img src="logo.jpg" width="200px" align="right"></div>

Then modify the YAML header like this:

---
title: "Test"
author: "Martin Schmelzer"
date: "13 Juli 2016"
output: 
  html_document:
    includes:
      in_header: extLogo.html
---

This looks like

and might need some further margin/padding options...

Answer 2

if you change the img src to a base 64 code (really messy as large size) then the image no longer depends on your local directory and for e.g. you could email some one the html file to use an an interactive report.

base64 encoder: https://www.base64decode.org/