Adding a cover image and header image to the Story Map Tour Side Panel layout?

[AlisonDavis-Holland]

I do not see where to add a cover image to Story Map Tour Side Panel layout example as seen in the Palm Springs Map Tour. Can you please tell me where to add that?

Also, in adding a header logo the popup instructions say that the image must be a maximum is 250 x 50px. I assume that this is width and height like the Esri logo. But when I upload an image, it appears correctly in the preview box in the popup, but then the esri logo appears for the header when I click apply.

Thanks in advance for your help,

Alison

[AlisonDavis-Holland]

ressinger-esristaff‌ any tips?

[SteveCole]

It looks to me like a 2 slide Cascade Story Map with the Map Tour embedded on the second slide. I don't know how to create the "Click to Start" button at the bottom, though.

[RupertEssinger]

Hi Alison

To add a cover page to a Map Tour using the new 'side panel' layout, first add at least a few of the points in your tour, then click the Organize button. In the dialog that appears, make sure the first place in your tour is the place that has the image and text you want to use in your cover page. Now check the 'Use the first point as a cover page' box in that dialog. 

You won't see your cover page in the Story Map Tour Builder in the same way that it will appear to your readers when they launch your tour. But you will see a blue button called "Cover" that you can click in the builder in order to review or edit the text and image used for your cover page. Once you have defined a cover page for your side panel Map Tour, that cover page configuration will be the first thing you see the next time you launch the Map Tour Builder to edit your tour. To see what your cover page will look like to your readers, click the Share button and either preview or open your tour. It will open in another tab so you can see what your readers will see.

This is a bit hidden but we are using the same logic for cover page option in the new side panel layout in Map Tour that we use for the 'intro' picture option in the original 'three-panel' and 'integrated' layouts in the Map Tour. So if you have an existing Map Tour using one of those two original layouts and it has an 'intro' picture, that intro picture will become the cover page of that tour automatically if you switch it to use the new 'side-panel' layout. 

We have some FAQs about the new 'side-panel' layout for Map Tour starting here in the Story Maps FAQ page.

Rupert 

[RupertEssinger]

Note there are a couple of cosmetic issues you may notice when defining or changing the cover page for a side-panel Map Tour in the builder.

1.

You can't use a video instead of an image for the cover page for a side panel layout. The Story Map Cascade''s cover page supports video but Story Map Tour's cover page doesn't. The Map Tour  Builder will let you select a video, but when you preview or open your tour outside of the builder, you'll notice that it doesn't work. There is a message in the builder saying that video isn't supported but we don't prevent you saving your tour in this case.

2.

If you are using Internet Explorer or Microsoft Edge, when you view the cover page configuration in the Story Map Tour, your image doesn't appear in the Builder: you just see a grey box instead of the image. This looks bad but don't worry because the image will still work, and you'll see it if you preview or open your tour in a new tab. You can replace that image in the Builder with a new one successfully: you just won't see the new image in the builder. We (actually I should really say I) somehow didn't spot that in time to fix it for this first release . We'll look to address this in the next release.

3. 

If your cover page image is defined via a URL link to an image (i.e. a Flickr image or an image on any server that you are referencing via a URL) and you click the little pencil icon in the top left-hand corner of the cover page image to change or review that URL, the URL isn't shown in the little dialog that popups up, Don't worry because that image will still work, and you'll see it if you preview or open your tour in a new tab. You can paste in a different URL to replace that image with a new one successfully too: You just won't see that URL in that dialog the next time you open that. This is not an issue if you are uploading your images directly into the Map Tour Builder. In that case clicking the little pencil icon in the top left-hand corner of the image lets you browse to a different image to upload: it doesn't show you a URL. We'll look to address this in the next release.

Rupert

[RicciLucas]

Hello Rupert,

It seems like you are getting answers to this thread quickly, so I will post my question directly to you.

Is there a way to get back to the cover page once you click on other points? We've been using our cover page as a "splash page" that has our disclaimers, so we would like our viewers to be able to go back to it for reference. 

Thanks.

[Lthomps4]

Hi Rupert, 

Thanks for this post! I am experiencing the grey box described in 3. I have tried opening it in Chrome and Safari and still see the grey box and not my image. If I hit the Image options I can see the image I uploaded, but this is the only place I see the uploaded image. The saved image is 4.9MB, so it should be within the file limits. I do not have an option to use a link or another file type to do a work around. Any suggestions?

[RupertEssinger · Accepted solution]

For the issue you mentioned with the logo you are specifying not 'sticking' and appearing in the header, I'm not able to reproduce that, but that dialog has been known to not correctly apply the inputs. I've noticed that with the Colors tab sometimes not accepting my color picks (when authoring tours with the original layouts, not the side panel, which doesn't support the options in the Colors tab). The workaround is to make sure you click anywhere inside the dialog after specifying your input and before you press Apply. If the issue continues perhaps post the URL of the logo file you are using and we'll test it.

The logo size does mean height and width. That is only a guideline though to indicate the typical size and shape. It will actually a larger image or image with a different shape, so it usually works with any image you enter. For example try this 280x210 image, which is the logo of San Diego's Cafe 222, a UC fav:
https://downloads.esri.com/blogs/places/sandiego/cafe_222_logo.jpg  

Rupert

[AlisonDavis-Holland]

Clicking in the blank space before I hit reply did the trick. Thanks, Rupert!

[RupertEssinger]

Great. You mean "before I hit Apply" I think