Studio Developer Manual / Version 2201
Table Of Contents
You can localize the display of content types and their properties in terms of
type name, description and icon and in terms of
property names and descriptions.
To this end, the global registry contentTypeLocalizationRegistry
is used. The registration code can be placed in an auto-loaded script as described in
Section 9.1, “General Remarks On Customizing (Multiple) Studio Apps”.
The following figure shows the example of localizing an article and a media content type.
import contentTypeLocalizationRegistry
from "@coremedia/studio-client.cap-base-models/content/contentTypeLocalizationRegistry";
import BlueprintDoctypesDocTypes_properties from "./BlueprintDoctypesDocTypes_properties";
import typeArticle from "./icons/type-article.svg";
import typeMedia from "./icons/type-media.svg";
contentTypeLocalizationRegistry.addLocalization("CMArticle", {
displayName: BlueprintDoctypesDocTypes_properties.CMArticle_displayName,
description: BlueprintDoctypesDocTypes_properties.CMArticle_description,
svgIcon: typeArticle,
properties: {
title: {
displayName: BlueprintDoctypesDocTypes_properties.CMArticle_title_displayName,
description: BlueprintDoctypesDocTypes_properties.CMArticle_title_description,
emptyText: BlueprintDoctypesDocTypes_properties.CMArticle_title_emptyText,
},
detailText: {
displayName: BlueprintDoctypesDocTypes_properties.CMArticle_detailText_displayName,
description: BlueprintDoctypesDocTypes_properties.CMArticle_detailText_description,
emptyText: BlueprintDoctypesDocTypes_properties.CMArticle_detailText_emptyText,
},
},
});
contentTypeLocalizationRegistry.addLocalization("CMMedia", {
displayName: BlueprintDoctypesDocTypes_properties.CMMedia_displayName,
description: BlueprintDoctypesDocTypes_properties.CMMedia_description,
svgIcon: typeMedia,
properties: {
localSettings: {
properties: {
playerSettings: {
properties: {
muted: { displayName:
BlueprintDoctypesDocTypes_properties
.CMMedia_localSettings_playerSettings_muted_displayName },
loop: { displayName:
BlueprintDoctypesDocTypes_properties
.CMMedia_localSettings_playerSettings_loop_displayName },
autoplay: { displayName:
BlueprintDoctypesDocTypes_properties
.CMMedia_localSettings_playerSettings_autoplay_displayName },
hideControls: { displayName:
BlueprintDoctypesDocTypes_properties
.CMMedia_localSettings_playerSettings_hideControls_displayName },
},
},
},
},
alt: {
displayName: BlueprintDoctypesDocTypes_properties.CMMedia_alt_displayName,
description: BlueprintDoctypesDocTypes_properties.CMMedia_alt_description,
emptyText: BlueprintDoctypesDocTypes_properties.CMMedia_alt_emptyText,
},
caption: {
displayName: BlueprintDoctypesDocTypes_properties.CMMedia_caption_displayName,
description: BlueprintDoctypesDocTypes_properties.CMMedia_caption_description,
},
copyright: {
displayName: BlueprintDoctypesDocTypes_properties.CMMedia_copyright_displayName,
description: BlueprintDoctypesDocTypes_properties.CMMedia_copyright_description,
emptyText: BlueprintDoctypesDocTypes_properties.CMMedia_copyright_emptyText,
},
},
});Example 9.16. Localizing document types
For the content type itself and all of its properties, displayName and description can be set. The description is mostly used for tooltips. For properties, an additional emptyText can be specified. As can be seen for the media type localization, it is also possible to localize properties nested in structs and sub-structs. Just as described for labels in Section 9.4, “Localizing Labels”, resource bundles are generally used to localize the content type texts. This allows to comfortably account for multiple locales.
It is possible to localize the same property differently for a content type and its sub-types. If the localization for a concrete type instance is accessed, the localization of the most specific fitting type or super-type is used.
The icon for a content type is given as an SVG icon. For this to work, the module where the localization takes place needs
to have a custom.d.ts file in its root folder with the following content:
declare module "*.svg" {
const content: string;
export default content;
}Example 9.17. Allows the import of SVG icons in a typescript file
CoreMedia Studio works with icon sizes in 16px, 24px or 32px. Despite the scalability of SVG icons, it might happen that an icon looks blurry in some sizes. In addition, it might be that the 16px icon looks slightly different than the 32px version. To fully optimize your icons for the different icon sizes, you can create an SVG that embeds the SVG code for all three sizes as shown for the article type icon in the following example.
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
@media screen {
#small {
display: initial;
}
#medium, #large {
display: none;
}
}
@media screen and (min-width: 24px) {
#small {
display: none;
}
#medium {
display: initial;
}
}
@media screen and (min-width: 32px) {
#medium {
display: none;
}
#large {
display: initial;
}
}
</style>
<svg id="small" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 16 16" enable-background="new 0 0 16 16">
<g>
<rect x="3" y="1" fill="#3D4242" width="10" height="1"/>
<path fill="#3D4242" d="M3,3v12h10V3H3z M11,9H5V5h6V9z"/>
</g>
</svg>
<svg id="medium" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" enable-background="new 0 0 24 24">
<g>
<rect x="4" y="1" fill="#3D4242" width="16" height="2"/>
<path fill="#3D4242" d="M4,4v19h16V4H4z M17,14H7V7h10V14z"/>
</g>
</svg>
<svg id="large" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 32 32" enable-background="new 0 0 32 32">
<g>
<rect x="5" y="1" fill="#3D4242" width="22" height="2"/>
<path fill="#3D4242" d="M5,5v26h22V5H5z M23,19H9V9h14V19z"/>
</g>
</svg>
</svg>
Example 9.18. Content type icon optimized for the sizes 16px, 24px and 32px
The same contentTypeLocalizationRegistry registry that is used to add new content type
localizations can also be used to override existing ones. The method
contentTypeLocalizationRegistry.addLocalization(contentType: string, localization: IContentTypeLocalization)
checks whether an existing localization already exists for the given contentType. If this is the
case, a deep merge of the existing localization and the passed localization is carried out,
giving the latter precedence in case of a conflict.
