Customize images for widgets and shares (opengraph)

[Betree]

Problem

Using the collective's logo for widgets and shares on social networks (opengraph) is a good default, but we're lacking a feature to customize them for users who care about having a dedicated image with the right dimensions.

It is important because we've enforced stricter rules on the new collective page - the logo must be squared and displayed on a white background. This doesn't play nice with the recommendations for image dimensions for OpenGraph.

Regarding widgets, the problem has been described in detail here: https://github.com/opencollective/opencollective/issues/2550

Proposed solution

Frontend

• [ ] Add a section in /edit/images to change the images for the widgets and social networks
• [ ] If a custom opengraph image has been defined, use it to generate og:image in Header

API

I'd argue that we should not blotter the (already big) Collectives table, so I'm advocating for the creation of a new Images table. We may eventually want to migrate the existing image/backgroundImage columns in the future, but that's out of scope for this issue.

Another reason why I think this would be a good solution is that we currently don't store the references to images uploaded in comments or updates in the database. That means that we're not able to programmatically delete the images when they get deleted from the content.

Specs: See https://github.com/opencollective/opencollective/issues/3753

Alternative solution (or MVP?)

A much simpler alternative would be to just use settings with:

• settings.images.opengraphBanner
• settings.images.widgetsLogo

Which doesn't require any change to the API.

---

Following up on https://github.com/opencollective/opencollective/issues/2550 Based on user feedback from:

• https://opencollective.freshdesk.com/a/tickets/2417
• https://opencollective.freshdesk.com/a/tickets/3111

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. We haven't had the time to address it yet, but we want to keep it open. This message is just a reminder for us to help triage issues.

[jdaviescoates]

I'm here because @Betree thought this might also be a nice solution to my own issue #3604 :)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. We haven't had the time to address it yet, but we want to keep it open. This message is just a reminder for us to help triage issues.

[Betree]

I would love to see a solution for that issue as it's preventing many collectives to use their communication assets properly. Unless there's a blocker, I'll try to implement the very simple MVP proposed in the issue so that we can offer a workaround for the collectives that need it.