Bug #19531
closedCV: Cover Image - uploading xl image bug
0%
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
Related issues
Updated by Boone Gorges 10 months ago
- Assignee changed from Boone Gorges to Jeremy Felt
- Target version set to 2.3.1
Thanks for the report!
Updated by Raymond Hoh 10 months ago
- Related to Bug #19550: A few issues/questions around CV editor added
Updated by Raymond Hoh 10 months ago
- File cover-image-modal.gif cover-image-modal.gif 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.
Updated by Colin McDonald 10 months ago
Thanks Ray, adding a few watchers here, and we'll look for Jeremy's thoughts on this.
Updated by scott voth 10 months ago
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/
Updated by Raymond Hoh 10 months ago
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?
Updated by Jeremy Felt 10 months ago
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.
Updated by Raymond Hoh 10 months ago
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.
Updated by scott voth 10 months ago
I tested on cdev and it is working great! Thanks.
Updated by Boone Gorges 10 months ago
- Status changed from New to Staged for Production Release
Updated by Boone Gorges 10 months ago
- Status changed from Staged for Production Release to Resolved