OpenCms Documentation

Image drag'n'drop

 Show GitHub edit links  Hide GitHub edit links
In OpenCms since: 10.0 Documented since: 10.0 Latest revision for: 10.0 Valid for OpenCms: 13.0

Image drag'n'drop allows you to drag'n'drop images from galleries directly into contents. It eases content editing significantly. Just try the example below.

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

In the above example, we formatted the demo article content. All the image drag'n'drop "magic" is enabled in the formatter via the content.imageDnd[content.value.Image.path] annotations on the <div> that surrounds the <cms:img> tag.

Below you see the formatter used for the above example.

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