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:
Insert an
editors/ImagePreviewelement withineditors/DefaultEditorPanel.Specify attributes for the image preview:
Attribute Description urlExpressionRequired. The source of the image URL. You can construct urlExpressionfrom any number of string properties, or you can enter a static value.maxHeightThe height in pixels of the image preview presented in the Experience Manager interface. The default value is 100.maxWidthThe width in pixels of the image preview presented in the Experience Manager interface. The default value is 300.displayUrlA 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
GroupLabelto indicate to Experience Manager users that these properties are related.
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"}}
}
