{"id":204,"date":"2018-01-31T14:28:32","date_gmt":"2018-01-31T13:28:32","guid":{"rendered":"http:\/\/candrea.ch\/blog\/?p=204"},"modified":"2018-02-06T10:55:18","modified_gmt":"2018-02-06T09:55:18","slug":"adding-multiple-company-logos-to-shiny-app","status":"publish","type":"post","link":"https:\/\/candrea.ch\/blog\/adding-multiple-company-logos-to-shiny-app\/","title":{"rendered":"Adding multiple Company Logos to Shiny App"},"content":{"rendered":"

If you hava a Shiny app with a sidebar layout there is no easy way to add one or more company logos to the top of the page. You can add a title with the function titlePanel(), that accepts only strings as argument. This function places a h2 tag on the top of the page.<\/p>\n

The idea is to replace this tag with appropriate HTML code. To replace the h2 tag I use the jQuery function replaceWith(). Because the needed code can be very long, I created a separate JavaScript file. The file is added to the shiny app with the function includeScript().<\/p>\n

Make sure to define max-width for the sidebar in ui.R file:<\/p>\n

## shiny app to demonstrate placing multiple company logos in the top of the page\r\nlibrary(shiny)\r\n\r\nshinyUI(fluidPage(\r\n\r\n  titlePanel(\"Company Logos\"), # outputs h2 tag\r\n\r\n  sidebarLayout(\r\n    sidebarPanel(\r\n      tags$head(\r\n        ## define max-width of sidebar panel\r\n        tags$style(type='text\/css', \".col-sm-4 { max-width: 270px; margin-top: 41px;}\"),\r\n        includeScript(\"www\/script.js\")\r\n      ),\r\n      uiOutput(\"sidebar\")\r\n    ),\r\n\r\n    mainPanel(\r\n      tabsetPanel(\r\n        tabPanel(\"tab1\", htmlOutput(\"tab1\")),\r\n        tabPanel(\"tab2\", htmlOutput(\"tab2\")),\r\n        tabPanel(\"tab3\", htmlOutput(\"tab3\"))\r\n      )\r\n  ))\r\n))\r\n<\/pre>\n
The server.R file<\/p>\n
library(shiny)\r\n\r\nshinyServer(function(input, output) {\r\n\r\n   output$sidebar <- renderUI({\r\n     HTML('Sidebar')\r\n   })\r\n   output$tab1 <- renderUI({\r\n    HTML('<h4>Source Code and Explanation:<\/h4>\r\n         <a href=\"https:\/\/candrea.ch\/blog\/adding-multiple-company-logos-to-shiny-app\/\">\r\n         candrea.ch\/blog\/adding-multiple-company-logos-to-shiny-app\/<\/a>\r\n         ')\r\n  })\r\n})\r\n<\/pre>\n
And finaly the script.js file. Please note the css rules for each div tag.<\/p>\n
$( document ).ready(function() {\r\n\r\n    var divstart = '<div style=\"width: 100%; display: table;\">' +\r\n\t                 '<div style=\"display: table-row\">';\r\n    \r\n    \/\/ same with as sidebar, ie. 270px\r\n    var logoLeft = '<div style=\"width: 270px; display: table-cell;position:relative;float:left\">'+\r\n\t                 '<a href=\"https:\/\/5c.careers\/\" target=\"_blank\">' +\r\n\t                 '<img src=\"logoleft.jpg\" height=\"75\" align=\"left\"><\/a><\/div>';\r\n\r\n    var logoRight = '<div style=\"display: table-cell;position:relative;float:left;width:66\\%\">' +\r\n\t                  '<a href=\"https:\/\/www.phsz.ch\/\" target=\"_blank\">' +\r\n\t                  '<img src=\"logoright.jpg\" height=\"60\" align=\"right\" style=\"margin-top:10px\"><\/a><\/div>';\r\n\r\n    var divend = '<\/div><\/div>';\r\n\r\n    $( \"h2\" ).replaceWith( divstart + logoLeft + logoRight + divend );\r\n});<\/pre>\n
You can find the shiny app here: https:\/\/phsz.shinyapps.io\/Shiny_Company_Logo\/<\/a><\/p>\n
Happy Logoing!<\/p>\n","protected":false},"excerpt":{"rendered":"
If you hava a Shiny app with a sidebar layout there is no easy way to add one or more company logos to the top of the page. You can add a title with the function titlePanel(), that accepts only strings as argument. This function places a h2 tag on the top of the page. … Continue reading Adding multiple Company Logos to Shiny App<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,7,5],"class_list":["post-204","post","type-post","status-publish","format-standard","hentry","category-r","tag-company","tag-logo","tag-shiny"],"_links":{"self":[{"href":"https:\/\/candrea.ch\/blog\/wp-json\/wp\/v2\/posts\/204"}],"collection":[{"href":"https:\/\/candrea.ch\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/candrea.ch\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/candrea.ch\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/candrea.ch\/blog\/wp-json\/wp\/v2\/comments?post=204"}],"version-history":[{"count":3,"href":"https:\/\/candrea.ch\/blog\/wp-json\/wp\/v2\/posts\/204\/revisions"}],"predecessor-version":[{"id":207,"href":"https:\/\/candrea.ch\/blog\/wp-json\/wp\/v2\/posts\/204\/revisions\/207"}],"wp:attachment":[{"href":"https:\/\/candrea.ch\/blog\/wp-json\/wp\/v2\/media?parent=204"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/candrea.ch\/blog\/wp-json\/wp\/v2\/categories?post=204"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/candrea.ch\/blog\/wp-json\/wp\/v2\/tags?post=204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}