nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Pictures in story maps

ElmarNazet

Hi all,

I created some story maps and embedded images that are hosted on a web server. Unfortunately not all images and thumb nails will be displayed reliably.

Sometimes only a "camera"-wildcard can be seen instead of the picture. Does it depend on the used web browser, the internet traffic etc?

How can I improve my story maps?

Regards,

Find more posts tagged with

Accepted answers

GregoryL_Azou

Hi,

Your issue with the first image not appearing is not a web server issue. You have enabled the option to use the first point as an introduction slide (the first point isn't present on the Map and user can't get back to that point once you start to navigate the tour) and the picture of that slide is not valid.

To fix it open the builder, click the Intro button and then Change Media

You can disable that option through the Organize dialog.

On a side note, to make your application faster to load please consider this extract from GitHub documentation :

It is crucial for the application performance that your tour points have well-defined thumbnail images. Thumbnail images are used on the bottom carousel and on mobile device. If you choose to host the pictures yourself, you will have to manually create thumbnails of your pictures. Using the full resolution pictures for the thumbnail will result in poor performance. For that reason we strongly recommend that you use an online photo sharing services or a Feature Service in conjunction with the interactive builder that will do that for you. The recommended thumbnail size is 140x93px.

All comments

GregoryL_Azou

Hi,

The placeholder is displayed when your image fail to load. If the same image fail to load consistently this probably mean that the URL you are using or the webserver have a configuration issue. If some images are failing intermittently it's probably a network issue.

Have you compressed your images? Are you using a lower resolution thumbnail and higher resolution main image? You can find some recommendations about picture resolution on GitHub.

We recommend to use Flickr, Picasa or Facebook as a picture storage so you don't have to deal with creating thumbnails yourself.

ElmarNazet

Hello Gregory,

Thanks for your response and telling the recommendations about picture resolution and storage.

My images don't fail to load when I access them direcly on the Typo3 web server and open them via URL in web browser.

I also assume it is a network issue in combination with the web server and the image size.

The images are JPG files and aren't compressed. I inserted the numerous images in my map tours via csv file. Unfortunately we cannot use Flickr, Picasa or Facebook as picture storage, because we don't have such accounts. Despite that I'll try to improve the issue by following the recommendations.

Kind regards,

Elmar

LaurenYee

Could you provide links to your images here ? Perhaps we could troubleshoot.
Make sure to double check your csv file and make sure they are typed in correctly, I had a few issues with naming things wrong in mine!

Another tip that may help is to look into batching in photoshop or similar image editing software - that way you can batch resize your images rather quickly.

ElmarNazet

Hello Lauren,

Here is one example for what I am complaining:

This is the first jpg-image in the storymap below, stored on Typo3 web server, size 1,2 MB:

http://www.baysf.de/fileadmin/user_upload/ArcGIS/weltwald/Storymaps/Pflanzquartiere/Suedoestliche_Mischwaldregion.JPG

This is the appropriate storymap:

https://baysf.maps.arcgis.com/apps/MapTour/index.html?appid=65856a67140b4fefa00bf85e5b37788d&webmap=ac230ecfb5524120aebd4ad06c8894ed

When I open the storymap this first picture won't be rendered "Picture not available".

But after clicking the first thumbnail it will be displayed.

Kind regards,

Elmar

GregoryL_Azou

Hi,

To fix it open the builder, click the Intro button and then Change Media

You can disable that option through the Organize dialog.

On a side note, to make your application faster to load please consider this extract from GitHub documentation :

ElmarNazet

Hello Gregory,

Thanks for the explanation: So I could resolve the issue with the first image not appearing.

Furthermore I intend to create new thumbnail images with lower resolution to improve the perfpormance of my storymaps.

Kind regards,

Elmar

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.