Support translating the og:image on Rosetta sites

[ryelle]

Currently, the Rosetta sites use the same og:image as the main English site, creating a dual-language embed when shared:

In https://github.com/WordPress/wporg-theme-directory/issues/117 we discussed allowing translators to provide an image in their own language.

we could include a Figma file in WordPress profile with the template so that anyone can generate the images in other languages.

I think this is great, I was trying to figure out how to create the featured image for a Japanese news blog on WordPress.org. With the Figma template, I can create the featured image with Japanese translations.

We can make the image translatable by wrapping it in a translation function. We'll want to add some catch that only images hosted by wordpress.org will work (just in case). Translators will need upload access to their home rosetta site (XX.wordpress.org), and can upload the created image there. Then, the translation will be the new image URL.

To do

• [ ] Design: Create the image template
• [ ] Design: Write up documentation for Rosetta on how to create the image (where?)
• [ ] Dev: Finish the above documentation with how to upload it
• [ ] Dev: Make the image URL translatable

Note: I've added this issue to wporg-mu-plugins, but we might need to make the change in each site instead.

[tobifjellner]

Asking translators to learn about Figma and image generation may be a bit tough. Wouldn't it be better to have the title as normal text instead? And come up with some symbols that would mean "Adding stuff to WordPress" without text. For "Pattern", I'd suggest a couple of stamps, slightly lifted to reveal some web page details underneath.

[naokomc]

CopyDoc Text Kit Figma plugin (replacing text using Google Spreadsheet) looked promising but after a quick test I found it was too cumbersome for our purposes (it's a neat plugin for other uses though!).

How about exporting blank background images and letting locale teams edit text on Google Sheets or Canva?

[fcoveram]

I shared a Figma file on the design channel a few days ago that intends to be published on the WordPress's Figma Community profile and used by anyone who wants to translate the OG images.

I pinged some contributors asking for translations of the images included in the file to see whether the design process works similarly to how it is done in Canva. If all goes well, the Japanese version will be included in the file and other future translations might be too through the file version updates.

[nukaga]

I made an attempt to convert English OG images to Japanese. I'll write about what I noticed.

The conversion process mainly involves the following tasks

• Change the font
• Change font size
• Changing the line spacing

As for issues, auto formatting is necessary because the design breaks down when the number of characters increases or decreases. Especially in Japanese, the line break pattern is different from English, be careful of line breaks in the middle of words. Therefore, it would be a good idea to prepare formatting in Figma for communities that can prepare it, such as the Japanese community.

• Have each language community check the samples.
• If there is feedback, reflect it and try to put it into operation.

In this order, I thought it would be a good idea to start with the languages for which formats can be prepared.

Here is the Japanese version of Figma that we tried. https://www.figma.com/design/pA5DLLZkqb7EYtqlMDhLck/Japanese---Open-Graph%E2%80%A8images---Scratchpad-file?node-id=97-147&t=pkmpXAIPRCOur6n9-1