Image drop area
Voog supports custom data fields. You can combine this feature with the Image drop area plugin which is built into Voog. For example you can set an unique cover image for each article or page.
Article image drop area example
<!DOCTYPE html>
<html lang="{{ page.language_code }}">
<head>
<title>Custom data binding example</title>
<link rel="stylesheet" href="{{ site.static_asset_host }}/libs/edicy-tools/latest/edicy-tools.css">
<style>
.cover-image {
display: inline-block;
width: 200px;
height: 300px;
}
.editable-cover-image {
cursor: move;
border: 1px dashed #ccc;
}
.edy-img-drop-area-placeholder {
padding: 113px 5px;
}
.edy-img-drop-area-positionable.over {
background-color: rgba(0,0,0,.2);
}
</style>
</head>
<body>
<h1>{% editable article.title %}</h1>
<div>{% editable article.excerpt %}</div>
<div>{% editable article.body %}</div>
{% if editmode %}
<div id="post-cover-image" class="cover-image editable-cover-image" data-image="{{ article.data.cover_image.url }}" data-dimensions="{{ article.data.cover_image.width }},{{ article.data.cover_image.height }}" data-position="{{ article.data.cover_image.top }},{{ article.data.cover_image.left }}"></div>
{% else %}
<div class="cover-image" style="background-image: url('{{ article.data.cover_image.url }}'); background-position: {{ article.data.cover_image.left }}px {{ article.data.cover_image.top }}px"></div>
{% endif %}
{% editorjsblock %}
<script src='{{ site.static_asset_host }}/libs/edicy-tools/latest/edicy-tools.js'></script>
<script>
(function($) {
var pictureDropArea = new Edicy.ImgDropArea($('#post-cover-image'), {
positionable: true,
change: function(data) {
Edicy.articles.currentArticle.setData({
'cover_image': data
});
}
});
})(Edicy.jQuery);
</script>
{% endeditorjsblock %}
</body>
</html>
Details
At first we add the Voog's editmode tools stylesheet and some custom styles aswell:
<-- Basic styles for Voog's editmode tools -->
{% if editmode %}<link rel="stylesheet" href="{{ site.static_asset_host }}/libs/edicy-tools/latest/edicy-tools.css">{% endif %}
<style>
/* Image container */
.cover-image {
display: inline-block;
width: 200px;
height: 300px;
}
/* Image container styles in editmode. */
.editable-cover-image {
cursor: move;
border: 1px dashed #ccc;
}
/* Image container placeholder text styles in editmode. */
.edy-img-drop-area-placeholder {
padding: 113px 5px;
}
/* Image container hovering styles in editmode. */
.edy-img-drop-area-positionable.over {
background-color: rgba(0,0,0,.2);
}
</style>
Then we add the image container element with the unique ID. There's no need to add the element in the {% else %} block if the image is not meant to be shown on the article page in public mode.
{% if editmode %}
<div id="post-cover-image" class="cover-image editable-cover-image" data-image="{{ article.data.cover_image.url }}" data-dimensions="{{ article.data.cover_image.width }},{{ article.data.cover_image.height }}" data-position="{{ article.data.cover_image.top }},{{ article.data.cover_image.left }}"></div>
{% else %}
<div class="cover-image" style="background-image: url('{{ article.data.cover_image.url }}'); background-position: {{ article.data.cover_image.left }}px {{ article.data.cover_image.top }}px"></div>
{% endif %}
Last thing to add is an {% editorjsblock %} containing the Voog's editmode tools and the droppable image area initiation:
{% editorjsblock %}
<!-- Adds the Voog's editmode tools.-->
<script src='{{ site.static_asset_host }}/libs/edicy-tools/latest/edicy-tools.js'></script>
<script>
(function($) {
// Generates the droppable imagae area in the given HTML element. Element with an ID "post-cover-image" in this example.
var pictureDropArea = new Edicy.ImgDropArea($('#post-cover-image').get(0), {
positionable: true,
// Defines what's going to happen after the image has been dropped.
// Image container automatically adds the dropped image to the container, so there's no need to define that.
change: function(data) {
// Saves the image data to the current article.
Edicy.articles.currentArticle.setData({
'cover_image': data
});
}
});
})(Edicy.jQuery);
</script>
{% endeditorjsblock %}
This image can be also accessed on the blog listing page:
{% for article in articles %}
<h1>{{ article.title}}</h1>
<div>{{ article.excerpt }}</div>
<div class="cover-image" style="background-image: url('{{ article.data.cover_image.url }}'); background-position: {{ article.data.cover_image.left }}px {{ article.data.cover_image.top }}px"></div>
{% endfor %}
Example content page
On content pages everything works almost in the same way. Only diffeneces are that the data should be saved to the page data and output uses the page.data prefix:
{% if editmode %}
<div id="post-cover-image" class="cover-image editable-cover-image" data-image="{{ page.data.cover_image.url }}" data-dimensions="{{ page.data.cover_image.width }},{{ page.data.cover_image.height }}" data-position="{{ page.data.cover_image.top }},{{ page.data.cover_image.left }}">:</div>
{% else %}
<div class="cover-image" style="background-image: url('{{ page.data.cover_image.url }}'); background-position: {{ page.data.cover_image.left }}px {{ page.data.cover_image.top }}px"></div>
{% endif %}
{% editorjsblock %}
<script src='{{ site.static_asset_host }}/libs/edicy-tools/latest/edicy-tools.js'></script>
<script>
(function($) {
// Enables the custom data saving for the current page
var pageData = new Edicy.CustomData({
type: 'page',
id: '{{ page.id }}'
});
var pictureDropArea = new Edicy.ImgDropArea($('#post-cover-image').get(0), {
positionable: true,
change: function(data) {
pageData.set({
'cover_image': data
});
}
});
})(Edicy.jQuery);
</script>
{% endeditorjsblock %}