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.

To add an image preview to a template:

The following examples show options for constructing an image preview.

Example 6. Specifying the URL by using a configurable String property

Add an ImagePreview to the cartridge template:

{
    "@description": "${template.description}",
    "@group": "ImageBanner",
    "ecr:createDate": "2016-09-12T17:33:57.256+05:30",
    "@thumbnailUrl": "thumbnail.png",
    "ecr:type": "template",
    "defaultContentItem": {
        "@name": "Image Banner"
    },
    "editorPanel": {
        "editor": "editors/DefaultEditorPanel",
        "children": [
            {
              "editor": "editors/ImagePreview",
              "enabled": true,
              "maxWidth": 700,
              "maxHeight": 100,
              "label": "${property.imageBanner.label}"
            }
        ]
}

Add an url String property to the template:

{
    "@description": "${template.description}",
    "@group": "ImageBanner",
    "ecr:createDate": "2016-09-12T17:33:57.256+05:30",
    "@thumbnailUrl": "thumbnail.png",
    "ecr:type": "template",
    "defaultContentItem": {
        "@name": "Image Banner",
        "url": "category_cameras_gen_1004x225.jpg"
    },
    "editorPanel": {
        "editor": "editors/DefaultEditorPanel",
        "children": [
            {
              "editor": "editors/ImagePreview",
              "enabled": true,
              "maxWidth": 700,
              "maxHeight": 100,
              "urlExpression": "{serverURL}/{url}",
              "label": "${property.imageBanner.label}"
           }
        ]
    },
    "typeInfo": {"url": {"@propertyType": "String"}
}

Add a corresponding StringEditor to the editorPanel, and set the value of propertyName to the url property:

{
    "@description": "${template.description}",
    "@group": "ImageBanner",
    "ecr:createDate": "2016-09-12T17:33:57.256+05:30",
    "@thumbnailUrl": "thumbnail.png",
    "ecr:type": "template",
    "defaultContentItem": {
        "@name": "Image Banner",
        "url": "category_cameras_gen_1004x225.jpg"
    },
    "editorPanel": {
        "editor": "editors/DefaultEditorPanel",
        "children": [
            {
              "editor": "editors/StringEditor",
              "label": "${property.url.label}",
              "propertyName": "url"
            },
            {
              "editor": "editors/ImagePreview",
              "enabled": true,
              "maxWidth": 700,
              "maxHeight": 100,
              "urlExpression": "{serverURL}/{url}",
              "label": "${property.imageBanner.label}"
           }
        ]
    },
    "typeInfo": {"url": {"@propertyType": "String"}
}

Add a serverURL String property to the template:

{
    "@description": "${template.description}",
    "@group": "ImageBanner",
    "ecr:createDate": "2016-09-12T17:33:57.256+05:30",
    "@thumbnailUrl": "thumbnail.png",
    "ecr:type": "template",
    "defaultContentItem": {
        "@name": "Image Banner",
        "url": "category_cameras_gen_1004x225.jpg",
        "serverURL":"http://TRAGHAVA-LAP:8006/ifcr/sites/Discover/media"
    },
    "editorPanel": {
        "editor": "editors/DefaultEditorPanel",
        "children": [
            {
              "editor": "editors/StringEditor",
              "label": "${property.url.label}",
              "propertyName": "url"
            },
            {
              "editor": "editors/ImagePreview",
              "enabled": true,
              "maxWidth": 700,
              "maxHeight": 100,
              "urlExpression": "{serverURL}/{url}",
              "label": "${property.imageBanner.label}"
           }
        ]
    },
    "typeInfo": {"url": {"@propertyType": "String"},
	   "serverURL": {"@propertyType": "String"}}
}

Add a corresponding StringEditor to the editorPanel, and set the value of propertyName to the serverURL property:

{
    "@description": "${template.description}",
    "@group": "ImageBanner",
    "ecr:createDate": "2016-09-12T17:33:57.256+05:30",
    "@thumbnailUrl": "thumbnail.png",
    "ecr:type": "template",
    "defaultContentItem": {
        "@name": "Image Banner",
        "url": "category_cameras_gen_1004x225.jpg",
		      "serverURL":"http://TRAGHAVA-LAP:8006/ifcr/sites/Discover/media"
    },
    "editorPanel": {
        "editor": "editors/DefaultEditorPanel",
        "children": [
            {
              "editor": "editors/StringEditor",
              "enabled": true,
              "label": "${property.serverURL.label}",
              "propertyName": "serverURL"
            },
            {
              "editor": "editors/StringEditor",
              "label": "${property.url.label}",
              "propertyName": "url"
            },
            {
              "editor": "editors/ImagePreview",
              "enabled": true,
              "maxWidth": 700,
              "maxHeight": 100,
              "urlExpression": "{serverURL}/{url}",
              "label": "${property.imageBanner.label}"
            }
        ]
    },
    "typeInfo": {"url": {"@propertyType": "String"},
	   "serverURL": {"@propertyType": "String"}}
}

Add GroupLabel to the editorPanel and set the label.

{
    "@description": "${template.description}",
    "@group": "ImageBanner",
    "ecr:createDate": "2016-09-12T17:33:57.256+05:30",
    "@thumbnailUrl": "thumbnail.png",
    "ecr:type": "template",
    "defaultContentItem": {
        "@name": "Image Banner",
        "url": "category_cameras_gen_1004x225.jpg",
		      "serverURL":"http://TRAGHAVA-LAP:8006/ifcr/sites/Discover/media"
    },
    "editorPanel": {
        "editor": "editors/DefaultEditorPanel",
        "children": [
            {
              "editor": "GroupLabel",
              "label": "${group.image.label}"
            },
            {
              "editor": "editors/StringEditor",
              "enabled": true,
              "label": "${property.serverURL.label}",
              "propertyName": "serverURL"
            },
            {
              "editor": "editors/StringEditor",
              "label": "${property.url.label}",
              "propertyName": "url"
            },
            {
              "editor": "editors/ImagePreview",
              "enabled": true,
              "maxWidth": 700,
              "maxHeight": 100,
              "urlExpression": "{serverURL}/{url}",
              "label": "${property.imageBanner.label}"
            }
        ]
    },
    "typeInfo": {"url": {"@propertyType": "String"},
	   "serverURL": {"@propertyType": "String"}}
}


Copyright © Legal Notices