The Image Editor provides various image transformations which are stored in a separate struct property of the document. It also holds the original image data which is never modified - the transformations are applied only when previewing or delivering the image.
The Image Editor uses the same Image Transformation Framework to display the image within the image form as the CAE uses for delivering images to web sites, e.g. within the preview panel. See the Content Application Developer Manual for further details on image transformations.
The
ImageEditorPropertyField
is defined in the
CMPictureForm.exml
of the
Blueprint
and can be defined by using the config properties listed below.
Properties marked with * are mandatory.
Config Property | Type | Description |
---|---|---|
bindTo *
|
ValueExpression
| A property path expression leading to the content Bean whose properties are edited. |
propertyName *
|
String
| The name of the BLOB property containing image data. |
imageSettingsPropertyName *
|
String
| The name of the Struct property containing image transformation data. |
hideIssues
|
Boolean
| If true, no validation issues on this property field are shown. Defaults to false. |
forceReadOnlyValueExpression
|
String
| An optional ValueExpression which makes the component read-only if it is evaluated to true. |
Table 7.3.
ImageEditorPropertyField
Configuration Settings
The
ImageEditorPropertyField
can be configured as follows:
<ie:imageEditorPropertyField bindTo="{config.bindTo}" propertyName="data" imageSettingsPropertyName="localSettings"/>
Example 7.14. Configuring the Image Editor
A crop is a subset of the image with a fixed aspect ratio and minimum size. Crops in the Image Editor are represented by variants. There are two different ways to configure variants: via Spring or as site specific variants directly in the content.
Spring Configuration for Variants
To configure global variants for all
CMPicture
documents, the
mediatransform.xml
has to
be adjusted. Each variant is defined by one
Transformation
which holds all the information for that
variant.
<bean class="com.coremedia.cap.transform.Transformation"> <property name="name" value="large4x3"/> <property name="widthRatio" value="4"/> <property name="heightRatio" value="3"/> <property name="minWidth" value="640"/> <property name="minHeight" value="480"/> <property name="previewWidth" value="400" /> </bean>
Example 7.15. Configuring the variants
The configuration of variants via Spring is the default used by theTransformImageService
.
Site Specific Image Variants
If not all sites should have the same fixed set of image variants, site specific image variants can be configured
via content instead. Thereto a
CMSettings
document named
responsiveImageSettings
with
the struct property
linkedSettings
has to be defined for every site
(see also section "Content Configuration" below).
The feature for site specific variants is disabled by default. To enable it, the property
dynamicVariants
has to be set to
true
in the filetransform-image-service.properties
.
If loading the image variants fails for some reason, e.g. the image is not located within a site,
the default variants configured in the
mediatransform.xml
will be applied instead. It is therefore
recommended to apply all site specific variant configurations to the
mediatransform.xml
as well.
Rendering Site Specific Image Variants
When rendering images, the
TransformImageService
is used to access the variants of an image.
An example for this can be found in theCMPicture.asPreview.jsp
. In this template the
previewWidth
and
previewHeight
attributes of the
Transformation
class are used to calculate the image
size in the preview. If these attributes are not set,
minWidth
and
minHeight
are used instead.
CAE Configuration
For the CAE, the class TransformImageService
is responsible for loading site specific cropping information.
The feature can be enabled by changing/adding the attribute dynamicVariants
to true in the file mediatransform.xml
.
The class part of the Blueprint so it can be customized if necessary.
The TransformImageService
will automatically look up the linked settings of the root channel and search for the "Responsive Image Settings" struct which contains the variant information.
Content Configuration
The "Responsive Image Settings" document not only contains image variants, but also various resolutions which may be used on different devices. The breakpoint values defined in the css for the corresponding theme are used to determine which resolution should be used. With the introduction of site specific image crops, additional struct properties can be configured for variants.
Variant Properties, the following are mandatory:
widthRatio
: minimum integer which defines the width component of the aspect ratioheightRatio
: minimum integer which defines the height component of the aspect ratiominWidth
: the value is used by the Studio to validate the minimum variant width (integer property)minHeight
: the value is used by the Studio to validate the minimum variant height (integer property)
Pre-defined image sizes (resolutions), at least one pair should be defined per variant and must match the aspect ratio:
width
: defines the width of the image (integer property)height
: defines the height of the image (integer property)
Properties for variant and pre-defined image sizes (properties listed within the predefined image size properties will always override the more general variant properties):
gamma
: the default gamma value of the picture (string property with numeric value from 0 to 1)jpegQuality
: the default jpeg quality of the picture (string value with numeric value from 0 to 1)sharpen
: boolean value to enabled/disable sharpening of the pictureremoveMetadata
: boolean value to enabled/disable metadata removal of the transformed image