Content part plugin

Plugin configuration

{
    "id": "io.infomaker.contentpart",
    "name": "im-contentpart",
    "url": "https://plugins.writer.infomaker.io/v1/infomaker/im-contentpart/{PLUGIN_VERSION}/index.js",
    "style": "https://plugins.writer.infomaker.io/v1/infomaker/im-contentpart/{PLUGIN_VERSION}/style.css",
    "enabled": true,
    "mandatory": false,
    "data": {
        "disableTitleAttribute": false,
        "enableTextTypes": false,
        "imageoptions": {
            "softcrop": true,
            "imageinfo": true,
            "crops": {
                "16:9": [16, 9],
                "8:5": [8, 5 ],
                "4:3": [4, 3],
                "1:1": [1, 1]
            }
        },
        "types": [{
                "name": "Fakta",
                "uri": "im://content-part/fact",
                "default": true,
                "enableImage": true,
                "fields": [
                    {
                        "id": "caption",
                        "label": "Caption",
                        "icon": "fa-flag"
                    },
                    {
                        "id": "title"
                    },
                    {
                        "id": "subject"
                    },
                    {
                        "id": "text"
                    },
                    {
                        "id": "alignment",
                        "type": "option",
                        "options": [{
                                "name": "auto",
                                "label": "Automatic",
                                "icon": "fa-align-center"
                            },
                            {
                                "name": "left",
                                "label": "Left",
                                "icon": "fa-align-left"
                            },
                            {
                                "name": "right",
                                "label": "Right",
                                "icon": "fa-align-right"
                            }
                        ]
                    }
                ]
            },
            {
                "name": "Recension",
                "uri": "im://content-part/review",
                "default": false,
                "fields": [{
                        "id": "title",
                        "label": "Betyg 0-5",
                        "icon": "fa-heart"
                    },
                    {
                        "id": "subject",
                        "label": "Recensionstyp",
                        "icon": "fa-flag"
                    },
                    {
                        "id": "text"
                    }
                ]
            },
            {
                "name": "Sammanfattning",
                "uri": "im://content-part/summary",
                "fields": [{
                        "id": "title"
                    },
                    {
                        "id": "subject"
                    }
                ]
            },
            {
                "name": "Bakgrund",
                "uri": "im://content-part/background",
                "fields": [{
                        "id": "title",
                        "icon": "fa-custom-icon"
                    },
                    {
                        "id": "subject",
                        "label": "Custom label for background"
                    },
                    {
                        "id": "customField",
                        "label": "My Custom Field",
                        "type": "datetime"
                    },
                    {
                        "id": "customFieldTwo",
                        "label": "My Second Custom Field"
                    },
                    {
                        "id": "text"
                    }
                ]
            }
        ]
    }
}

Basic Options

Property Type Required Description
types Array true Content part types. See Types Options for configuration
disableTitleAttribute Boolean false Disables rendering of the title-attribute to the NewsML. Default false.
enableUseOfAnnotationTools Boolean false Enable annotation for all fields. Annotion config
enableUseOfAnnotationToolsForFields Array false Enable annotation for specific fields. Specified with id. Annotion config
enableTextTypes Boolean false Enables using text styles other than paragraph in the text field
imageoptions Object false* Describes image options for type. Required if any type has property enableImage === true. See Image Options Configuration

Types Options

{
    "name": "Faktan",
    "uri": "im://content-part/fact",
    "default": true,
    "enableImage": true,
    "imageoptions": {...},
    "fields": [...]
}
Property Type Required Description
name String false The display name of the content part type
uri String true A unique URI to identify the content part type. e.g., "im://content-part/fact"
enableImage Boolean false Enables image upload for the content part type. Default value is false
default Boolean false If the type should be the default content part type. At lease one type should be set as default
fields Array true Fields on the content part type. See Fields Options for configuration
imageoptions Object false Describes image options for type. This will override image options set in Basic Options. See Image Options Configuration

Image Caption Mapping

If a contentpart type has the field caption configured as shown below and enableImage set to true, the caption field will attempt be set using the image's caption-property.

Fields Options

