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; } } }

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?

StoryMapTroutChallenge.JPG

RobertKrisher_8-1767797145641.png

Vind meer berichten getagd met

Accepted answers

All comments

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‌

BenjaminNeukom_0-1643153864527.png

DanPatterson_Retired

Robert... I moved it

oevans_storymaps

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?

oevans_storymaps

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

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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