R markdown knit to github add logo to right of header

Question

I have a readme file for an R package, which I create from R markdown, using knit to github document.

I wanted to add a small logo on the right-hand side of the header. I was able to do this by adding the following chunk to my R markdown document:

# Ensures the package "pacman" is installed
if (!require("pacman")) install.packages("pacman")

# Load required libraries:
pacman::p_load(htmltools, 
               here,
               readr)

# Base-64 encode the image file:
img <- htmltools::img(src = knitr::image_uri(f = here::here("inst", 
                                                            "app", 
                                                            "www", 
                                                            "godataR_logo.png")),
                      alt = 'logo',
                      style = 'position:absolute; 
                               width:10%;
                               height:15%;
                               top:10px; 
                               right:1%; 
                               padding:10px; 
                               z-index:200;')

# Create the image file:
htmlhead <- paste0('<script>
                   document.write(\'<div class="logos">', img, '</div>\')
                   </script>')

# Read in the image file:
readr::write_lines(htmlhead, file = "header.html")

I ran the chunk by itself first, to create the base-64 encoded html version of my logo, following advice on a couple of other S/O posts. The other posts used file.path() to define the relative file path to the original logo, whereas I used the here package for this since that is what I normally use in my workflow.

Once header.html is created, I then knit the .Rmd file to github with the following YAML header:

title: "godataR: easier wrangling with the Go.Data API"
date: "`r format(Sys.time(), '%d %B %Y')`"
output: 
  github_document:
        includes:
          in_header: header.html

All this seems to work fine, and in the .md file that is produced in the RStudio viewer, I can see the logo on the right-hand side of the header.

The problem is that when I then pushed this update to github, the readme file on github is not displaying the logo. Instead I get this:

I thought the logo was already embedded in the .md file once I knit it, but it seems not... where am I going wrong?

Answer 1

I found a much easier way to add the logo to the R markdown title; the src line linking, sizing and justifying the image can simply be added directly to the title in the yaml header with the relative filepath (no supplementary files required apart from the logo image itself):

title: "godataR: easier wrangling with the Go.Data API <img src='inst/app/www/godataR_logo.png' align='centre' height='20%' width='20%'/>"
date: "`r format(Sys.time(), '%d %B %Y')`"
output: github_document

(I did change the alignment from right to centre as I think it looks neater this way, but align='right' works just as well).

This displays the logo correctly when the knit .md is pushed to Github: