Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support translating the og:image on Rosetta sites #631

Open
4 tasks
ryelle opened this issue Jun 19, 2024 · 4 comments
Open
4 tasks

Support translating the og:image on Rosetta sites #631

ryelle opened this issue Jun 19, 2024 · 4 comments

Comments

@ryelle
Copy link
Contributor

ryelle commented Jun 19, 2024

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

Screenshot 2024-06-19 at 12 17 57 PM

In WordPress/wporg-theme-directory#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
Copy link

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
Copy link

naokomc commented Jun 28, 2024

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
Copy link
Collaborator

fcoveram commented Jul 8, 2024

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
Copy link

nukaga commented Aug 27, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: On Hold/Blocked
Development

No branches or pull requests

5 participants