Bug #19531: CV: Cover Image - uploading xl image bug - CUNY Academic Commons - CUNY Graduate Center - Project Tracking System

Actions

Copy link

Bug #19531

closed

CV: Cover Image - uploading xl image bug

Added by Sara Cannon 3 months ago. Updated 3 months ago.

Status:

Resolved

Priority name:

Normal

Assignee:

Jeremy Felt

Category name:

Target version:

2.3.1

Start date:

2024-01-16

Due date:

% Done:

Estimated time:

Deployment actions:

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

Download all files

Screenshot 2024-01-16 at 12.29.16 AM.png (6.53 MB) Screenshot 2024-01-16 at 12.29.16 AM.png		Sara Cannon, 2024-01-16 01:34 AM
cover-image-modal.gif (732 KB) cover-image-modal.gif		Raymond Hoh, 2024-01-18 04:25 PM

Related issues

Actions

Copy link

Updated by Boone Gorges 3 months ago

Assignee changed from Boone Gorges to Jeremy Felt
Target version set to 2.3.1

Thanks for the report!

Actions

Copy link

Updated by Raymond Hoh 3 months ago

Related to Bug #19550: A few issues/questions around CV editor added

Actions

Copy link

Updated by Raymond Hoh 3 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.

Actions

Copy link

Updated by Colin McDonald 3 months ago

Thanks Ray, adding a few watchers here, and we'll look for Jeremy's thoughts on this.

Actions

Copy link

Updated by scott voth 3 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/

Actions

Copy link

Updated by Raymond Hoh 3 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?

Actions

Copy link

Updated by Jeremy Felt 3 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.

Actions

Copy link

Updated by Raymond Hoh 3 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.

Actions

Copy link