Structured Content 2022: Join our conference to explore fresh perspectives on content and digital experiences →

Google Translate

Official(made by Sanity team)

By Rune Botten

Machine translations from Google Translate directly in your Sanity Studio

Sanity + Google Translate = 🤩

This plugin lets you connect Sanity document fields to Google Cloud Translate API, giving you instant machine translations for 108 languages and counting! Enable it for all of them! ...or just the ones you need.

longer demo

Usage

nmp install sanity-plugin-google-translate

Somewhere in your studio you should define a list of the languages you want to support. One of these should be marked as the default language. This will be the base language editors write in. The id field should correspond to the language identifiers Google use.

// languages.js
const languages = [
  {
    id: 'en',
    title: 'English',
    isDefault: true,
  },
  {
    id: 'es',
    title: 'Spanish',
  },
  {
    id: 'fr',
    title: 'French',
  },
];

export default languages

With that in place you use the localizeInput helper from this module to define localized versions of schema types, such as strings, texts or even rich texts.

// localizedString.js
import { localizeInput } from 'sanity-plugin-google-translate';
import languages from "./languages"

const localizedString = localizeInput({
  name: 'localizedString',
  type: {
    // Here is a normal Sanity type definition
    type: 'string',
  },
  languages,
  // This is the Google Cloud Translation API Key
  // Create this at https://console.cloud.google.com/ and see note below on security.
  apiKey: 'AIzaSyAF4ESA6y6uu9LksDenAJk4RagStsM1CTs',
});

export default localizedString;

localizeInput will take your normal Sanity schema field definition, the languages array and api key and produce a localized object field with custom buttons to translate the base language. You may also create corresponding localized versions of text or rich text fields.

You may then use localizedString as any normal schema field in your documents

// demo.js
export default {
  type: 'document',
  name: 'demo',
  fields: [
    {
      type: 'localizedString',
      name: 'title',
      description: 'Title in many languages',
    },
  ],
};

And tying it all together just like any other schema definition on Sanity

import schemaTypes from "all:part:@sanity/base/schema-type";
import createSchema from "part:@sanity/base/schema-creator";
import localizedString from "./localizedString"
import demo from "./demo"

export default createSchema({
  name: "default",
  types: schemaTypes.concat([
    localizedString,
    demo
  ])
});

Portable Text

Here is an example of how you can localize portable text through Google Translate. This module works great for translating the block objects that represent paragraphs in portable text. If you have custom objects in your rich text with texts on those this module cannot reach into it and translate those at this moment.

const richText = {
  type: "array",
  name: "bodyText",
  of: [{ type: "block" }, { type: "image" }, { type: "tweetEmbed" }],
};

const localizedBody = localizeInput({
  type: richText,
  name: "localizedBody",
  languages,
  apiKey,
});

API Key security

By including your Google Cloud Translation API key in the schema definition it becomes part of the Studio bundle which is hosted as static files on webservers. This means someone could find your key, just like they can for google maps api keys etc that you include in other websites. To avoid others using your key you should restrict your key to hosts where your studio runs, like localhost:3333, a sanity.studio or custom domain you may be hosting at.

More info at https://cloud.google.com/docs/authentication/api-keys#adding_http_restrictions

Install command

npm i sanity-plugin-google-translate

Contributor

Other plugins by author

Content Calendar
- has 14 likes

Official(made by Sanity team)

Schedule and view your editorial calendar, right where you store your content. Prioritize and get organized on the fly with a visual calendar in your Studio.

Go to Content Calendar

Bynder

Adds the Bynder Digital Asset Management system to your Studio

Rune Botten
Go to Bynder

Transifex Plugin

Official(made by Sanity team)

A studio tool to send and retrieve translated documents from Transifex!

Go to Transifex Plugin

sanity-plugin-cloudinary

Official(made by Sanity team)

Access and reference images and videos from your Cloudinary account within the Sanity Studio.

Rune Botten
Go to sanity-plugin-cloudinary