CODEWITHSUNDEEP
htmlcssrr-markdown
OTA
OTA

Reputation: 279

Adding a logo image with code written in R Markdown's YAML

I have a R Markdown file (a.k.a. the main file). I want to add a logo at the top of the page by only writing code in the YAML of the main file or have a second file be referenced in the YAML (for example, "logo.html" is a second file that is referenced in the main file's YAML). I do not want any solutions in blocks or in the body. The logo code can not be a hack solution by placing the code in the title. I prefer solutions coded in R, HTML, and CSS. The logo can not cover up the title. The logo will be viewed on multiple sized monitors so please avoid position:absolute. There might be a lot of side scrolling because of a large number of columns in the data table. Assume all files are in 1 folder working directory.

Here is what I've tried so far.

First attempt:

Main file contains this YAML --
---
title: "test_knit"
output: 
  html_document:
    includes:
      before_body: logo.html
---

Second file named logo.html contains --
<img src="logo.png" style="position:relative;top:50%"/>

Third file is the logo in PNG format.

My second attempt:

Main file contains this YAML --
---
title: "test_knit"
output: 
  html_document:
    includes:
      before_body: logo.html
---

Second file named logo.html is an html file that was converted from a PNG.

My attempts render the R Markdown file and are able to Knit successfully, but they do not show the logo. I can see the tables, comments, and graphs, but the logo does not appear.

Upvotes: 1

Views: 1670

Answers (1)

tpetzoldt
tpetzoldt

Reputation: 5813

The following works for me, both on Windows and (similar) also on Linux. I had also problems that the files with the logos were not found, so I put html header, footer and images in an absolute path (on Windows) resp a path absolute to the Webserver document root on Linux:

---
pagetitle: My page title
lang: en
output:
  html_document:
    include:
      before_body: /resources/header.html
      after_body:  /resources/footer.html
runtime: shiny
---

I have to add, that this applies to a shiny runtime.

Edit

Just tested: Without a shiny server, all parts can be in the work folder and both, include and includes work:

---
pagetitle: My page title
lang: en
output:
  html_document:
    include:
      before_body: header.html
      after_body:  footer.html
---

And here an example header.html file:

<body>
    <p style="background-color: #002557; height: 80px;">
      <a href="https://foo.de/">
        <img src="left_logo.png" alt="Left Logo"
          title="Left Logo" style="width: 125px; height: 36px;  margin-top: 22px; margin-left: 4%;">
      </a>
      
       <a href="https://foo.de/bar/">
        <img src="right_logo.png" alt="Right Logo"
          title="Right Logo" style="height: 48px;  margin-top: 16px; float: right; margin-right: 4%;">
      </a>
    </p>
</body>

Improvements are welcome.

Upvotes: 1

Related Questions