Select to view content in your preferred language

Stretched images when embedding Attachment Viewer

881
3
Jump to solution
06-14-2022 04:38 AM
KatyAppleton1
Occasional Contributor II

I have a Story Map within which I want to embed an Attachment Viewer web app. The web app looks great as standalone (first image), but when embedded the images at the left hand side are distorted (second image):

KatyAppleton1_2-1655206616627.png

 

KatyAppleton1_0-1655206561795.png 

 

Is there any way to prevent this? It looks terrible.

0 Kudos
1 Solution

Accepted Solutions
OwenGeo
Esri Notable Contributor

@KatyAppleton1 -- Thanks for contacting us to report this issue you've encountered. This appears to be an issue with the Attachment Viewer app rather that StoryMaps.

If you open an AV app in its own browser tab and make the browser window more narrow, you can see that the thumbnail images on the left don't resize properly and look stretched as you've shown in your screenshot. You didn't provide the link to your app, but I found a similarly-configured public app on ArcGIS Online to test and included a screenshot below of what I observed.

I'll move this post to the Instant Apps board so that team can take a look.

As a workaround, I would recommend using the medium or large block size for the embed in your story since making the frame wider minimizes how stretched the images look when the app is embedded. If that isn't the look you are going for, you can always just link out to the AV app by configuring your embed as a card or adding a link to it in the text of your story so readers can open it in a new browser tab to get the full-page experience.

Screen Shot 2022-06-14 at 8.29.19 AM.jpg

Owen Evans
Lead Product Engineer | StoryMaps

View solution in original post

0 Kudos
3 Replies
OwenGeo
Esri Notable Contributor

@KatyAppleton1 -- Thanks for contacting us to report this issue you've encountered. This appears to be an issue with the Attachment Viewer app rather that StoryMaps.

If you open an AV app in its own browser tab and make the browser window more narrow, you can see that the thumbnail images on the left don't resize properly and look stretched as you've shown in your screenshot. You didn't provide the link to your app, but I found a similarly-configured public app on ArcGIS Online to test and included a screenshot below of what I observed.

I'll move this post to the Instant Apps board so that team can take a look.

As a workaround, I would recommend using the medium or large block size for the embed in your story since making the frame wider minimizes how stretched the images look when the app is embedded. If that isn't the look you are going for, you can always just link out to the AV app by configuring your embed as a card or adding a link to it in the text of your story so readers can open it in a new browser tab to get the full-page experience.

Screen Shot 2022-06-14 at 8.29.19 AM.jpg

Owen Evans
Lead Product Engineer | StoryMaps
0 Kudos
KatyAppleton1
Occasional Contributor II

I'd like to add a further reply for the Instant Apps team - my Attachment Viewer app uses inputs from a Survey123 form. Respondents include an image and this can be any size or orientation. Even when viewed full screen, some images (especially narrow portrait ones) are still stretched. It would be better to take a central section than to try and fit the images to the grid.

My app: https://uea.maps.arcgis.com/apps/instant/attachmentviewer/index.html?appid=455476db28ca4eeb82a6eeb43...

0 Kudos
KatyAppleton1
Occasional Contributor II

Thanks Owen, for moving the post and suggesting workarounds! Adding as a card is a good alternative for now.