Image drag'n'drop
The result
Exchange the image via drag'n'drop. Therefore, click on the Galleries item in the toolbar and choose an image from on of the galleries. Drag it by clicking (and holding) the left mouse button on the
symbol at the picture. Then move, the mouse button still pressed, over the existing image and release the button. That's it.
Image drag'n'drop example

Choose a picture from a gallery and directly drop it in the content to replace the existing image.
Example resources and the interesting spots
/system/modules/com.alkacon.opencms.documentation/formatters/demo/demo-article-image-dnd.jsp
<%@page buffer="none" session="false" taglibs="c,cms" %>
<cms:formatter var="content" val="value" rdfa="rdfa" >
<div style="margin-bottom:30px;" ${not value.Image.isSet?rdfa.Image:""} >
<div class="headline"><h3 ${rdfa.Title}>${value.Title}</h3></div>
<c:if test="${value.Image.isSet}">
<div style="float:left;" ${content.imageDnd[content.value.Image.path]}>
<cms:img src="${value.Image}" height="100" width="300" />
</div>
</c:if>
<div ${content.rdfa.Text}>
${value.Text}
</div>
<div style="clear:left;"></div>
</div>
</cms:formatter>
The annotation must be placed at the <img> tag itself or a surrounding div. It has always the style ${content.imageDnd[<XPath to the schema element of the image>]}
. The path you get via content.value.<ImageElement>.path
. Of course, images can also reside in a nested content.
The drag'n'drop does not work if no image is present before. To use it efficiently, you should add placeholder pictures to your contents by default.