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/ImagePreview
element withineditors/DefaultEditorPanel
.Specify attributes for the image preview:
Attribute Description 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 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"}} }