Image Element Type

Here is another story element type, this one for images:

<?xml version="1.0" encoding="UTF-8"?>
<story-element-type xmlns="http://xmlns.escenic.com/2008/content-type"
                    xmlns:ui="http://xmlns.escenic.com/2008/interface-hints"
                    name="image">

    <ui:element-style>image</ui:element-style>

    <ui:label>Image/Gallery</ui:label>
    <ui:icon>photo</ui:icon>
    <ui:priority>700</ui:priority>

    <field name="alignment" type="enumeration" >
      <ui:label>Alignment</ui:label>
      <ui:editor-style>buttons</ui:editor-style>
      <enumeration value="left">
        <ui:label>Left</ui:label>
      </enumeration>
      <enumeration value="center">
        <ui:label>Center</ui:label>
      </enumeration>
      <enumeration value="right">
        <ui:label>Right</ui:label>
      </enumeration>
    </field>

    <field name="caption" type="basic" mime-type="text/plain">
      <ui:label>Caption</ui:label>
    </field>
    <field name="copyright" type="basic" mime-type="text/plain">
      <ui:label>Copyright</ui:label>
    </field>

    <field name="relation" type="link">
        <relation>com.escenic.content-item</relation>
        <constraints>
            <allow-content-types>
                <ref-content-type name="picture"/>
            </allow-content-types>
          <required>true</required>
        </constraints>
        <ui:search-filter-name>image-search-filter</ui:search-filter-name>
    </field>
</story-element-type>

Elements of this type consist of three fields:

• The first field is labelled Alignment and is rendered as three buttons, one for each possible value.

• The second field is labelled Caption and may contain plain text (type="basic" mime-type="text/plain"), which in this case may not be formatted since no ui:annotation elements are specified.

• The third field has no label and is a rendered in CUE as a drop zone to which an image may be added.

type="link" means that the third field can only contain a link to an object. <relation>com.escenic.content-item</relation> means that it can only contain a link to a CUE content item (not an image dragged from the desktop, for example), and the constraints element narrows things down even further, so that CUE users are only allowed to drop content items of the type picture in this field. <ui:search-filter-name>image-search-filter</ui:search-filter-name> means that the CUE asset picker dialog that can be used to select the image to be added to the field will include a custom search filter called image-search-filter instead of the default search filter. For information on how to create custom search filters, see Custom Search Filter Definitions.

The <ui:element-style>image</ui:element-style> at the top of the definition is an instruction to CUE to treat story elements of this type as image elements.