Search code examples
cssrshinymarkdownflexdashboard

How do I add css style element to Rmd shiny renderImage?


I am struggling to add css style element to my shiny renderImage code. I have tried various options with css source file via tag$link as well as with straight css code via tag$style.

I have tried both the tag$link as well as the tag$style options (in my sample code) (1) outside of the renderImage code (2) inside the renderImage code, outside of the list wrapper (3) inside the renderImage code, inside of the list wrapper

I get one of two errors: Error 1: Object of type 'closure' is not subsettable Error 2: Object 'centerImage' not found

With my logo5.png image on my local machine, with no additional css - it works. With my logo5.png image on my local machine, with additional css - it DOES NOT work.

Note that I left the '1', dir() and '2' in my code prior to renderImage to track execution.

Can someone please help?

(To run in Rstudio, change the rrr`` to the 3 back quotes in 4 places)

(My online image URL is http://www.richpat.com/wp-content/uploads/2019/04/logov5.png)

---
title: 'Shiny Dev with Logo'
output: 
  flexdashboard::flex_dashboard:
    theme: united
  orientation: columns
source_code: embed
runtime: shiny
---

rrr``{r setup, include=FALSE}        #CORRECT THIS WHEN RUNNING
knitr::opts_chunk$set(echo = FALSE, warning = FALSE, message = FALSE)
library(flexdashboard,quietly=TRUE, verbose=FALSE)
library(shiny,quietly=TRUE, verbose=FALSE)
library(plotly,quietly=TRUE, verbose=FALSE)
rrr``                                #CORRECT THIS WHEN RUNNING

Corporate
=======================================================================

Column
-----------------------------------------------------------------------

### Logo

rrr``{r}                              #CORRECT THIS WHEN RUNNING
(1)
dir()
#tag$head(tags$link(rel = "stylesheet", type = "text/css", href = "BRstyle.css"))
#tag$head(tag$style("centerImage {text-align:center;}"))

(2)
renderImage({
      rfilename=normalizePath("logov5.png")
      list(src=rfilename, contentType = "image/png", alt = "logo5", class=centerImage)
      }, deleteFile = FALSE)
rrr``                                 #CORRECT THIS WHEN RUNNING

Background
=======================================================================

Column
-----------------------------------------------------------------------

### Purpose

ad valorem libram


Solution

  • OK - so I found the answer. And simplicity is the route...

    Instead of doing this in shiny renderImage, I learned a lot about how shiny and flexdashboard and markdown work together !!!

    I used img html tag as part of the markdown section with direct display tags

    <img src="http://www.richpat.com/wp-content/uploads/2019/04/logov5.png"
     alt="Markdown Monster icon"
     style="ftext-align:center; display: center;" />
    

    And I removed the complete shiny renderImage r-code section

    As a bonus - and just to show a bit more of what I learned, here is my revised yaml

    title: 'Br F A'
    output: 
      flexdashboard::flex_dashboard:
        logo: logov5s.png
        theme: readable
        css: BRstyle.css
        navbar: 
        - { title: "About", href: "http://www.richpat.com", align: left }
        source_code: embed
        orientation: columns
    runtime: shiny