Benutzer-Werkzeuge

Webseiten-Werkzeuge


en:webedition:beginners-guide:images

Images

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

Frontend code:

    <we:ifNotEditmode>
        <we:ifNotEmpty name="image" type="image">
            <div class="image">
                <we:img name="image" thumbnail="Article header"/>
            </div>
        </we:ifNotEmpty>
        <div class="text">
            <we:textarea wysiwyg="true" name="content"/>
        </div>
    </we:ifNotEditmode>

Thumbnails

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)

en/webedition/beginners-guide/images.txt · Zuletzt geändert: 2019/02/09 22:23 von Sascha Nemecek

Recent changes RSS feed