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
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