Spacing in story map tour descriptions?

CassandraDixon · ‎05-13-2016

For one of our story maps, we have a description of local stores along with their number, address and web site. Is there a way to space this out in the description? Right now it's just one big block of text. We can't even separate paragraphs.

RupertEssinger · ‎05-13-2016

Hi Cassandra

You can include HTML tags in Story Map Tour captions. Just type them in or include them in caption text that you load in if you are using a CSV file. Can't open your link because it is not shared publicly but I'm guessing that's the app you are using. What Tim is saying is that there are several different Story Map apps we offer: Apps | Story Maps and we need to know which one people are using in order to help out.

Here's an example of a Story Map Tour where HTML was used to format the caption text:

and here are the HTML tags inserted in the captions to format them and add a hyperlink:

Along India Street between Cedar and Hawthorn you'll find almost all of Little Italy's restaurants and shops. One of the newest restaurants is this fish place inside a converted hardware store. You'll never see it empty like in this photo though because it has been jam-packed since day one. The brown wall on the left is covered in tiny model piranha skulls. <a href="http://ironsidefishandoyster.com/" style="color:red" target="_blank">Website</a> <hr>Neighborhood: Little Italy 1654 India Street between Cedar and Date Photo: Courtesy of Ironside Fish and Oyster / Zack Benson

That is more HTML formatting than you probably need but it's a good example of what you can do.

The example above is of course quite a lot of HTML to have to type into every caption, especially if you change your mind afterwards and want to tweak the look! But you can automate this easily. if you don't want to manually enter HTML. I used the Import From CSV function in the Advanced panel in the Story Map Tour's Welcome dialog to automate the process using Microsoft Office Excel. I created an Excel spreadsheet (here's a link that opens it for you to look at) that contains the set of fields that the Map Tour expects, plus some additional fields (DESC, ADDRESS, NEIGHBORHOOD, and PHOTO_CREDIT) that the Map Tour doesn't use but in which I store the various text strings that I want to appear in my DESCRIPTION field, which is the field that the Map Tour uses from the file for each pic's caption. I then used the CONCATENATE function in Excel to define the DESCRIPTION field by concatenating those additional fields together along with text strings containing the HTML tags I want to use.Here's the formula (it is pretty scary looking):

=CONCATENATE(B2," <a href=""",F2,""" style=""color:red"" target=""_blank"">Website</a> <hr>Neighborhood: ",D2," ",C2," Photo: ",I2,"")

but in Excel you just define it once, then fill it down for each row in the table. In this way if you change your mind and want to try out different styling, you can just tweak the formula and re-apply it in your table. Finally save your Excel file, then save it again as a CSV and then upload it into the Map Tour Builder to create your tour. You can try that with the Excel file that I link to above. GIS professionals can also do the same procedure but using a shapefile or feature layer instead of an Excel file to assemble a CAPTION field from various attributes, and then publish a web map containing that layer as a Story Map Tour.

Rupert

PS. For a tip about including hyperlinks in captions, see also this blog post

View solution in original post

TimWitt2 · ‎05-13-2016

What type of story map are you using? In which part of your story map is the description of the stores (popup, section...?

CassandraDixon · ‎05-13-2016

I'm not quite sure how to answer your questions so here's a link the map:

http://arcg.is/1NxD6Xc

There's a description of each store, and no option to space out the text.

RupertEssinger · ‎05-13-2016

Hi Cassandra

You can include HTML tags in Story Map Tour captions. Just type them in or include them in caption text that you load in if you are using a CSV file. Can't open your link because it is not shared publicly but I'm guessing that's the app you are using. What Tim is saying is that there are several different Story Map apps we offer: Apps | Story Maps and we need to know which one people are using in order to help out.

Here's an example of a Story Map Tour where HTML was used to format the caption text:

and here are the HTML tags inserted in the captions to format them and add a hyperlink:

Along India Street between Cedar and Hawthorn you'll find almost all of Little Italy's restaurants and shops. One of the newest restaurants is this fish place inside a converted hardware store. You'll never see it empty like in this photo though because it has been jam-packed since day one. The brown wall on the left is covered in tiny model piranha skulls. <a href="http://ironsidefishandoyster.com/" style="color:red" target="_blank">Website</a> <hr>Neighborhood: Little Italy 1654 India Street between Cedar and Date Photo: Courtesy of Ironside Fish and Oyster / Zack Benson

That is more HTML formatting than you probably need but it's a good example of what you can do.

The example above is of course quite a lot of HTML to have to type into every caption, especially if you change your mind afterwards and want to tweak the look! But you can automate this easily. if you don't want to manually enter HTML. I used the Import From CSV function in the Advanced panel in the Story Map Tour's Welcome dialog to automate the process using Microsoft Office Excel. I created an Excel spreadsheet (here's a link that opens it for you to look at) that contains the set of fields that the Map Tour expects, plus some additional fields (DESC, ADDRESS, NEIGHBORHOOD, and PHOTO_CREDIT) that the Map Tour doesn't use but in which I store the various text strings that I want to appear in my DESCRIPTION field, which is the field that the Map Tour uses from the file for each pic's caption. I then used the CONCATENATE function in Excel to define the DESCRIPTION field by concatenating those additional fields together along with text strings containing the HTML tags I want to use.Here's the formula (it is pretty scary looking):

=CONCATENATE(B2," <a href=""",F2,""" style=""color:red"" target=""_blank"">Website</a> <hr>Neighborhood: ",D2," ",C2," Photo: ",I2,"")

but in Excel you just define it once, then fill it down for each row in the table. In this way if you change your mind and want to try out different styling, you can just tweak the formula and re-apply it in your table. Finally save your Excel file, then save it again as a CSV and then upload it into the Map Tour Builder to create your tour. You can try that with the Excel file that I link to above. GIS professionals can also do the same procedure but using a shapefile or feature layer instead of an Excel file to assemble a CAPTION field from various attributes, and then publish a web map containing that layer as a Story Map Tour.

Rupert

PS. For a tip about including hyperlinks in captions, see also this blog post

CassandraDixon · ‎05-16-2016

That's exactly what we need! But oh my. That seems very complicated. There's no other way to do this?

Sorry the map wasn't public before. It should be now: http://arcg.is/1NxD6Xc

ShaundaDevenport · ‎07-07-2017

I have stumbled across this because I am trying to use HTML tags in my Story Map Tour, and when I copy exactly what you have above and try to save I get the error "Save failed due to an invalid html tag in a name or description"

What am I doing wrong here?

RupertEssinger · ‎05-16-2016

I did get rather carried away

Short version: In the Story Map Tour Builder, type in to define a break in your caption text. Type in another to define a blank line, so:

This will give you:

The Story Map Tour builder currently doesn't have a rich text editor for caption text like the Story Map Journal, etc. but that is on our list to provide.

PS. Your Story Map Tour looks nice. See this blog post for some tips that might help too.

- Rupert

CassandraDixon · ‎05-16-2016

Ah! Much less daunting! Thanks so much Rupert! And we'll definitely check out the blog post. The kids are super proud of this so far.

Thanks again!