CODEWITHSUNDEEP
cssrshinyr-markdown
Steph Locke
Steph Locke

Reputation: 6146

Resolve different CSS behaviour with rmarkdown ioslides with and without the shiny runtime

Problem

I have a css for my rmarkdown ioslides presentations that adds an image to the bottom right hand corner of the title slide.

This works well for a standard ioslides presentation, but the image does not appear when I embed shiny into the slides. The developer panel in chrome shows:

Failed to load http://127.0.0.1:6483/file23f4243251a9_files/PunishR.png resource: the server responded with a status of 404 (Not Found)

I created a MWE on github (stephlocke/rmdShinyTest) to verify the issue.

I would like to get the image to appear.

Background

CSS

.title-slide{
   background-color: #ffffff;
   background-image: url("PunishR.png");
   background-position: right bottom;
   background-repeat: no-repeat;
   }

rmarkdown

The simple rmarkdown example has the following yaml:

---
title: "shinytest"
date: "`r Sys.Date()`"
output:
  ioslides_presentation:
    css: Look.css
---

rmarkdown + shiny

The shiny rmarkdown example has the following yaml:

---
title: "shinytest"
date: "`r Sys.Date()`"
runtime: shiny
output:
  ioslides_presentation:
    css: Look.css
---

Other info

Similar SO posts have been raised regarding the logo parameter e.g. https://github.com/stephlocke/rmdShinyTest/blob/master/rmdShiny.Rmd . They indicate that the specific issue encountered has been resolved. However, this uses different functionality and using the logo is an undesirable solution.

I tried putting the image and CSS in a subfolder (www/) based on Style apps with CSS with little success.

> sessionInfo()
R version 3.2.2 (2015-08-14)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 7 x64 (build 7601) Service Pack 1

locale:
[1] LC_COLLATE=English_United Kingdom.1252  LC_CTYPE=English_United Kingdom.1252   
[3] LC_MONETARY=English_United Kingdom.1252 LC_NUMERIC=C                           
[5] LC_TIME=English_United Kingdom.1252    

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] shiny_0.12.2    rmarkdown_0.8.1

loaded via a namespace (and not attached):
[1] R6_2.1.1        htmltools_0.2.6 tools_3.2.2     yaml_2.1.13     Rcpp_0.12.2    
[6] digest_0.6.8    xtable_1.8-0    httpuv_1.3.3    mime_0.4

Upvotes: 0

Views: 570

Answers (2)

Steph Locke
Steph Locke

Reputation: 6146

Rstudio have now fixed this issue in a commit to their dev version on github. Once it gets published to CRAN (i.e. version >0.9.2) this issue will be resolved, but in the interim it can be installed from github.

if(!require(devtools)) install.packages("devtools")
devtools::install_github("rstudio/rmarkdown")

If the dev version is not option for you, please go with @daattali's answer.

Upvotes: 0

DeanAttali
DeanAttali

Reputation: 26313

First of all, great question format :)

I played around with this for a bit and I found two workarounds that aren't ideal, but will work:

  1. use the image's base64 encoding instead of a path to the image

  2. I noticed that if I also place the same image somewhere in the presentation, then the image loads fine. I'm very unfamiliar with how slides work and how resources are loaded so I can't tell you why this is happening, I suppose that maybe when rendering the slides, Shiny takes a pass to look at all the URLs it needs to resolve and makes them available? Anyway, even without completely knowing why it's happening, we can use this observation to solve the problem (again, not a perfect solution, but works). Just include the image anywhere in the slide, and hide it with CSS. So have something like <img src = "PunishR.png" style = "display: none;" />

If these aren't good enough, it might be worth trying a bounty. Or trying to read the source code to see when and where file paths are being registered to be available to your app, so that you can understand why putting it in a slide is fine but in the CSS not. But that's not going to be too much fun...

Upvotes: 1

Related Questions