Problem with Getting an Image to Display Correctly in Story Map

[neiden]

I'm using Map Series Builder to put together a story map. For the first tab, I'd like to use an image. I've tried Google (Picasa) and now Flikr, but the image won't display correctly - it won't center, but is shifted way to the right, so that the right half of the picture is cut off. At first I thought perhaps it was the image size, so I changed it to the suggested 1000x750, that didn't help. A direct URL works, but the picture loses resolution and looks fuzzy.

I attached a screenshot.    

Anyone else have issues with this? What's the solution? 

[DanPatterson_Retired]

*.png files tend to have better color if you can get it in the original form

[neiden]

Dan - thanks for the tip! When I use a direct URL the image centers nicely on the page, but resolution is lost-the color is still good. If I use Google or Flikr, the image shifts way to the right.  

[RobertScheitlin__GISP]

Nichole,

  You will likely get more help once I tag the appropriate space to this thread

Story Maps‌

[DanPatterson_Retired]

Robert... I moved it

[OwenGeo]

Hi Nicole,

Sorry that configuring this image is giving you trouble. Could you share a link to your story (if you can make it public), your Flickr username (you can private message me that info if you prefer, I do NOT need your password), and attach the image here so we can investigate?

What position are you using for the image?

Owen

[neiden]

I tried sending you a PM but got an error saying that I could only message Friends?

[OwenGeo]

Nikki,

I got your message and tried your image from Flickr. It seems to come in fine for me, although it is a bit grainy. Did you resize it to 1000 px before uploading to Flickr? If so, you should not resize before uploading to Flickr and let Flickr handle any resizing for you.

This is what FILL looks like:

This is FIT:

And CENTER:

Are you still seeing something different?

My advice would be that none of these options look great because this image is not very well suited for a Map Series main stage. The text in your description panel will overlap the logo in the middle of the image at most browser sizes/screen resolutions, which is not ideal. And some of the collage photos around the edge are getting cropped out in some positions (so you may see half a fish, etc.).

The best types of images for Map Series main stages are usually single photos (not collages or images with logos/text). If there is a logo in the image, it's best located on one side (rather than the center/middle) so that the descirption panel doesn't overlap it. Another idea would be to put your AZ Trout Challenge logo in the side panel and a nice single photo (or looping vide) in the main stage.

Do you think some of these options would work for your story?

Owen

[neiden]

Hi Owen - Thanks for your help! Your screenshots are a little different than what I see, but that may be due to screen size/resolution. I did resize the image in an attempt to troubleshoot. I'll try your recommended solutions. Is there a recommended image size that's optimal? 

~Nikki  

[OwenGeo]

There isn't a single optimal size, but we recommend resizing images for the main stage down to about 2000px wide (if your original image is larger than that). We also recommend compressing images to 80% quality to further reduce their file size so they load quickly.

Owen