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

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.io: Get the most out of your content

Sanity.io is a platform to build websites and applications. It comes with great APIs that let you treat content like data. Give your team exactly what they need to edit and publish their content with the customizable Sanity Studio. Get real-time collaboration out of the box. Sanity.io comes with a hosted datastore for JSON documents, query languages like GROQ and GraphQL, CDNs, on-demand asset transformations, presentation agnostic rich text, plugins, and much more.

Don't compromise on developer experience. Join thousands of developers and trusted companies and power your content with Sanity.io. Free to get started, pay-as-you-go on all plans.