dialog definition: textimage/dialog

component script: textimage/textimage.jsp

Component name

Component listing in the paragraph (parsys component) system (leave as is)

Group, where the component is listed in the sidekick (leave as is)

Parent component for the new component (the standard textimage component)

Leave the textimage/dialog properties unchanged.

Note how textimage/dialog/items has three subnodes, tab1 to tab3, representing the three tabs of the textimage dialog box.

For the first two tabs (tab1 and tab2):

For tab3:

Open the /apps/geometrixx/components/textimage/textimage.jsp script for editing.

We are going to manipulate the style of the <div class="image"> tag, generated by the component, to float the image to the right. It is located in the following area of the code:

    Image img = new Image(resource, "image");
    if (img.hasContent() || WCMMode.fromRequest(request) == WCMMode.EDIT) {
%><div class="image"><%
        img.loadStyleData(currentStyle);

We are going to replace the emphasized code fragment %><div class="image"><% with new code generating a custom style for this tag.

Copy the following code fragment, and replace the %><div class="image"><% line with it:

        // todo: add new CSS class for the 'right image' instead of using
        //       the style attribute
        String style="";
        if (properties.get("imagePosition", "left").equals("right")) {
            style = "style=\"float:right\"";
        }
        %><div <%= style %> class="image"><%

Note that for simplicity we are hard-coding the style to the HTML tag. The proper way to do it would be to add a new CSS class to the application styles and just add the class to the tag in the code in the case of a right-aligned image.

The code fragment, after the change, should look like this (new code emphasized):

    Image img = new Image(resource, "image");
    if (img.hasContent() || WCMMode.fromRequest(request) == WCMMode.EDIT) {
        // todo: add new CSS class for the 'right image' instead of using
        //       the style attribute
        String style="";
        if (properties.get("imagePosition", "left").equals("right")) {
            style = "style=\"float:right\"";
        }
        %><div <%= style %> class="image"><%
        img.loadStyleData(currentStyle);

Save the script to the repository.