[
    {
        "id": "caption",
        "label": "Caption",
        "icon": "fa-flag"
    },
    {
        "id": "title",
        "icon": "fa-custom-icon"
    },
    {
        "id": "subject",
        "label": "Custom label for background"
    },
    {
        "id": "customField",
        "label": "My Custom Field",
        "type": "datetime"
    },
    {
        "id": "customFieldTwo",
        "label": "My Second Custom Field"
    },
    {
        "id": "alignment",
        "type": "option",
        "options": [
            {
                "name": "auto",
                "label": "Automatic",
                "icon": "fa-align-center"
            },
            {
                "name": "left",
                "label": "Left",
                "icon": "fa-align-left"
            },
            {
                "name": "right",
                "label": "Right",
                "icon": "fa-align-right"
            }
        ]
    },
    { "id": "text" }
]
Property Type Required Description
id String true The name of the field on the node and in the XML output.
label String false Placeholder for field
icon String false Sets icon used for field. Uses FontAwesome icons. e.g., "fa-twitter".
type String false Choose the type of input to use for the field. One of "text", "datetime", "date", "time" or option. Default: "text"
options String false If type=option this field contains the options, i.e. the eligible field values (defined by name, label and `icon``

Image Options Configuration

Image Options Configuration Example:

{
    "imageinfo": true,
    "softcrop": true,
    "crops": {
        "16:9": [16, 9],
        "4:3": [4, 3],
        "1:1": [1, 1]
    },
    "defaultCropMethod": "focal-point",
    "hideDisableCropsCheckbox": true,
    "hideUseFocalPointCheckbox": false
}
Property Type Required Description
imageinfo Boolean false Per default the image can open a dialog with meta data stored on the actual image. This can be disabled by setting imageinfo to false.
softcrop Boolean false The soft crop dialog is hidden by default. Set softcrop to true to enable.
crops Array false* *Required if soft crop dialog is enabled.[br]Expressed as an object of named ratios. The value for each named dimension is an array of the width and height ratio.
defaultCropMethod String false Set what method that should be used in crop tool, default value is soft-crop
hideDisableCropsCheckbox Boolean false Hides the checkbox for disabling automatic crop when set to true, default false.
hideUseFocalPointCheckbox Boolean false Hides the "use focal point" checkbox when set to true, default value is false

Annotation config

Annotations for input fields are disabled by default. Annotations can be enabled for all fields or for specific fields using their "id" value.

This configuration is part of the general options

All fields

{
    "data": {
        "enableUseOfAnnotationTools": true,
        ...
    }
}

Specific fields. Avalible ids is can be found here: Types Options, also editor can be used to enable annotation in the content-editor.

{
    "data": {
        "enableUseOfAnnotationToolsForFields": ["subject", "title"],
        ...
    }
}

Output

The plugin adds an object to the idf (newsItem > contentSet > inlineXML > idf > group).

This is the full output, xml may vary depending on configuration and content.

<object id="MTUwLDE4Miw1NCwxMjc" type="x-im/content-part" title="[Plain-text title]" uuid="778d7968-35e3-4347-b085-c4724ae8c885">
    <data>
        <title>[Title with annotations]</title>
        <subject>Lorem ipsum dolor sit amet, consectetur adipiscing elit</subject>
        <text format="idf">
            <element id="paragraph-273ee570c1469bdf5badeea5f0524166" type="body">Text element here</element>
        </text>
        <customField>2017-01-30T12:00:00+01:00</customField>
        <alignment>right</alignment>
    </data>
    <links>
        <link rel="image" type="x-im/image" uri="im://image/WXuZc-3d9_Iet5x5t3-LT0X4hWE.jpg" uuid="7d6450cd-27a6-589d-a84a-d6bb635cb542">
            <data>
                <width>1080</width>
                <height>1080</height>
            </data>
            <links>
                <link title="16:9" rel="crop" type="x-im/crop" uri="im://crop/0/0.21875/1/0.5625"/>
                <link title="8:5" rel="crop" type="x-im/crop" uri="im://crop/0/0.1875/1/0.625"/>
                <link title="4:3" rel="crop" type="x-im/crop" uri="im://crop/0/0.125/1/0.75"/>
                <link title="1:1" rel="crop" type="x-im/crop" uri="im://crop/0/0/1/1"/>
                <link rel="focal-point" type="x-im/focal-point">
                    <data>
                        <x>123</x>
                        <y>456</y>
                    </data>
                </link>
            </links>
        </link>
        <link uri="im://content-part/background" rel="content-part"/>
    </links>
</object>