Binding custom data
Voog supports custom data fields. Here is a simple example how to set and save different background color for each page.
Example
<!DOCTYPE html>
<html lang="{{ page.language_code }}">
<head>
<title>Custom data binding example</title>
<style></style>
</head>
<body {% if page.data.bg_color %}style="background-color: {{ page.data.bg_color }};"{% endif %}>
{% if editmode %}
<label for="background-color">Type any (text, HEX, RGB or RGBA) color value here:</label>
<input id="background-color" placeholder="#cccccc" value="{{ page.data.bg_color }}">
{% endif %}
{% editorjsblock %}
<script src='{{ site.static_asset_host }}/libs/edicy-tools/latest/edicy-tools.js'></script>
<script>
(function($) {
var pageData = new Edicy.CustomData({
type: 'page',
id: '{{ page.id }}'
});
$('#background-color').on('input', function() {
bgColor = $(this).val();
$('body').css('background-color', bgColor);
pageData.set('bg_color', bgColor);
});
})(Edicy.jQuery);
</script>
{% endeditorjsblock %}
</body>
</html>
Details
At first we add the inline style for the body element (only if the page has background color data set):
<body {% if page.data.bg_color %}style="background-color: {{ page.data.bg_color }};"{% endif %}>Then we need to add the field, where user can edit the data value:
{% if editmode %}
<label for="background-color">Type any (text, HEX, RGB or RGBA) color value here:</label>
<input id="background-color" placeholder="#cccccc" value="{{ page.data.bg_color }}">
{% endif %}
Last thing to do is to add the {% editorjsblock %} containing the Voog editmode tools and the pageData save logic:
{% editorjsblock %}
<!-- Adds the Voog's editmode tools.-->
<script src='{{ site.static_asset_host }}/libs/edicy-tools/latest/edicy-tools.js'></script>
<script>
(function($) {
// Enables the custom data saving for the current page.
var pageData = new Edicy.CustomData({
type: 'page',
id: '{{ page.id }}'
});
$('#background-color').on('input', function() {
bgColor = $(this).val();
// Updates the background color after the input has been changed.
$('body').css('background-color', bgColor);
// Binds the data to the page after the input has been changed.
pageData.set('bg_color', bgColor);
});
})(Edicy.jQuery);
</script>
{% endeditorjsblock %}
Site and articles
Site
To bind data to entire site, everything works almost in the same way. Only diffeneces are that the data should be saved to the site data and output uses the site.data prefix:
<body {% if site.data.bg_color %}style="background-color: {{ site.data.bg_color }};"{% endif %}>
// Enables the custom data saving for the current site
// (accessible on all pages and articles).
{% editorjsblock %}
var siteData = new Edicy.CustomData({
type: 'site'
// (No need to define the site id here.)
});
siteData.set('bg_color', bgColor);
{% endeditorjsblock %}
Article
To bind data to the blog article, theres no need to define the articleData variable. The output uses article.data prefix:
<body {% if article.data.bg_color %}style="background-color: {{ article.data.bg_color }};"{% endif %}>The data should be saved using the following example:
{% editorjsblock %}
Edicy.articles.currentArticle.setData('bg_color', bgColor);
{% endeditorjsblock %}