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.
Related
I got an app that opens up a modalDialog with an image inside a spsComps::gallery. However, the enlargement works only the first time the modal has been opened. How can this be fixed? Here is a minimal reprex:
library(shiny)
library(spsComps)
ui <- fluidPage(
actionButton("modal", "Open modal")
)
server <- function(input, output, session) {
observeEvent(input$modal,
{
showModal(modalDialog(
title = "test",
fluidRow(gallery(
texts = "Click to enlarge", hrefs = "", image_frame_size = 6,
images = "https://cdn.pixabay.com/photo/2018/07/31/22/08/lion-3576045__340.jpg",
enlarge = TRUE, title = "When you close this modal, the enlargement does not work again",
enlarge_method = "modal"
)),
footer = modalButton("Cerrar"),
easyClose = TRUE,
size = "xl"))
})
}
shinyApp(ui, server)
The first time the modal is opened, you can enlarge the image by clicking it. It looks like this:
However, when you close and then reopen the modal, that enlargement feature is missing.
A temporary fix would be this:
library(shiny)
library(spsComps)
ui <- fluidPage(
actionButton("modal", "Open modal"),
singleton(
div(id = "sps-gallery-modal", class = "gallery-modal",
style="display: none;",
onclick = "galModalClose()", tags$span(class = "gallery-modal-close", "X"),
tags$img(id = "sps-gallery-modal-content",
class = "gallery-modal-content"),
div(class = "gallery-caption")
))
)
server <- function(input, output, session) {
observeEvent(input$modal,
{
showModal(modalDialog(
title = "test",
fluidRow(gallery(
texts = "", hrefs = "", image_frame_size = 6,
images = "https://cdn.pixabay.com/photo/2018/07/31/22/08/lion-3576045__340.jpg",
enlarge = TRUE, title = "When you close this modal, the enlargement does not work again",
enlarge_method = "modal"
)),
footer = modalButton("Cerrar"),
easyClose = TRUE,
size = "xl"))
})
}
shinyApp(ui, server)
The reason is I have this singleton(... in the gallery creation function. There is only one enlarge img container needed to be created no matter how many galleries you have (It's not practical to enlarge two pictures at the same time). So enlarged images from different galleries are displayed inside the same enlarge container. This saves computer resources, and singleton in Shiny is the function to prevent duplication. Even if you may call gallery many times, if the content inside singleton is sent to the DOM tree only once, it will not append it again.
The problem is when showModal is closed, Shiny deletes everything inside the modal, including the gallery singleton content. Meanwhile, I think the singleton content validation stays at R level. It does not actually go search the DOM tree if this content exists or not. So Shiny thinks singleton content is there, and therefore refused to send it to DOM when the second time you call showModal.
The fix above append singleton content to fluidPage container instead of Shiny modal container, so when modal is closed, it cannot delete the content.
This is a universal problem in Shiny when you have singleton and modalDialog. There is nothing I can do to fix Shiny, but I may think of a more user-friendly way in the next spsComps version to address it.
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..
For the shiny app, I changed the Titlepanel settings to create a favicon and window title. However, now I get a number appearing right below the navigation panel.
Here is the code for the UI:
ui <- navbarPage(titlePanel(windowTitle = "Name",
title = tags$head(tags$link(rel = "shortcut icon",
href = "images/image.png",
type="images/image-icon"))),
title = "Name",
selected = "home",
theme = shinytheme("readable"),
fluid = TRUE)
Here is the output
While I do see my favicon and window title, I cannot hide this tab number. What is the way to do this?
I have a blog that uses Netlify. So, if I want to embed an interactive element, I believe I need to use an iframe.
The interactive element I wish to use is a simple image carousel.
library("slickR")
img <- c("img1.png",
"img2.png",
"img3.png",
"img4.png")
slickR(obj = img, slideId = 'ex1', height = 675, width = 540)
To create a stand alone page that just contains an image carousel do I need to use shiny-server to convert the R into css, HTML, Javascript?
If so, here's my attempt. Please advise as to what is wrong.
library(shiny)
library(htmlwidgets)
library(slickR)
ui = fluidPage(
htmlwidgets::shinyWidgetOutput(outputId = , "carousel",
name = "img_carousel",
width = "550px",
height = "600px")
)
server = function(input, output) {
img <- c("img1.png",
"img2.png",
"img3.png",
"img4.png")
slickR_obj <- slickR(obj = img, slideId = 'ex1', width = 540, height = 675)
output$carousel <- htmlwidgets::shinyRenderWidget(slickR_obj)
}
shinyApp(ui = ui, server = server)
Shiny server is required for shiny apps. What you wrote is a shiny app. But you can easily convert it to an rmarkdown document or flexdahsboard, which WILL be just html that can render anywhere. If you aren't familiar with either of these, they're both rstudio packages for creating html reports in R.
Basically, I (think I ) need to know how to assign borderContent to a cObject, when it is a typolink parameter.
To tell the whole story: I'm using perfect lightbox, and I want it to open the lightbox when a text is clicked, and display the images that are in a single content element in the border section.
Looking through the manual, i found this code:
page.20 = TEXT
page.20.value = Open an image in a lightbox
page.20.typolink {
title = This is my caption
parameter.cObject = IMG_RESOURCE
parameter.cObject = fileadmin/image2.jpg
parameter.cObject.file.maxW = 600
parameter.cObject.file.maxH = 600
ATagParams = rel="lightbox[mySet]"
}
which is working fine. But I don't want the path to be hard set, but the content to be loaded from the border section, as I said. But if I try the following:
page.20 = TEXT
page.20.value = Open an image in a lightbox
page.20.typolink {
title = This is my caption
parameter.cObject = IMG_RESOURCE
parameter.cObject < styles.content.getBorder
parameter.cObject.file.maxW = 600
parameter.cObject.file.maxH = 600
ATagParams = rel="lightbox[mySet]"
}
the link is gone.
So I GUESS I'm assigning the content wrong. Somebody knows the answer?
Thanks!
(If of any help, I use automaketemplate..)
Assigning styles.content.getBorder will just assign the full content elements from the border column. This will not get you anywhere.
You will need to manually load the content elements from the border column, of course this can be done with TypoScript. It should be something like this:
page.20 = TEXT
page.20 {
value = Open an image in a lightbox
typolink {
ATagParams = rel="lightbox[mySet]"
title = This will be the title attribute
parameter.cObject = CONTENT
parameter.cObject {
table = tt_content
select {
pidInList = this
where = colPos = 3
}
renderObj = IMG_RESOURCE
renderObj.file {
import = uploads/pics
import.field = image
import.listNum = 0
width = 600
height = 600
}
}
}
}
Basically this will load all content elements on the border position from the current page. Render the first image in the list of images and return you the resource.