Defining Image Representations
Crop masks can be added to an image content type by adding a basic
field
containing representation
elements to the content type definition in the
content-type
resource.
Here is a simple image content type definition:
<content-type name="image"> <ui:label>Picture</ui:label> <ui:description>An image</ui:description> <ui:title-field>name</ui:title-field> <panel name="default"> <ui:label>Image content</ui:label> <field mime-type="text/plain" type="basic" name="name"> <ui:label>Name</ui:label> <ui:description>The name of the image</ui:description> <constraints> <required>true</required> </constraints> </field> <field mime-type="text/plain" type="basic" name="description"> <ui:label>Description</ui:label> </field> <field mime-type="text/plain" type="basic" name="alttext"> <ui:label>Alternative text</ui:label> </field> <field name="binary" type="link"> <relation>com.escenic.edit-media</relation> <constraints> <mime-type>image/jpeg</mime-type> <mime-type>image/png</mime-type> </constraints> </field> </panel> <summary> <ui:label>Content Summary</ui:label> <field name="caption" type="basic" mime-type="text/plain"/> <field name="alttext" type="basic" mime-type="text/plain"/> </summary> </content-type>
You can add crop mask support by adding a second panel with the following content:
<panel name="crop-masks"> <ui:label>Cropped Versions</ui:label> <field mime-type="application/json" type="basic" name="representations"> <ui:label>Image Versions</ui:label> <rep:representations type="image-versions"> <rep:representation name="thumbnail"> <rep:output width="100" height="100"/> <rep:crop/> <rep:resize/> </rep:representation> <rep:representation name="narrow"> <rep:output width="500" height="400"/> <rep:crop/> <rep:resize/> </rep:representation> <rep:representation name="wide"> <rep:output width="1000" height="800"/> <rep:crop/> <rep:resize/> </rep:representation> </rep:representations> </field> </panel>
Note that the field's mime-type
attribute must be set
to application/json
.
The effect of this addition will be that a "Cropped Versions" panel will now appear in Content Studio when a content item of this type is edited. The panel will display the original image three times, with a red crop mask superimposed on each copy. The Content Studio will be able to move the crop masks around and resize them in order to select the precise image content required. Although the crop masks are sizable, they will retain their defined aspect ratio.
The representation
elements in the above example
belong to the
http://xmlns.escenic.com/2009/representations
namespace. The conventional prefix for this namespace is
rep
, as used in the examples above. In order for
the example to work, the
http://xmlns.escenic.com/2009/representations
must
be declared and assigned to the rep
prefix. You can
do this by adding the attribute
xmlns:rep="http://xmlns.escenic.com/2009/representations"
to the root element of the content-type
resource.
For using crop mask binary field constraints for
mime-type
only supports
image/jpeg
, image/png
and
image/gif
types. As for example,
<constraints> <mime-type>image/jpeg</mime-type> <mime-type>image/png</mime-type> <mime-type>image/gif</mime-type> </constraints>