<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>
<div class="edy-img-drop-area-placeholder">Drag a new picture here from the files panel.</div>
<div class="edy-img-drop-area-remove-image"></div>
{
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
}
<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>