Get a peek at our latest innovations at Sanity Product Day on Dec 8th →

Language Filter

v3 Ready

By Bjørge Næss & Paul Welsh

Helpful user interface for filtering localized fields by language

Field-level translation filter Plugin for Sanity.io

This is a Sanity Studio v2 plugin. For the v3 version, please refer to the v3-branch.

A Sanity plugin that supports filtering localized fields by language

Language Filter UI

What this plugin solves

There are two popular methods of internationalization in Sanity Studio:

  • Field-level translation
    • A single document with many languages of content
    • Achieved by mapping over languages on each field, to create an object
    • Best for documents that have a mix of language-specific and common fields
    • Not recommended for Portable Text
  • Document-level translation
    • A unique document version for every language
    • Joined together by references and/or a predictable _id
    • Best for documents that have unique, language-specific fields and no common content across languages
    • Best for translating content using Portable Text

This plugin adds features to the Studio to improve handling field-level translations.

  • A "Filter Languages" button to show/hide fields in an object of language-specific fields
  • Configuration to set "default" languages which are always visible

For document-level translations you should use the @sanity/document-internationalization plugin.

Installation

yarn add @sanity/language-filter@studio-v2

Next, add "@sanity/language-filter" to sanity.json plugins array:

"plugins": [
  "@sanity/language-filter"
]

Add config file

In order to know what languages are supported, this plugin needs to be set up with a config file that exports a few options.

This config file needs to implement the part part:@sanity/language-filter/config, by adding the following lines to the parts-section of your sanity.json

{
  "name": "part:@sanity/language-filter/config",
  "path": "./parts/languageFilterConfig.js"
}

Here's an example languageFilterConfig.js file:

export default {
  supportedLanguages: [
    {id: 'nb', title: 'Norwegian (Bokmål)'},
    {id: 'nn', title: 'Norwegian (Nynorsk)'},
    {id: 'en', title: 'English'},
    {id: 'es', title: 'Spanish'},
    {id: 'arb', title: 'Arabic'},
    {id: 'pt', title: 'Portuguese'},
    //...
  ],
  // Select Norwegian (Bokmål) by default
  defaultLanguages: ['nb'],
  // Only show language filter for document type `page` (schemaType.name)
  documentTypes: ['page'],
  filterField: (enclosingType, field, selectedLanguageIds) =>
    !enclosingType.name.startsWith('locale') || selectedLanguageIds.includes(field.name),
}
  • supportedLanguages is an array of languages with id and title. If your localized fields are defined using our recommended way described here (https://www.sanity.io/docs/localization), you probably want to share this list of supported languages between this config and your schema.
  • defaultLanguages (optional) is an array of strings where each entry must match an id from the supportedLanguages array. These languages will be listed by default and will not be possible to unselect. If no defaultLanguages is configured, all localized fields will be selected by default.
  • documentTypes (optional) is an array of strings where each entry must match a name from your document schemas. If defined, this property will be used to conditionally show the language filter on specific document schema types. If undefined, the language filter will show on all document schema types.
  • filterField is a function that must return true if the field should be displayed. It is passed the enclosing type (e.g the object type containing the localized fields, the field, and an array of the currently selected language ids.

Studio Version

This plugin is available for Studio v3 and Studio v2.What are studio versions and which do I choose?

Contributors

Other plugins by authors

Asset source for Unsplash
- has 16 likes

Official(made by Sanity team)
v3 Ready

Search photos on Unsplash and insert them directly inside of your Sanity Studio.

Go to Asset source for Unsplash

Mux input
- has 7 likes

v3 Ready

Upload videos to Mux directly from the studio.

Go to Mux input

Code Input
- has 12 likes

Official(made by Sanity team)
v3 Ready

Syntax highlighted editor for code.

Bjørge Næss
Go to Code Input