Bug #19531
closed
CV: Cover Image - uploading xl image bug
Added by Sara Cannon 6 months ago.
Updated 6 months ago.
Description
When uploading a cover image, I tested a large image that is with a vertical orientation. It expanded out of the modal and covered the buttons creating a situation where you are forced to exit the modal because the buttons were covered.
Files
- Assignee changed from Boone Gorges to Jeremy Felt
- Target version set to 2.3.1
- Related to Bug #19550: A few issues/questions around CV editor added
I've added some changes to the cover image modal to detect the size of the cover image preview when it is displayed: https://github.com/cuny-academic-commons/cac/commit/ceebc4601a82d676ddb4a509845d17ce03e84bcc
If the cover image preview height is larger than 50% of the viewport minus 100px (to account for the caption and button height), then the cover image preview will be scrollable. See attached GIF.
This is available for testing on cdev, but isn't live on production yet. Would like Jeremy's thoughts on the technique I used before doing so.
Thanks Ray, adding a few watchers here, and we'll look for Jeremy's thoughts on this.
I am experiencing I think a similar issue - I added a cover image that is very large. It looks great, but I am unable to change it or add image credits, I think because I can't scroll down far enough to do so. See - https://commons.gc.cuny.edu/members/scottvoth/
Scott, I've added a fix for this on cdev. Can you test your cover image there and see if you are able to add a caption?
Thanks everyone! I've just pushed a different approach to 2.3.x in https://github.com/cuny-academic-commons/cac/commit/088c526b698b53370613af27aff2b7e61009b4f1
This replaces the img tag that we were using and uses background-image instead. background-size: cover then keeps it contained in an aspect ratio similar to what is used on the front-end. For most images the preview should be relatively close, though things will appear different the further they get from the 16/5 ratio that we apply.
This replaces the img tag that we were using and uses background-image instead. background-size: cover then keeps it contained in an aspect ratio similar to what is used on the front-end.
That works way better than what I was doing. Thanks Jeremy! For those that want to test, these changes are available for testing on cdev.
I tested on cdev and it is working great! Thanks.
- Status changed from New to Staged for Production Release
- Status changed from Staged for Production Release to Resolved
Also available in: Atom
PDF
