Editors can always insert images in a WYSIWYG-textarea:
<we:textarea name="content" wysiwyg="true" />
But this leads to "homegrown" and inconsistent layout and can quickly look ugly. A better approach is to define image fields in the template:
An article with an optional image above, as seen by the editor:
<we:ifEditmode> <we:img name="image" thumbnail="Article header"/> <we:textarea wysiwyg="true" name="content" /> </we:ifEditmode>
The above is the editor's view. They can choose an image, which is automatically resized to the size of the pre-defined thumbnail with the name "Article header".
Often, editors just upload any image material straight from the camera. These images are way too large to display them on a website. webEdition lets you define thumbnail formats in various sizes (and filters) for use in various areas on the website: lists, articles, galleries, etc.
The module can be found in "Settings → Thumbnails": Create a new thumbnail with the name "Icon" and give it the width of 240 (pixels). This thumbnail can be used in a listview, e.g.:
<we:listview type="document"> <we:repeat> <we:ifFieldNotEmpty name="image" type="img"> <we:field type="img" name="image" thumbnail="Icon"/> </we:ifFieldNotEmpty> </we:repeat> </we:listview>
⇒ The resized image is displayed.
In the document itself, a larger thumbnail can be used:
<we:img name="image" thumbnail="Article header"/>
(the thumbnail "Article header" has to be defined, of course)