CODEWITHSUNDEEP
rshiny
Diego
Diego

Reputation: 36146

Adding image to shiny app

I'd like to embed an image to a shiny app on a very particular way.

My app consist of only a sidebarPanel and I would like it to be in the center of the image (imagine like japans flag where my app is the red circle and the image is the white area).

Can something like that be achieved? I believe that chopping the image in 4 and adding a matrix with the pieces is an option, but Im not sure if it can be done.

Thanks, Diego

Upvotes: 2

Views: 929

Answers (1)

Bogdan Rau
Bogdan Rau

Reputation: 625

Simplest way I see it is to use fluidRow and column to add column, then another fluidRow and column within the first one, which is where your sidebar would lie. So, something like this:

fluidRow(
    column( width = 4, 
        fluidRow(
            column( width = 12, 
                ### YOUR CONTENT/INPUTS HERE ###
            )
        )
    )
)

The first column of width 4 essentially creates a column that is 4/12 of the screen (or 1/3) to the left. You can assign a value between 1-12.

When you render your app, find out what the CSS class/ID of that column is, then use CSS to assign a background image.

In the second column, we are specifying a width of 12, which is telling shiny to make that inner column the full width of the outer column.

Upvotes: 3

Related Questions