Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive

Problems with locale fields Working with localization, and first tried the intl-plugin, but couldn't get it to work, so figured I'd go with standard field level translations...

4 replies
Last updated: Jan 27, 2021
Problems with locale fields
Working with localization, and first tried the intl-plugin, but couldn't get it to work, so figured I'd go with standard field level translations by following the docs, but I can't figure out how to display the correct title for the post in the studio. Right now the title looks like this (image).

I kind of understand how it would work if I followed the docs and had the localized string in the same doc as the page schema, but is there any way I can pass down the title from my localeString.js to my page.js schema type?

Providing my localeString.js as well as my page.js in the thread
Jan 27, 2021, 2:07 PM
localeString.js
const supportedLanguages = [
  { id: 'en', title: 'English', isDefault: true },
  { id: 'se', title: 'Swedish' },
];

export default {
  title: 'Localized string',
  name: 'localeString',
  type: 'object',
  // Fieldsets can be used to group object fields.
  // Here we omit a fieldset for the "default language",
  // making it stand out as the main field.
  fieldsets: [
    {
      title: 'Translations',
      name: 'translations',
      options: { collapsible: true },
    },
  ],
  // Dynamically define one field per language
  fields: supportedLanguages.map((lang) => ({
    title: lang.title,
    name: lang.id,
    type: 'string',
    fieldset: lang.isDefault ? null : 'translations',
  })),
};
--

page.js

import { FaFileAlt } from 'react-icons/fa';

export default {
  name: 'page',
  title: 'Pages',
  type: 'document',
  icon: FaFileAlt,
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'localeString',
    },

    {
      name: 'slug',
      title: 'Slug',
      type: 'slug',
      options: {
        source: 'title',
        maxLength: 96,
      },
    },

    {
      name: 'date',
      title: 'Date',
      type: 'date',
      options: {
        dateFormat: 'YYYY-MM-DD',
        calendarTodayLabel: 'Set current date',
      },
    },

    {
      name: 'pageContent',
      title: 'Content',
      type: 'blockContent',
    },
  ],
};
Jan 27, 2021, 2:08 PM
something like this in page.js

{
   ...,
   preview: {
    select: {
      title: "title.en",
    },
  },
}
Jan 27, 2021, 2:12 PM
Well shit it really was that simple...
Jan 27, 2021, 2:18 PM
Hahaha thanks a ton! Much appreciated
Jan 27, 2021, 2:18 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?