User avatars

[lpil]

User story

As a user I want to be able to upload a picture to be shown with my content So that I can express myself

As a forum reader I want posts to have avatar pictures with them So I can easily identify individuals in forums

As a user I want images to be appropriately sized and compressed So that the app loads quickly and doesn't use all my data

Technical considerations

Storage

We wish images to load as quickly as possible and to be as cheap to store as possible, so a cloud object store is recommended over backend block stores.

We will need to consider which object store is ideal for us. GCS and S3 are popular options, but there is value in avoiding the complexity of those two cloud platforms. More focused options include Digital Ocean Spaces and BackBlaze B2. Let's do a market scan.

Compression

We want to resize and compress images to be suitable sizes. We may wish to keep the original size (or at least a higher res) so that we can recompress and resize later as needed as we develop new site features.

imagemagick is the most commonly used tool here but it's huge and slow and a massive security risk. I would recommend using the vips project.

Moderation

Pictures can contain bad things! We will need to be able to report and moderate them.

Question: can this be done at any time or only in response to a report? Currently with textual content only a report can be moderated

Reuse

We wish to be able to use the storage and image processing functionality for other image features in future (e.g. uploading pictures in replies).

Acceptance criteria

• [ ] UI has been designed
• [ ] A user can upload an avatar
  • TODO: where from?
• [ ] A moderator can delete a user's avatar
  • TODO: design behaviour here
• [ ] Users can view their own avatar
  • TODO: On a profilepage ? in sidebar? where?
• [ ] Content has author's avatar picture next to their name in forums
• [ ] Avatars are included in reported content in admin report section
• [ ] Images are processed on upload
  • [ ] resized appropriately
  • [ ] correct aspect ratio
  • [ ] smart-crop: entire image is filled, no black bars etc
  • [ ] image compression applied
  • [ ] EXIF metadata is stripped. This is a hard security requirement to prevent harassment and stalking of our users.
• [ ] Images uploaded to object store
  • [ ] Image URLs are not guessable. Use hashes or random strings as file names
• [ ] Images are downloaded directly from image store in UI, NOT via the backend

Optional stretch goal: Images are served by a CDN in front of the object store.

[lpil]

@scripttease @charlottefountaine I've made this ticket to track a feature Al and I have mentioned quite a few times. I think it would make the forums more engaging and competitive with Facebook.

I can share some code from my start-up to get this moving faster.

Would be great to hear what you think of this and any UX ideas.

[lpil]

I'm think backblaze b2 would be a good object store to use here. It's very well priced and is very simple compared to using one of the major clouds, less operational effort and lock-in for us.

It doesn't have a built in CDN but we can add one later such as Fastly if we start to serve a lot of traffic.

It has an S3 compatible API so will be easy to migrate away from in future if we want.

[charlottefountaine]

@lpil Yes I'll make the UX/UI of this a priority. I'll think about:

• How avatars look on forum
• Where people upload those images
• How people upload an image in a post
• What we do about flagging images (what we deem inappropriate) UX/UI work on this will be done by Wednesday (31st March) morning