side by side images in R-shiny

Question

I have 11 images. I want to show them in different tabs. one of the images needs to be next to each of the other 10 images. How can I do that in R-Shiny?

Doing the following has two problems:

1. It seems one image cannot be shown more than once, in this case repeated_image which is rendered via renderImage() in the server.R.

2. If I read the need-to-be-repeated image 10 different times with 10 different names, then the other problem is that the following code will place them on top of each other, as opposed to next to each other:

   tabPanel("Some title here", fluidRow(tabBox(tabPanel("Tab 1", imageOutput("image_1"), br(),br(),br(),br(), imageOutput("repeated_image"), height = 700), tabPanel("Tab 2", imageOutput("image_2"), br(), br(), imageOutput("repeated_image"), height=700), width = 12 ) ) )

Any suggestion? Can I do this in server during rendering images? something like

renderImage(image_1, repeated_image)
renderImage(image_2, repeated_image)

Answer 1

I tried the same in very static way where all imageOutput are written separately.

Two ways to put images side by side- TabBox and Column Based.

For Column based I have taken a small picture.128*128 For TabBox you can choose any size picture. Both case you can use width and height parameter to change as per your requirement. Please let me know if that solves your problem. ui.R

library(shiny)
library(shinydashboard)

dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(),
  dashboardBody(
   fluidRow(
     column(1,imageOutput("img1")),
     column(1,imageOutput("img2")),
     column(1,imageOutput("img3")),
     column(1,imageOutput("img4")),
     column(1,imageOutput("img5")),
     column(1,imageOutput("img6")),
     column(1,imageOutput("img7")),
     column(1,imageOutput("img8")),
     column(1,imageOutput("img9")),
     column(1,imageOutput("img10")),
     column(1,imageOutput("img11"))
   ),
   fluidRow(
            tabBox(
              tabPanel("Tab 1",
                   fluidRow(
                      column(6,
                             imageOutput("tabimg1_1")
                             ),
                      column(6,
                             imageOutput("tabimg1_2")
                             )
                   )
                   ),
              tabPanel("Tab 2",imageOutput("tabimg2")),
              tabPanel("Tab 3",imageOutput("tabimg3")),
              tabPanel("Tab 4",imageOutput("tabimg4")),
              tabPanel("Tab 5",imageOutput("tabimg5")),
              tabPanel("Tab 6",imageOutput("tabimg6")),
              tabPanel("Tab 7",imageOutput("tabimg7")),
              tabPanel("Tab 8",imageOutput("tabimg8")),
              tabPanel("Tab 9",imageOutput("tabimg9")),
              tabPanel("Tab 10",imageOutput("tabimg10")),
              tabPanel("Tab 11",imageOutput("tabimg11"))
            )
   )
  )
)

Server.R

    library(shiny)
    library(shinydashboard)


    shinyServer(function(input,output){

    filename <- normalizePath(file.path('./www/images','rstudio.png'))
    tabfilename<-normalizePath(file.path('./www/images','studio logo.jpg'))

    output$img1<-renderImage({
      list(src = filename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)

    output$img2<-renderImage({
      list(src = filename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)


    output$img3<-renderImage({
      list(src = filename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)

    output$img4<-renderImage({
      list(src = filename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)

    output$img5<-renderImage({
      list(src = filename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)

    output$img6<-renderImage({
      list(src = filename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)
    output$img7<-renderImage({
      list(src = filename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)
    output$img8<-renderImage({
      list(src = filename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)
    output$img9<-renderImage({
      list(src = filename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)

    output$img10<-renderImage({
      list(src = filename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)
    output$img11<-renderImage({
      list(src = filename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)


    output$tabimg1_1<-renderImage({
  list(src = tabfilename,
       contentType = 'image/png',
       alt = "This is alternate text")
}, deleteFile = FALSE)

output$tabimg1_2<-renderImage({
  list(src = tabfilename,
       contentType = 'image/png',
       alt = "This is alternate text")
}, deleteFile = FALSE)

    output$tabimg2<-renderImage({
      list(src = tabfilename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)

    output$tabimg3<-renderImage({
      list(src = tabfilename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)

    output$tabimg4<-renderImage({
      list(src = tabfilename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)
    output$tabimg5<-renderImage({
      list(src = tabfilename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)
    output$tabimg6<-renderImage({
      list(src = tabfilename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)
    output$tabimg7<-renderImage({
      list(src = tabfilename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)
    output$tabimg8<-renderImage({
      list(src = tabfilename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)
    output$tabimg9<-renderImage({
      list(src = tabfilename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)
    output$tabimg10<-renderImage({
      list(src = tabfilename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)
    output$tabimg11<-renderImage({
      list(src = tabfilename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)

    })