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.


  {% if editmode %}<link rel="stylesheet" href="{{ site.static_asset_host }}/libs/edicy-tools/latest/edicy-tools.css">{% endif %}
  <div class="drop-picture" data-image-object="{{ | 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 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
  • 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; => contaioned image height in pixels
  top: number; => image position top shift in pixels (if positionable: true),
  left: number; => image position top shift in pixels (if positionable: true),
  imageSizes: array => containing all image sizes available sorted in ascending width order
  fixed_dimension = "height"/"width" // the dimension that is 100% and does not move if positionable: true

Rendering saved image to template when positionable:true

.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;

<div class="img-wrapper">
<img src="{{ }}" style="top: {{ }}px; left: {{ }}px; max-{{ }}: 100%;"/>