Maintain photo ratio dimensions in attachment viewer web app

[MoniqueMorin-Sauerteig]

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!

[SarahMcDonald1]

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!