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

Storymap image options like classic storymaps

Terralytics

The classic version of Storymaps has more options for images than the new storymaps. Especially concerning image placements and functionality I would like to use the following options in the narrative/text panel of the sidecar:

1. Being able to resize images. Now images automatically scale to the full width of the narrative panel

2. Being able to use the image as a link/url. Now it is only possible to show the image at a bigger size and add alternative text.

The screenshot below shows the classic version of storymaps where the functionality is available. As you can see the image is small and clickable.

@OwenGeo (since we discussed this in another topic)

Trouver plus de publications taguées avec

Working with text

Sidecar

Actions

Under Consideration

Status: Under Consideration

Réponses

AnneTetley

We would also like the ability to create links from images to be reinstated as its been quite a useful tool in Story Map Classic.

DanSmith27

Agree with this idea. In my case, a client wanted more custom-looking "buttons"- I thought an easy solution would be to create custom images to use as buttons, but an unable to because of the inability to ad hyperlinks to images.

PatriciaCarbajales-Dale

Completely agree. It's very cumbersome to have an image and have it to rescale back and forward outside of Story Maps until we see that it fits well. Please consider allowing to rescale images within story maps!

PatriciaCarbajales-Dale

Below are two examples from two story maps where the rendering of the images could be better. In the first image, it would be great if somehow I could have both consecutive images take the same space on the screen. The QR code takes too much space and at a maximum, it should be as large on the screen as the Quickcapture screenshot.

On the second one, the buttons are too large. If they took smaller space on the screen, I could stack other images for a better flow.

Two right-aligned images take different space on screenSmall screenshots are too large for screen

PeterKnoop

Relating to @patriciacdale's two great examples above, I wish the StoryMap's Image Editor supported cropping an image to be larger than its original size, and filled in the extra area as transparent.

For the QR code example, my current approach is to make all of the images I use with left- or right-alignment the same width in an external image editor. When that means cropping (not resizing) an image to a larger width than its original width, then the extra area is filled in with transparency. The end result are images that are more appropriately sized relative to each other.

PatriciaCarbajales-Dale

Thank you, Peter. That is great advice. I will do that for sure when I have images without text.

But if one of the images has text (see example of screenshot of police app at the top), trying to make them the same size as others will result in the text too big or too small compared to the text size in the rest of the page.

It would be great to have the flexibility to adjust them as needed.

PeterKnoop

@patriciacdale, yes, the cropping/padding only helps with improving the relative sizing between images. You are still subject to the limitations of the width of your reader's browser window.

It sounds like your goal is to ensure the text in a screenshot is readable when you incorporate the image into a story using the two-column layout.

Given that you don't have control over the width of your reader's browser window, it seems like there would not be a single answer to resizing/scaling the image to keep the text readable for all possible widths.

Maybe another way to achieve the goal could be to specify a minimum display width for an image?

And, if the space available in the reader's browser window for the two-column layout is less than the specified minimum for the image, then StoryMaps would revert to a single-column layout for that section. And, if the browser window is still too narrow, even using the single-column layout, then you would fall back on the reader having to pop-out the image to pan/scroll it at the resolution specified by the minimum width. (StoryMaps already reverts from two-column to single-column when a reader's browser window is narrower than 700 pixels.)

PatriciaCarbajales-Dale

Peter, that makes a lot of sense. Specifying the minimum width display for an image makes sense. It would be great to be able to test it and see how different options come together. I have also had issues with padded white space that breaks the flow between text and images.

Flexibility for dynamic situations would be key. I appreciate how easy it is for authors to create, but it forces to a very specific layout that doesn't work for every single situation, so if you are out of that template, it breaks or makes your work look unprofessional.

Rejoindre la conversation

Connectez-vous pour publier, suivre du contenu, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.