Binding custom data to pages
Using Edicy custom data API js-toolkit you can bind any kind of custom data to entire site or each page/article separately. For example you can set an unique background image for each page.
To bind custom data, jQuery and the CustomData.js plugin must be included. To generate a droppable image area, edicyImgDropCatcher.js must be included:
<script src="{{ javascripts_path }}/jquery.min.js"></script> <script src="{{ javascripts_path }}/jquery.customData.js"></script> <script src="{{ javascripts_path }}/imgDropCatcher.js"></script>
Example
<!DOCTYPE html> <html lang="{{ page.language_code }}"> <head> <title>Custom data binding example</title> </head> <body style="background-image: url('{{ page.data.bgimage }}');"> {% content %} {% if editmode %}<div id="drop-area">Drop here!</div>{% endif %} <script src="{{ javascripts_path }}/jquery.min.js"></script> <script src="{{ javascripts_path }}/jquery.customData.js"></script> <script src="{{ javascripts_path }}/imgDropCatcher.js"></script> <script> var pageData = new CustomField({ type: "page", id: {{ page.id }} }); $('#drop-area').imgDropCatcher(); $('#drop-area').on('dropimage', function(event, src) { pageData.set("bgimage", src, { success: function(data) { $('body').css('background-image', 'url("' + data.bgimage + '")'); } }); });
</script> </body> </html>
Details
Current page information (type and id) must be saved into a variable:
var pageData = new CustomField({ type: "page", id: {{ page.id }} });
To edit the custom image, include a droppable area with the unique ID:
{% if editmode %}<div id="drop-area">Drop here!</div>{% endif %}
Initiate drop area:
$('#drop-area').imgDropCatcher();
When image is dropped, save the value to a custom data field named "bgimage" and update the <body> element in real time:
$('#drop-area').on('dropimage', function(event, src) { pageData.set("bgimage", src, { success: function(data) { $('body').css('background-image', 'url("' + data.bgimage + '")'); } }); });
You can output saved custom data value anywhere on your template code:
<body style="background-image: url('{{ page.data.bgimage }}');"></body>