Add image before bookdown title

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!

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.

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;" />   

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.

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

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.