Adding logo to title page causes duplication of logo on hover

[acircleda]

I have added a logo in lieu of a text title by following the directions here: https://bookdown.org/yihui/rmarkdown-cookbook/latex-logo.html.

However, by doing so, hovering over the HTML logo causes a duplicate to appear. This is visible here: https://bookdown.org/aschmi11/RESMHandbook/. Note: this does not occur in the RStudio viewer.

The top part of my index.Rmd file looks like this:

--- 
title: |
  ![](cover_image.png)  
author: ""
date: "Last Updated `r Sys.Date()`"
site: bookdown::bookdown_site
output: bookdown::gitbook
documentclass: book
bibliography: [book.bib]
biblio-style: apalike
link-citations: yes
github-repo: acircleda/RESMHandbook
description: "This is a handbook to help UTK Evaluation, Statistics, and Measruement students master R."
---

Even if I add text to title, as below, the issue persists:

title: |
  ![](cover_image.png)  
  Text Title

There have been several solutions proposed on Stack Overflow, but all of them are very hacky:
https://stackoverflow.com/questions/60271684/add-an-image-to-rmarkdown-bookdown-output-before-top-level-heading/60537857#60537857. The best solution is to add a transparent image in the header, and then add the following HTML below the first header:

<img src="cover_image.png" style="position:absolute;top:50px;width=75%;align:center;" />

However, if this is recommended as an R Markdown solution, shouldn't it work fir Bookdown? This seems like a bug. We should have an option to specify a text title for the navbar/header bar at the top and a logo to be used either with the text logo or in place of it.

Session Info

R version 4.0.0 (2020-04-24)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 17763), RStudio 1.2.1335

Locale:
  LC_COLLATE=English_United States.1252 
  LC_CTYPE=English_United States.1252   
  LC_MONETARY=English_United States.1252
  LC_NUMERIC=C                          
  LC_TIME=English_United States.1252    

Package version:
  base64enc_0.1.3 bookdown_0.19   digest_0.6.25  
  evaluate_0.14   glue_1.4.1      graphics_4.0.0 
  grDevices_4.0.0 highr_0.8       htmltools_0.4.0
  jsonlite_1.6.1  knitr_1.28      magrittr_1.5   
  markdown_1.1    methods_4.0.0   mime_0.9       
  Rcpp_1.0.4.6    rlang_0.4.6     rmarkdown_2.2  
  stats_4.0.0     stringi_1.4.6   stringr_1.4.0  
  tinytex_0.23    tools_4.0.0     utils_4.0.0    
  xfun_0.14       yaml_2.2.1

---

By filing an issue to this repo, I promise that

• [x ] I have fully read the issue guide at https://yihui.org/issue/.
• [x ] I have provided the necessary information about my issue.
  • If I'm asking a question, I have already asked it on Stack Overflow or RStudio Community, waited for at least 24 hours, and included a link to my question there.
  • If I'm filing a bug report, I have included a minimal, self-contained, and reproducible example, and have also included xfun::session_info('bookdown'). I have upgraded all my packages to their latest versions (e.g., R, RStudio, and R packages), and also tried the development version: remotes::install_github('rstudio/bookdown').
  • If I have posted the same issue elsewhere, I have also mentioned it in this issue.
• [x ] I have learned the Github Markdown syntax, and formatted my issue correctly.

I understand that my issue may be closed if I don't fulfill my promises.

[Camilo-Mora]

Here are several ways to solve this...
https://stackoverflow.com/questions/60271684/add-an-image-to-rmarkdown-bookdown-output-before-top-level-heading/65605643#65605643

Example here..

https://camilo-mora.github.io/GEO380/

[cderv]

Why this happens ?

This is because one feature of gitbook is that the title is repeated on hover in the navbar. See

So when an image is added in the title directly in the yaml header, it will be used twice, hence the duplication on hover.

About the recommandation in https://bookdown.org/yihui/rmarkdown-cookbook/latex-logo.html, this is explicitly for latex and not for HTML. This is why it is not out of the box for bookdown's gitbook format.

The solution with JS in here : https://stackoverflow.com/a/62093846/3436535 is maybe the easiest one
Adding this into the index.Rmd file

```{js, echo = FALSE}
title=document.getElementById('header');
title.innerHTML = '<img src="/path/to/img.png" alt="Test Image">' + title.innerHTML
```

I let this opens as a feature request to support adding a cover image in the book.

What prevents us to do this for now is that it is easy to add one where ever you want, using JS, markdown html or else. Also often each author wants it in a specific place AND you may not want this image in your PDF output, which makes it difficult for us to provide a generic solution.

One example in the R Markdown Cookbook under the title and in a asis chunk so that it will only be shown in the PDF output : https://github.com/yihui/rmarkdown-cookbook/blob/0dca0dbdb217f4da5c1a30ba96460c030705374f/index.Rmd#L93

But we could offer one option as default using a yaml chunk, and if someone wants to customize differently the above solution could be used.

[ThierryO]

I'm working on a solution were the user can provide a cover image through an optional cover_image argument. Would you accept a PR with such a feature?