Background Picker

Edicy.BgPicker is universal image and color picking tool. To access it you need to add edicy-tools.js to your template.

Example:

<head>
  {% if editmode %}
    <link rel="stylesheet" href="{{ site.static_asset_host }}/libs/edicy-tools/latest/edicy-tools.css">
  {% endif %}
</head>
<body>
  {% if editmode %}
    <button class="bg-settings-toggle" data-bg="{{ page.data.bg | json | escape }}"></button>
  {% endif %}

  {% editorjsblock %}
  <script src='{{ site.static_asset_host }}/libs/edicy-tools/latest/edicy-tools.js'></script>
    <script>
      var bgPicker = new Edicy.BgPicker($('.bg-settings-toggle'), {
        preview: function(data) {
          // data contains image and color info
          // Fired every time color or image is changed
          // Use this for previewing changes to user
        },
        commit: function(data) {
          // Fired when modal is closed
          // Save page.data.bg value here
        }
      });
    </script>
  {% endeditorjsblock %}
</body>

Initiation parameters

picture - defines if picture tab is visible. Default is true.
color - defines if color picker tab is visible. Default is true.
showAlpha - defines if color picker should have the opacity setting. Default is false
preview - Fired every time color or image is changed. Expects a callback function and passes data to its arguments. Intended for previewing changes to user.
commit - Fired when modal is closed. Expects a callback function and passes data to its arguments. Intended for saving color and image data values.
target_width - Defines the actual image that is picked from all generated sizes. Image is picked equal or bigger than the defined parameter if available. Falsy values mean that original image is returned