search

Esri / storymap-tour

The Story Map Tour is ideal when you want to present a linear, place-based narrative featuring images or videos.
Apache License 2.0
152 stars 131 forks source link

HTML tags in 'name' field cause thumbnails to disappear. #10

Open jguard-zz opened 10 years ago

jguard-zz commented 10 years ago

Hey Map Tour folks,

When using a CSV file that contains several image references in HTML, the thumbnails stop showing up in MapTour. Here is an example: http://ess.maps.arcgis.com/home/item.html?id=92319df9835541e29b290ced1da51112

However, if I change the name field to remove all HTML tags, all the thumbnails come through (except for a couple unavailable on Flickr): http://ess.maps.arcgis.com/home/item.html?id=8233d94943334d7db60422bc94ee365a

I found in the help that, "Formatting your caption text using HTML tags The header and picture title/caption can include HTML tags to define formatting and links."

So my guess is that all HTML tags are supported as long as the browser supports them? Would you call this specific behavior a bug or is there a better workaround?

Let me know what you think, I am working on this incident in Support Services, you can contact me at jguard@esri.com. Thanks!

glazou commented 10 years ago

Using html tags in CSV works but you have to be vigilant about how you escape html tags. Please take a look at the sample we publish and let me know if you have any question. There is multiple method but quoting the field and double quoting the html tags parameters like in this sample works great.

jguard-zz commented 10 years ago

I was able to work around the issue, but only by moving the HTML tags for images into the 'description' field. From my testing, having multiple img tags in the 'name' field will prevent some thumbnails from displaying. I think this is because the thumbnails get their description information from the 'name' field as well and then have to display all of the HTML. See image:

thumbnailalttag

However, I am not finding full support for HTML img tags in the 'name' field of the data, and not sure if using them in the 'name' field is supported. Thanks.

glazou commented 10 years ago

Have been able to do it using

name,description,icon_color,long,lat,pic_url,thumb_url,is_video
"Test <img src='http://upload.wikimedia.org/wikipedia/commons/thumb/1/11/F1_yellow_flag.svg/512px-F1_yellow_flag.svg.png' width='4px' height='4px'/> test2 <img src='http://upload.wikimedia.org/wikipedia/commons/thumb/1/11/F1_yellow_flag.svg/512px-F1_yellow_flag.svg.png' width='8px' height='8px'/> test3 <img src='http://upload.wikimedia.org/wikipedia/commons/thumb/1/11/F1_yellow_flag.svg/512px-F1_yellow_flag.svg.png' width='12px' height='12px'/> test4","The reserve is managed jointly. The Kendall Frost Mission Bay Reserve is part of the University of California Natural Reserve System (UC NRS) and is managed by the University of California San Diego (UCSD). The adjacent Northern Wildlife Reserve is managed by the City of San Diego. <i><a href=""http://nrs.ucsd.edu/kendall.html"" style=""color:yellow"" target=""_blank"">More Info</a></i>",R,-117.2296755,32.7920955,http://downloads.esri.com/blogs/places/missionbaymarsh/marsh_intro_picture.jpg,http://downloads.esri.com/blogs/places/missionbaymarsh/marsh_intro_picture_thumbnail.jpg,

image

jguard-zz commented 10 years ago

I have also found that this formatting of HTML images will work for a few thumbnails; however, the issue is that the thumbnails stop displaying when img tags exist in the name field. I simply copied your code into a file for 90+ points and you will see that only about 6 of the thumbnails will display:

http://ess.maps.arcgis.com/apps/MapTour/index.html?appid=40b8c31388cb4e7a872b0226fc3e625d&webmap=fb511df1cf0e4dcfa34685a13ecd890c

glazou commented 10 years ago

Ok that's kind of weird but I think I have a lead and will try to get that fixed in the next release. Stay tuned, thanks for reporting.

jguard-zz commented 10 years ago

Yeah, super weird. Thank you!