Allow images in cards - Githubissues

jkomoros commented 5 years ago

And slide g48845643ff_0_173 should get the feedback loop image

jkomoros commented 4 years ago

This could be quite simple: just a few stylesheets and classes the image can have for positioning, and the images are uploaded to a google cloud storage bucket

jkomoros commented 4 years ago

But could be much more complex: a gallery to enumerate the images available to you from within the editor

jkomoros commented 4 years ago

The simplest is literally just manually upload a picture into a GCS bucket and then copy paste its URL in

jkomoros commented 3 years ago

Cards get a images property that is a map of field_name to array of image objects, which includes a src (partial image URLs) and positioning data. The image URLs are generated by appending the image storage bucket (a GCS bucket) to the url.

Certain fields (body by default) have a imagesAllowed, which means that the UI will show an affordance to add an image. That shows an upload field in a dialog that is also the image picker.

Each image record includes the partial src, as well as position, one of top-left, top-right for now. Those are shown in a little chip in the editor UI with drop downs to change.

Images are uploaded to a separate folder per author. In the future it should be possible to navigate in the file picker to see someone else's images (since all of them are public anyway)

jkomoros commented 3 years ago

The fact that images could take non-trivial time to load complicates the screenshot service ( you ahve to wait for the images onload to fire). It also ideally requires you to size the image so that even before it's loaded it will take up the proper size in the layout.

jkomoros commented 3 years ago

[x] Add images property to cards (maintenance task)
[x] Switching to a card type that doesn't support images should not allow saving
[x] Make sure image sizing code handles errors
[x] Make it so the thing that auto sets image/height handles cases where the images have been changed properly (maybe just lock images?)
[x] Validation for urls, barf on obviously non urls
[x] Don't allow commiting a card if the images don't yet have height/width
[x] Allow a button to add an image that fetches the image from the given URL, raw
[x] Make sure image width/height is set in ems (resize)
[x] modifyCard allows modifying images
[x] Allow editing alt text of image
[x] Upload an image to storage bucket and make sure it works
[x] Security rules shouldn't allow screenshots to be downloaded, but should allow upload to be
[x] Allow gifs to be uploaded
[ ] Switch to only allowing listing of directories for owners or admins
[ ] Have a pending property on image objs so the tag chips render differently while being actively fetched
[ ] When the size is downloaded for an image, set image and height in the same action, not as two separate generic image property set actions
[ ] On a card with images, when the content editable is changed, the img tags are passed through, and (somehow) scrubbed out before being set in the data model. That happens, but almost by accident, we should be more explicit. Noticed while working on #449.
[ ] It's hard to figure out how big an image will be on working notes cards and other cards with font size boosting... you can't tell how big the image is until it's saved. That's not that big of a deal because the card won't be published anyway
[x] Add to README how to set up storage
[x] Make sure screenshotting waits for images
[x] tag-list should have a thing that only renders a button to add, not a drop down (right now it allows you to pick the other images to drop down, but that's nonsensical)
[x] When you add an image to a card, it fetchs the getDownloadURL, the size of the image, etc, live
[ ] Render changed image chips when edited (tag-chips should show using the modified styling for chips that are modified)
[x] Allow modifying alignment for an image, and size
[ ] when a card is opened for editing and there are images without size information that's not already fetching, fetch it (that is, when it was wedged)
[x] Screenshot service waits for images to load
[ ] A file browser to show already-uploaded images in your user bucket
[x] A button upload a new file
[x] Make the imagesLoaded on cardRenderer work even if the element has been updated in between
[x] Add a manual TODO for needs diagram
[x] A file browser dialog to browse all uploads from this user
[ ] Only modify the parts of images block that changed in modifyCard, not the whole images block
[x] Add an original link (a kind of citation)
[ ] Figure out a proper way to do citations for images
[x] A way to swap out image files without losing the rest of the meta data
[x] Test security rules
[ ] Allow clicking on an image in the card to edit its properties
[ ] Add caption ability to images
[ ] Preload images for all cards in the current collection (after loading the active card) so that when you swipe between cards you don't see the flash as the image comes in
[ ] Bug: the images are selectable in contenteditable, and you can delete them. But this is just temporary; when you tap out of content editable they come back, and they never pollute the output of the body so 🤷
[x] Test that image storage works in production, that reset-dev works, etc
[ ] A maintenance task to walk through every card and what images it references in uploads, and then delete all of the other images in upload folder (garbage collecting)
[x] Security rules should only allow uploading images, and only up to a certain size
[x] Add cors configuration to an initial setup task in gulp?
[x] Document that you need to install gsutil. (Don't you also need to install gcloud? should gulp set-up-deploy check for those tools?)
[x] Screenshot service should include the images field in details for whether the card screenshot is valid anymore
[x] Make edit button in image properties dialog use the small edit icon
[x] A backup task to copy over uploads in reset-dev (https://cloud.google.com/storage/docs/gsutil/commands/rsync)
[ ] Allow users to browse all uploads, not just theirs
[ ] Test that the rsync from prod to dev works. If it does, consider adding '-d' to delete things on the other side that don't match
[ ] When an image is added or removed substantive should be checked
[ ] Allow multiple images floated left to stack under each other somehow
[x] Detect width and height of images (wait for the image in editor mode to load and then readback size)
[x] Don't allow saving a card where the size of the image has not yet loaded
[ ] Allow browsing existing uploaded images
[ ] Some way to crop images
[ ] Allow SVG upload
[ ] Bug: if a card has an image but not yet any body text, the first time the card is highlighted the image won't show up until the contenteditable is refreshed. (This is an edge case related to the nbsp; hack to get focus to move to the empty body, and should be very very rare)
[x] Some way to clean out images that aren't used on any card
[x] A way to reorder images on a card (buttons to nudge item left or right in the image properties dialog)
[ ] A recurring maintenance task to update long-lived srcs from uploadPath (if the getDownloadURL for each one has expired, it can generate another one... how long do those urls last?)
[ ] A way to delete or rename images in the bucket (kind of hard because you have to figure out if any images reference it)
[x] Run maintenance in production
[ ] Show progress bar as image uploads
[x] Allow uploading new images
[x] Images are sized appropriately even before the file loads so layout doesn't change
[x] Add more position properties other than top-left

jkomoros / card-web

Allow images in cards #4