Blueprints
Blueprints are (JSON) definitions. These definitions contain instructions for the templates and the adapters.
When blueprints are imported (uploaded into Frontender Platform) any referenced blueprints and/or assets (templates, styles, scripts and/or media) may also be included in the extension package.
Container blueprints
Instructions for a single container saved for a future use. Container blueprints may be updated at any time by using the update blueprint functionality in the container settings menu.
Page blueprints
Instructions for a page. Technically, they are identical to a container blueprint definition as a page is in fact also a container. A page blueprint contains a collection of other containers.
Control blueprints
A special kind of blueprint that contains instructions on how to render a field to edit the attributes (values) of a container.
Controls are only used inside Frontender Desktop and are not included in the page
Syntax
Example of a very basic bilingual blueprint. The frontender value will be automatically filled by Frontender once the page is saved.
{
"frontender": null,
"template": "containers/[content_type]/[container_name]/[container_name].html.twig",
"name": {
"en-GB": "Name for Frontender in English",
"fr-FR": "Name for Frontender in French"
},
"description": {
"en-GB": "Description for Frontender in English",
"fr-FR": "Description for Frontender in French"
},
"template_config": {
"config": {
"label": {
"en-GB": "Tab label for Frontender in English",
"fr-FR": "Tab label for Frontender in French"
},
"controls": {
"your_variable_name": {
"label": {
"en-GB": "Field label for Frontender in English",
"fr-FR": "Field label for Frontender in French"
},
"control": "core/text",
"value": ""
}
}
}
},
"containers": []
}Assigning content from an API to a blueprint
This is an example of a content tab to retrieve an image from the Unsplash API:
{
"model": {
"label": {
"en-GB": "Content"
},
"controls": {
"data": {
"value": {
"adapter": "Unsplash",
"model": "Image\\Search",
"id": {
"en-GB": "yXmjBxvkoG4"
}
},
"label": {
"en-GB": "Image"
},
"control": "core/abstract",
"type": "lookup",
"adapters": [
{
"value": "Unsplash",
"label": "Unsplash",
"models": [
{
"value": "Image\\Search",
"label": "Image"
}
]
}
]
}
}
}
}Blueprint snippets
Default properties
Frontender, name and template are required properties. Page will not work when omitted.
{
"frontender": null,
"name": {
"en-GB": ""
},
"description": {
"en-GB": ""
},
"template": "",
"template_config": {}
}Default tabs
Depending on your environment, content is interchangeable with labels.
either
{
"model": {
"label": {
"en-GB": "Content"
},
"controls": {}
},
"labels": {
"label": {
"en-GB": "Labels"
},
"controls": {}
},
"config": {
"label": {
"en-GB": "Settings"
},
"controls": {}
}
}or
{
"model": {
"label": {
"en-GB": "Content"
},
"controls": {}
},
"content": {
"label": {
"en-GB": "Content"
},
"controls": {}
},
"config": {
"label": {
"en-GB": "Settings"
},
"controls": {}
}
}Default config controls
???Model controls
Model configuration for Unsplash used as an example.
{
"model": {
"label": {
"en-GB": "Content"
},
"controls": {
"data": {
"value": {
"adapter": "Unsplash",
"model": "Image\\Search",
"id": {
"en-GB": "E2btrNkRMMI"
}
},
"label": {
"en-GB": "Banner image"
},
"control": "core/abstract",
"type": "lookup",
"adapters": [
{
"value": "Unsplash",
"label": "Unsplash",
"models": [
{
"value": "Image\\Search",
"label": "Image"
}
]
}
]
}
}
}
}Page controls
Basic page configuration contains SEO settings. The user can set SERP values and control robots data.
{
"page_config": {
"seo": {
"label": {
"en-GB": "SEO"
},
"controls": {
"title": {
"value": {
"en-GB": "Page title goes here."
},
"label": {
"en-GB": "Page title"
},
"control": "core/text"
},
"meta_description": {
"value": {
"en-GB": "Meta description information goes here."
},
"label": {
"en-GB": "SERP Description"
},
"control": "core/textarea"
},
"meta_keywords": {
"value": {
"en-GB": "Meta, keywords, are, added, in, here"
},
"label": {
"en-GB": "SERP keywords"
},
"control": "core/textarea"
},
"meta_robots": {
"value": "index, follow",
"label": {
"en-GB": "Indexing"
},
"control": "core/robots"
}
}
}
}
}Nested blueprints example
Basic blueprint with a single child container.
{
"frontender": null,
"template": "containers/[content_type]/[container_name]/[container_name].html.twig",
"name": {
"en-GB": "Name for Frontender in English",
"fr-FR": "Name for Frontender in French"
},
"description": {
"en-GB": "Description for Frontender in English",
"fr-FR": "Description for Frontender in French"
},
"template_config": {
"config": {
"label": {
"en-GB": "Tab label for Frontender in English",
"fr-FR": "Tab label for Frontender in French"
},
"controls": {
"your_variable_name": {
"label": {
"en-GB": "Field label for Frontender in English",
"fr-FR": "Field label for Frontender in French"
},
"control": "core/text",
"value": {
"en-GB": "",
"fr-FR": ""
}
}
}
}
},
"containers": [
{
"frontender": null,
"template": "containers/[content_type]/[blueprint_name]/[container_name]/[container_name].html.twig",
"name": {
"en-GB": "Subcontainer",
"fr-FR": "Subcontainer"
},
"description": {
"en-GB": "Nested blueprints example",
"fr-FR": "Nested blueprints example"
},
"template_config": {
"config": {
"label": {
"en-GB": "Subcontainer configuration",
"fr-FR": "Subcontainer configuration"
},
"controls": {
"control_name": {
"label": {
"en-GB": "Description",
"fr-FR": "Description"
},
"control": "core/textarea",
"value": {
"en-GB": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consectetur enim ut velit lobortis, eget maximus libero feugiat. Aliquam erat volutpat. Nunc euismod mollis nunc, nec cursus ante. Vivamus laoreet rhoncus justo, et sagittis urna placerat a.",
"fr-FR": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consectetur enim ut velit lobortis, eget maximus libero feugiat. Aliquam erat volutpat. Nunc euismod mollis nunc, nec cursus ante. Vivamus laoreet rhoncus justo, et sagittis urna placerat a."
}
}
}
}
},
"containers": []
}
]
}Control config example
???Show/Hide list options
True or false selector. User cannot enter a custom value.
{
"options": [
{
"value": "1",
"label": {
"en-GB": "Show"
}
},
{
"value": "0",
"label": {
"en-GB": "Hide"
}
}
]
}List options
A set of answers, user cannot enter a custom value.
{
"colour_theme": {
"label": {
"en-GB": "Theme colour"
},
"control": "core/list",
"value": "green",
"options": [
{
"value": "green",
"label": {
"en-GB": "Green"
}
},
{
"value": "blue",
"label": {
"en-GB": "Blue"
}
},
{
"value": "lime",
"label": {
"en-GB": "Lime"
}
}
]
}
}Blueprints tips & tricks
- Try to minimise container nesting
- Only one model call is allowed per container - so, if you need an image from the media API and an article from the articles API you will need to code two containers (one for each model).