Image drop area

Adds functionality for adding image drop catching to user defined element in template. Has an optional functionality for allowing user to re-position image in area with defined size. 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>
  <div class="drop-picture" data-image-object="{{ page.data.image | json | escape }}"></div>
  {% editorjsblock %}
    <script src='{{ site.static_asset_host }}/libs/edicy-tools/latest/edicy-tools.js'></script>
    <script type="text/javascript">
      var pictureDropArea = new Edicy.ImgDropArea($('.drop-picture'), {
        change: function(data) {
          // Save page.data.image data value here
        }
      });
    </script>
  {% endeditorjsblock %}
</body>

Initiation parameters

positionable - Defines if user can re-position image in element if image aspect ratio is different than the aspect of element. It expects element dimentions to be fixed. Default is false
preferRelativePosition - Prefer relative instead of absolute positioning, i.e. use percentage of the corresponding container dimension instead of pixels as top / left shift units.
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 (false, 0, null, undefined) values mean that original image is returned
change - Expects a function and passes data to its arguments. Intended for saving color and image data values here.

placeholder - Template of empty placeholder. Default:

<div class="edy-img-drop-area-placeholder">
  Drag a new picture here from the files panel.
</div>

removeBtn- Template of remove button. Default:

<div class="edy-img-drop-area-remove-image"></div>

Returned data structure

{
  url: string, // image url (original image if target_width option not set)
  width: number, // contained image width in pixels
  height: number, // contained image height in pixels
  top: number, // image top shift (if positionable: true, see `relative_position`)
  left: number, // image left shift (if positionable: true, see `relative_position`)
  imageSizes: array, // containing all image sizes available sorted in ascending width order
  fixed_dimension: string // "height" / "width", the dimension that is 100% and does not move if
                          // positionable: true
  relative_position: boolean // if falsey, `top` and `left` are absolute shifts in pixels,
                             // otherwise relative shifts in percents of the corresponding
                             // container dimension
}

Rendering saved image to template when positionable:true

<style>
  .img-wrapper {
    width: 100px; /* same as drop area in editable mode */
    height: 300px; /* same as drop area in editable mode */
    overflow: hidden;
  }

  .img-wrapper img {
    position: relative;
    max-width: none;
    max-height: none;
  }
</style>

<div class="img-wrapper">
  <img src="{{ page.data.image.url }}" style="top: {{ page.data.image.top }}px; left: {{ page.data.image.left }}px; max-{{ page.data.image.fixed_dimension }}: 100%;"/>
</div>