Change theme:   

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>