I have the following code below but my logo is not showing up. I have the PNG saved in a www folder but as you can see in the image, it is not showing. Any help would be greatly appreciated.
ui <-
dashboardPage(
dashboardHeader(
title = img(src='logo.png', align = "right", height = 100, width = 200),
titleWidth = 300
),
A way that always works for me it's to load an image from a public repository (i.e. the github repo from the project) into the header:
ui <-
dashboardPage(
#here replace "raw.githubusercontent.com/munoztd0/xaringan/master/logo_plain.png" with whatever public image you want
header = list(
tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><ahref=\"URL\"><img
src=\"https://raw.githubusercontent.com/munoztd0/xaringan/master/logo_plain.png\" alt=\"alt\" style=\"float:right;width:100px;height:41px;padding-top:10px;\"> </a></div>');
console.log(header)")),
tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right;height:30px;padding-right:50px;\"><h5></h5></div>');"))
)
#change the css to change the size, position, padding ,etc..
Related
I have the following snippet of code:
shinyUI(fluidPage(
useShinyjs(),
shinyjs::hidden(div(
id = "application",
navbarPage(
title = div(img(src="img_1.png", filetype="image/png"), "Indicators"),
id = "tabs",
tabpanel("Admin", ...)
tabpanel("User", ...)
)
))
))
I would like to add a second image, let's call it img_2.png to the right of the navbar, i.e. at the end of the navbar itself. Maybe the fact that I used title = forces me to place only one image in the navbar. Could anyone help me?
you can add an additional img tag and an style parameter, that sets the position to the right side:
title = div(img(src="img_1.png", filetype="image/png"), "Indicators", img(src="img_1.png", filetype="image/png", style = "position: fixed;right: 20px;"))
I was working on a Shiny application, and instead of a title, I wanted to use an image. While the code did not raise any errors and shows the designated area for the image, the image doesn't show up.
Here is the code:
# header UI
ui <- navbarPage(title = div(img(src="/Users/atillacolak/Desktop/tafn_logo.png",
height = 60,
style = "margin-top: -14px; padding-right:10px;padding-bottom:10px")),
selected = "home",
theme = bs_theme(
bg = "white",
fg = "#ed7117",
base_font = font_google("Prompt"),
code_font = font_google("JetBrains Mono")),
fluid = TRUE,
home)
The result of this code is given in the image below.
As you can see the image does not format. What is the problem here?
You need to make the image available as a static resource to shiny's webserver.
Either you put the image in a www folder (subdirctory of your app folder) and set src = "/tafn_logo.png" or you use addResourcePath:
addResourcePath(prefix = "Desktop", directoryPath = "/Users/atillacolak/Desktop")
src using prefix:
img(src="Desktop/tafn_logo.png",
height = 60,
style = "margin-top: -14px; padding-right:10px;padding-bottom:10px")
See my related answer here.
I am trying to add an external URL in a shiny dashboard that uses the package bs4Dash but when I click in it their is no response. I have something similar to the example below. It does not work using newTab = FALSE or newTab = TRUE. Am I missing something or this is the way it is supposed to behave?
# NOT RUN {
## Only run this example in interactive R sessions
if (interactive()) {
library(shiny)
library(bs4Dash)
# A dashboard header with 3 dropdown menus
header <- dashboardHeader(
title = "My dashboard"
)
sidebar <- dashboardSidebar(
sidebarMenu(
menuItem("My menu L1", href = "https://rinterface.github.io/bs4Dash/", newTab = FALSE),
menuItem("My menu L2",
menuSubItem("My submenu 1", href = "https://rinterface.github.io/bs4Dash/", newTab = TRUE)
)
)
)
shinyApp(
ui = dashboardPage(
header,
sidebar,
dashboardBody()
),
server = function(input, output) { }
)
}
# }
#Dwight, I "solved" this issue via a hack. Basically, I started using the shinydashboard::menuItem for those particular instances. I think the author fix this and hopefully will be available in the next version (https://github.com/RinteRface/bs4Dash/issues/225).
shinydashboard::menuItem(
text = "Help",
href = "http://example.com"
)
I would like to include a small image at the left of the title of my navbarPage, and to include another image completely at the right of this same navbarPage. I found this answer which provides the same layout than the one I would like to have. The problem is that this solution does not provide a fully reproducible example and I can't figure out how to include the chunks of code in the ui part.
Does anybody know how to make a reproducible example from this answer?
Here's what I've tried so far:
library(shiny)
ui <- navbarPage(
tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><h3>This is R</h3></div>');"
)),
tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><img src=\"image.png\" alt=\"alt\" style=\"float:right;width:33px;height:41px;padding-top:10px;\"> `</div>');
console.log(header)")
),
title = div(img(src="image.png", height = '40px', width = '40px'), "something"),
tabPanel("foo")
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
This is the image called image.png. I put it in the www folder, which is placed in my app directory.
There are mainly two things to solve:
* some text is displayed on the below the navbar whereas it shouldn't be displayed at all
* the image and the text at the left are not centered
I did not make any change to your code (well except the tags$head() at the begining, but that's an add on).
The only problem with your code is not the problem in your code, is the problem in your files structure.You have to place your images inside a new folder called www (Note that the folder www is in the same place as your R code which is app.R or ui.R).
library(shiny)
ui <- fluidPage(
tags$head(
tags$link(rel = "shortcut icon", type = "image/png", href = "image.png"),
tags$title("Browser tab title")
),
navbarPage(
tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><h3>This is R</h3></div>');"
)),
tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><img src=\"image.png\" alt=\"alt\" style=\"float:right;width:33px;height:41px;padding-top:10px;\"> </div>');
console.log(header)")
),
title = tags$div(img(src="image.png", height = '40px', width = '40px'), "something"),
tabPanel("foo")
)
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
Note: I've added the navbarPage inside a fluidPage because without the fluidPage, the title of the NavBarPage will be the title in the browser tab!But now the main UI is the fluidPage so it's title will be the browser title. this also gives you flexiblity to add a new image for the browser tab, different from the navbar page's tab.
Here's the screen shot of the output.
Hope this helps!
So just curious, is there any way to add a company logo to the header of a ShinyDashboard? As I am looking at the documentation, it describes changing the "logo" in the CSS, this is just configuring what goes in the upper left hand corner though as far as I can tell and I would like to keep my title there.
I am not using the drop down menus and so I would like to add my company logo on the top right where the red box is.
Does anyone have any idea how this can be done with Shinydashboard? Thanks.
Update 2020-10-27
For users that are comfortable with HTML or want more flexibility around their user interface and have access to a front end developer, I recently discovered you can use HTML to build the entire user interface. There is a Shiny article about it here. This would allow the entire branding and layout to be done in a way that could comply with your company standards if desired. Hope this helps.
I've been working with a bit of a hack for this, (and I know you didn't ask for it, but here's a clickable logo while we're at it):
library(shiny)
library(shinydashboard)
dbHeader <- dashboardHeader()
dbHeader$children[[2]]$children <- tags$a(href='http://mycompanyishere.com',
tags$img(src='logo.png',height='60',width='200'))
dashboardPage(
dbHeader,
dashboardSidebar(),
dashboardBody()
)
So this nests a shiny.tag inside the header. The second slot in this particular shiny object is the logo slot (You'll need a 'logo.png' in your /www/ folder in the app directory)
EDIT:
I just checked, and as of right now, this hack should no longer be necessary, you can insert the html directly from the dashboardHeader function via the title= parameter, (Before, that parameter was enforcing text only),
I think the answer might still be useful as a method to modify existing shiny functions where things ARE hardcoded in though.
Here's the method now:
dashboardPage(
dashboardHeader(title = tags$a(href='http://mycompanyishere.com',
tags$img(src='logo.png')))
or, adding a little more magic to the logo (I also use my logo as a loading bar):
# Takes a location 'href', an image location 'src', a loading gif 'loadingsrc'
# height, width and alt text, and produces a loading logo that activates while
# Shiny is busy
loadingLogo <- function(href, src, loadingsrc, height = NULL, width = NULL, alt = NULL) {
tagList(
tags$head(
tags$script(
"setInterval(function(){
if ($('html').attr('class')=='shiny-busy') {
$('div.busy').show();
$('div.notbusy').hide();
} else {
$('div.busy').hide();
$('div.notbusy').show();
}
},100)")
),
tags$a(href=href,
div(class = "busy",
img(src=loadingsrc,height = height, width = width, alt = alt)),
div(class = 'notbusy',
img(src = src, height = height, width = width, alt = alt))
)
)
}
dashboardBody(
dashboardHeader(title = loadingLogo('http://mycompanyishere.com',
'logo.png',
'loader.gif'),
dashboardSidebar(),
dashboardBody()
)
Here's my hack (put your logo, as has been mentioned before, into a www subdirectory of your app directory).
Because dashboardHeader() expects a tag element of type li and class dropdown, we can pass such elements instead of dropdownMenus:
library(shiny)
library(shinydashboard)
dbHeader <- dashboardHeader(title = "My Dashboard",
tags$li(a(href = 'http://shinyapps.company.com',
icon("power-off"),
title = "Back to Apps Home"),
class = "dropdown"),
tags$li(a(href = 'http://www.company.com',
img(src = 'company_logo.png',
title = "Company Home", height = "30px"),
style = "padding-top:10px; padding-bottom:10px;"),
class = "dropdown"))
server <- function(input, output) {}
shinyApp(
ui = dashboardPage(
dbHeader,
dashboardSidebar(),
dashboardBody()
),
server = server
)