Add image before bookdown title

R Markdown
#1

I'm trying to add an image before the title in gitbook style bookdown project. This is similar to this question, but I would like the image to appear only before the title, not every top-level heading.

I've created a reprex here: https://bd-reprex.netlify.app/

I've edited the _output.yml to include:

bookdown::gitbook:
  ...
  includes:
    before_body: assets/logo.html

However, as can be seen in the example above, the image now appears before every chapter, not just before the title.

Any help would be greatly appreciated!

#2

If you followed the bread crumb trail I left, did you try the option under EDIT in this answer?

Yes, its a nasty hack, but it could get you out of trouble. Comment on the gituhub issue if you think appropriate.

#4

I also output to both pdf and html formats - but using different hacks for each (I know!)

For pdf, I have an image in a pdf, with this code in before_body.yml

\includepdf[pages={1}, scale=1]{Cover_image_1.pdf}
\newpage

For html, here's some excerpts from my index.rmd

---
  title: |  
  ![](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==){height=350px}  
site: bookdown::bookdown_site

---

```
# Introduction {-}
<img src="my_image.png" style="position:absolute;top:50px;height:350px;align:center;" />
#6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

#3

Thanks! I don't think this is exactly what I'm looking for, however. Ultimately, I'm knitting to both HTML (bookdown::gitbook) and PDF (bookdown::pdf_book). If I mess with the title in the YAML header, then the PDF output is also affected. It seems like there should be a way to modify the CSS for the title, but so far I've been unsuccessful.

#5

I think you can use Javascript for that. If you had this code at the end of your index.html, it should work I think. Tested on a minimal book.

```{js, echo = FALSE}
title=document.getElementById('header');
title.innerHTML = '<img src="https://cdn.pixabay.com/photo/2017/04/11/15/55/animals-2222007_960_720.jpg" alt="Test Image">' + title.innerHTML
```

The bookdown title is in a div of id header so that helps. echo = FALSE is required to include the JS code in your output html but without the chunk visible.

Hope it helps.