Adding an Image Preview

An image preview retrieves an image from a URL and displays it in the Experience Manager interface.

You can construct an image preview URL from a hard-coded value, or from any number of String properties. Image preview supports JPEG, GIF, and PNG image formats.

Note

If images are hosted on a different server from Workbench, you may have to configure a cross-domain policy file to enable Flash player to access those resources.

To add an image preview to a template:

  1. Insert an <ImagePreview> element within <BasicContentItemEditor>.

  2. Specify attributes for the image preview:

    AttributeDescription
    urlExpression Required. The source of the image URL. You can construct urlExpression from any number of string properties, or you can enter a static value.
    maxHeight The height in pixels of the image preview presented in the Experience Manager interface. The default value is 100.
    maxWidth The width in pixels of the image preview presented in the Experience Manager interface. The default value is 300.
    displayUrl A Boolean indicating whether to display the resolved URL. The default value is true.

    If you are using more than one string property to compose the URL, you may want to use a <GroupLabel> to indicate to Experience Manager users that these properties are related.

The following examples show options for constructing an image preview.

Example 7. Example: Specifying the URL by using a configurable String property

Add an <ImagePreview> to the cartridge template: 

<ContentTemplate ... >
    <ContentItem>
        <Name>Dimension Navigation</Name>
        ...
    </ContentItem>
    <EditorPanel>
        <BasicContentItemEditor>
            ...
            <ImagePreview
	             urlExpression=""
	             label="Banner Image"
             	maxWidth="200"
	             maxHeight="100" />
            ...
        </BasicContentItemEditor>
    </EditorPanel>
</ContentTemplate>

Add an image_src String property to the template: 

<ContentTemplate ... >
    <ContentItem>
        <Name>Dimension Navigation</Name>
        <Property name="image_src">
            <String/>
        </Property>
    </ContentItem>
    <EditorPanel>
        <BasicContentItemEditor>
            ...
            <ImagePreview
	             urlExpression=""
	             label="Banner Image"
             	maxWidth="200"
	             maxHeight="100" />
            ...
        </BasicContentItemEditor>
    </EditorPanel>
</ContentTemplate>

Add a corresponding <StringEditor> to the <EditorPanel>, and set the value of urlExpression to the image_src property: 

<ContentTemplate ... >
    <ContentItem>
        <Name>Dimension Navigation</Name>
        <Property name="image_src">
            <String/>
        </Property>
    </ContentItem>
    <EditorPanel>
        <BasicContentItemEditor>
            ...
            <StringEditor propertyName="image_src" label="Image name" enabled="true"/>
            <ImagePreview
	             urlExpression="http://localhost:8006/Discover/{image_src}"
	             label="Banner Image"
             	maxWidth="200"
	             maxHeight="100" />
            ...
        </BasicContentItemEditor>
    </EditorPanel>
</ContentTemplate>

Copyright © Legal Notices