asset-share-commons icon indicating copy to clipboard operation
asset-share-commons copied to clipboard

Portrait mode assets are cropped in the asset share page

Open ar80001-BRONGA opened this issue 8 years ago • 9 comments

Portrait mode assets are cropped such that only their centers are shown within the asset share page.

Card layout assetsharecardlayout

List layout assetsharelistlayout

ar80001-BRONGA avatar Dec 12 '17 02:12 ar80001-BRONGA

Correct - do you have a better universal solution?

davidjgonzalez avatar Dec 12 '17 02:12 davidjgonzalez

I will try a few things out and suggest a solution if it handles both portrait and landscape images properly. Thanks for the quick response!

ar80001-BRONGA avatar Dec 12 '17 02:12 ar80001-BRONGA

Happy to incorporate - this was the hang that seemed to look best across sizes that we found. We didn’t like variable height cards since they tended to make uneven rows which are hard to scan.

Something we could do as well is add a “thumbnail style” to the results components that supports a few different approaches so users can choose if it’s more important to them.

davidjgonzalez avatar Dec 12 '17 02:12 davidjgonzalez

Hang = best (not edit of comment on phone ;))

davidjgonzalez avatar Dec 12 '17 02:12 davidjgonzalez

I looked into this, and just changing the object-position property from "center" to "top" improves things quite a bit.

Card layout Updated the object-position property from the .ui.cards > .card > .image > img, .ui.card > .image > img style. assetsharecardlayoutfix

List layout Updated the object-position property from the .ui.table tbody tr td.image:not(.ui) img style. assetsharelistlayoutfix

I'm not sure if this change will have implications anywhere else, but it looks pretty good in my local AEM 6.3 SP1 development environment. :-)

ar80001-BRONGA avatar Dec 13 '17 00:12 ar80001-BRONGA

Wonder if this should be configurable... i guess this really depends on the composition of the image. position top looks funny for things that have less content at the top of the image (of course)

image

image

davidjgonzalez avatar Dec 15 '17 20:12 davidjgonzalez

I totally agree about images with less content at the top, and this begs an interesting question my manager had...would it make sense to allocate more of the card real estate to the image and less to the title, data and actions? If this were a viable option it might mitigate the issue if the object-position property were changed from "center" to "top"...thoughts?

ar80001-BRONGA avatar Dec 15 '17 21:12 ar80001-BRONGA

yes that could be a good enhancement to offer a few different thumbnail size options. Not sure if you have seen this @artdirk: https://adobe-marketing-cloud.github.io/asset-share-commons/pages/development/guide/ -> Extend Search Results Renderer. Its fairly easy to create a custom Card / List renderer to add/modify the metadata displayed but could also be used to change the size of the card thumbnail.

godanny86 avatar Dec 16 '17 02:12 godanny86

To allow authors to configure the size.. im wondering how that might look since since we don't have a way to "Author" different views; you just pick the renderer.

image

It seems like the most reasonable option would be to add 2 more options to the above that are

Thumbnail size, Thumbnail position (top, center, bottom, cover, etc.)

Size gets interesting since we can't do pixels since the card and list views thumbs wont be the same height; so we could do a % off whatever is the "default heights" (50%, 100%, 200%, 500% etc) or we could create some arbitrary list of sizes (Small, Medium, Large) and each is set to some predefined height (Not sure what granularity of sizes would make everyone happy - if that's possible)

davidjgonzalez avatar Dec 18 '17 03:12 davidjgonzalez