Social media / Open Graph graphics for Scorecards pages

zarino commented 1 year ago

At the very least, we’ll want an updated Open Graph image with the new Action Scorecards branding. Last time round, we used the same image on all pages of the site, including the council pages.

But it would also be good to investigate the possibility of…

1. Individualised Open Graph image for each council page

Could show the council’s name, overall score, and even whether they were a "top scorer" (or whatever) amongst councils of their type. Our research repo does this already, eg: creating a custom OpenGraph image when you link to a paragraph of text. (The research site generates these images in advance, using Selenium to take screenshots of a webpage, as Github does. We could potentially use something like https://github.com/simonw/shot-scraper for this too.)

2. Different Open Graph image for each section page

Could show the section name, and maybe the top few scorers … but which council type? (We could swap the Open Graph image when the user switches between council types on the section page.)

3. Fully DIY "generate and download your own Open Graph image" feature

CEUK point to https://www.greennewdealuk.org/campaigns/green-jobs-take-action/ as an example – where you pick your council from a list, and pre-populates an image (via JavaScript Canvas API) that you can download and share.

Ultimately, this is the same as Option 1, except with the addition that the image is available to download, rather than just being hidden in the Open Graph tags.

4. Custom infographics for CEUK to share manually, on social media

CEUK point to https://cleancitiescampaign.org/ranking-2022-edition/ (scroll down to "Infographics" section) as an example. I guess we could do this. Would need to take a steer from CEUK on what points they want to draw out from the data. So far, they’ve suggested "X council type do better, or councils in X region do better, or X section scores better by X council types/regions".

zarino commented 1 year ago

@lucascumsille Let’s have a chat about this, later this sprint :+1:

zarino commented 1 year ago

Have discussed this with @lucascumsille. I think we have two options:

Option A

@lucascumsille hand-generates a selection of social sharing images, as he did last year. We’d probably change the branding/styling a bit from last year, so it’d probably take about as long as it did last time – around 2 days to settle on the design/layout (with feedback from mySoc and CEUK) and then about a day to churn out all the variations. So 3 days total.

As we did last year, we’d probably have a few "generic" images (not specific to any given council/section) and then customised images for the top scoring councils (showing the council’s name, score, etc) and/or for sections (showing the names and scores of the top scoring councils in the section).

Option B

We create two HTML+CSS based layouts (one for a council, one for a section) that take data straight from the database, and then use something like https://github.com/simonw/shot-scraper to load and screenshot all of those pages automatically. The archive of all images can then be used for manual social sharing, as well as URLs for OpenGraph tags in each page.

We estimate this would probably take about the same time as Option A (2 days for the design, 1 day for the development of the screenshotter) – maybe slightly less.

The up-side with this option is that we’d get images for every council and every section, could easily re-generate images if any scores change late in the process (unlikely), and could re-use all of the code next time we do the Scorecards.

zarino commented 1 year ago

CEUK are happy with Option B. And I think it’s my preferred option too.

zarino commented 1 year ago

I’ve made a start on this in https://github.com/mysociety/caps/pull/559

lucascumsille commented 1 year ago

@zarino Some notes from today's meeting

Council images:

[x] Change copy from "Best section" to "Highest scoring section"
[x] Change copy from "Worst section" to "Lowest scoring section"
[x] Top performer for Highest section
[x] Top performer for overall
[ ] Would be useful if the script that generates the 386 screenshots could group them into folders – first by type of council, then by region – we obviously don’t need the folder structure for the website, but it’ll make the screenshots easier for CEUK to share with councils, campaigners, etc.

Section images:

[ ] Show the section name, the average score for that section (QUESTION: in a specific council type?), and the lowest and highest council score in that section (without showing any council names).

lucascumsille commented 1 year ago

@zarino Just to clarify. Basically we have the following graphs to be done:

[x] Top performers per section
[ ] Top performers for Overall scoring
[x] Council graph (Already done by you)
[x] Static graphics about the scorecards(Last year were called: "How good is your council's Climate Action Plan?")

Do you want me to take over for the design part of the rest or are you currently working on it?

zarino commented 1 year ago

Oops sorry @lucascumsille I missed this question! Yes, please do take over!

zarino commented 1 year ago

@struan finished this off! 🎉 ❤️

lucascumsille commented 2 months ago

Figma here:

https://www.figma.com/design/QhBlsVfmoGpmOgHLYfw50I/Scorecards?node-id=10-2&t=5rHqxw6WtXEVS3Hr-1

mysociety / caps