Add a logo to a story map hosted on portal

Question

I'm using the "Basic Story Map". I'm trying to set up the story map and want to add a logo to the upper right-hand corner in the header panel.  I can't find where to add the logo anywhere in the "configure app".  Alternatively, where in the source code would I add the image's url?

Additionally, I'd like to have the app launch with the map legend open.  I'm trying to get this story map completed for our annual report, due next week. Please help!

StephenSylvia · Accepted Answer

As Owen mentioned you should start by downloading the code from Github: Esri/basic-map-storytelling-template-js · GitHub. The first thing you'll need to do is edit the config with your web map. Open the config > default.js file and replace the web map id with your webmap id: basic-map-storytelling-template-js/defaults.js at master · Esri/basic-map-storytelling-template-js · GitHub. While still in this config file, you can change the logo url and associated hyperlink: The logoLink (https://github.com/Esri/basic-map-storytelling-template-js/blob/master/config/defaults.js#L38) can be any valid website url. The will open a new tab when the user clicks on the logo. For the logo itself, replace the logo (basic-map-storytelling-template-js/defaults.js at master · Esri/basic-map-storytelling-template-js · GitHub) with the url to a logo image. This needs to be the direct path or the image file (usually ends in .jpg or .png). If the logo is already hosted, just use the full http:// url. If you need a place to host your logo, just add the image file to the "images" folder and replace "esri-logo.png" with the filename of your logo. To make the make the legend open by default, you will need to make two small changes to the code. First in the index.html file (basic-map-storytelling-template-js/index.html at master · Esri/basic-map-storytelling-template-js · GitHub) you will want to change the "icon-down" class to "icon-up" Change this (line 71)

To this

Finally, in the js > main.js file, remove like 213 basic-map-storytelling-template-js/main.js at master · Esri/basic-map-storytelling-template-js · GitHub. Once you have done this, you can test it and upload it to your server.