Maintain photo ratio dimensions in attachment viewer web app

1400
9
07-09-2020 09:45 AM
Status: Open
MoniqueMorin-Sauerteig
New Contributor II

I've created an Attachment Viewer web app, with a map focused layout. The photos in the gallery on the side panel become distorted and squished if the photo has a portrait orientation rather than a landscape one.  It makes the whole gallery look messy. 

I think it would be a good idea if the attachments maintained their dimension ratio in the side gallery. I would rather deal with a little blank space on the sides of an image than a distorted image.

Thanks!

Tags (2)
9 Comments
SarahMcDonald_Esri

Hi Monique,

Thanks for leaving this idea for the attachment viewer app. Would it be possible to include the link to the application that you see this behavior for? In the meantime I am going to try and reproduce this behavior on my end. 

Thanks!

Sarah

MoniqueMorin-Sauerteig

Hi Sarah,

My app isn't finished yet, so I haven't made it public yet.  However, you can see the pictures I have attached here for a couple of examples of squished photos.  I have also had the issue of it either squishing the photo or rotating it, but I heard that the unwanted photo rotation is an issue that is already being looked after.

Thanks for taking a look at this.

Monique

RyanLibed

Hi Monique,


Thank you for using the Attachment Viewer configurable app template!

 A temporary solution is to overwrite the gallery item using the custom CSS setting. This setting can be found within the configuration experience's full setup: 'Theme & Layout' > 'Custom CSS'.

Entering this line in the ‘Custom CSS’ input will modify the height of the gallery thumbnail image so the height of the image is not restricted to the thumbnail gallery item:
.esri-map-centric .esri-map-centric__image-thumbnail { height: auto; }

This should fit the image in the gallery item, but as you mentioned there may be bars that surround the image.

This may also cause some images to be larger than the height of the gallery item (200px), which may cause the gallery thumbnail to be cut off. Adjusting the height of the gallery grid item should resolve the issue.


For example:
.esri-map-centric .esri-map-centric__gallery-grid-item { height: 300px; }

An issue has been logged to address this issue as we will be looking into adding a configuration setting to easily modify the styles of the gallery items. 

We appreciate your feedback and please let us know if there's anything else we can do to help. 

Thanks,

Ryan

RyanLibed

Also, if you are still having issues with unwanted photo rotation, would it be possible to post a link to a sample app? The issue should already be addressed with the recent ArcGIS Online 8.2 release on June 30th. 

Ryan

MoniqueMorin-Sauerteig

Hi Ryan,

See the attached for a couple of examples of rotated photos in the Attachment Viewer. Thanks for the suggestion above

to change the CSS setting. I will give that a try.

RyanLibed

Do you happen to know if those images are also rotated incorrectly within the popup in Map Viewer beta?

MoniqueMorin-Sauerteig

They are rotated correctly within the popup in the Map Viewer.

RyanLibed

Okay. Please let me know if you are able to share a sample app once public and we can take a look. 

Thank you, 

Ryan

MarthaRodgers

Amazing!  That worked perfectly!  Thank you!