Image Gallery Plugin

Image Gallery with image preview and toolbox with drag-and-drop support
for sorting images.

Plugin configuration

{
  "id": "io.infomaker.imagegallery",
  "name": "im-imagegallery",
  "url": "https://plugins.writer.infomaker.io/v1/infomaker/im-imagegallery/{PLUGIN_VERSION}/index.js",
  "style": "https://plugins.writer.infomaker.io/v1/infomaker/im-imagegallery/{PLUGIN_VERSION}/style.css",
  "enabled": true,
  "mandatory": false,
  "data": {
    "cropsEnabled": true,
    "imageInfoEnabled": true,
    "downloadEnabled": true,
    "hideDisableCropsCheckbox": false,
    "hideUseFocalPointCheckbox": false,
    "defaultCropMethod": "focal-point",
    "crops": {
      "16:9": [16, 9],
      "8:5": [8, 5],
      "4:3": [4, 3],
      "1:1": [1, 1]
    }
  },
  "propertyMap": {
        "authors": "authors",
        "caption": "text",
        "credit": "credit",
        "alttext": "altText"
   },
   "fields": [
        {
            "name": "caption",
            "label": "Caption",
            "type": "text"
        },
        {
            "name": "credit",
            "label": "Credit",
            "type": "text"
        },
        {
            "name": "alttext",
            "label": "Alt text",
            "type": "text"
        }
    ]
}

Options

Property Type Required Description
cropsEnabled Boolean false The soft crop dialog is hidden by default. Set cropsEnabled to true to enable. Default false.
imageInfoEnabled Boolean false Adds ability to display archive information for image. Set imageInfoEnabled to true to enable. Default false.
downloadEnabled Boolean false Adds ability to download image (original).
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, default value is false
crops Object false *Required if crops is enabled.
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
enableUseOfAnnotationTools Boolean false Enable annotation tool in gallery edit view
fields Array true Additional fields for information to the image. See Fields configuration for configuration

Fields configuration

Required Per default the image gallery plugin only have a byline field in the article. In
addition there are a number of different fields that can be turned on:
caption (expressed as the field text in the NewsML for historic reasons),
alttext, credit . Below is an
example where all the fields are enabled and configured.

"fields": [
    {
        "name": "caption",
        "label": "Caption",
        "type": "text"
    },
    {
        "name": "alttext",
        "label": "Alt text",
        "type": "text"
    },
    {
        "name": "credit",
        "label": "Credit",
        "type": "text"
    }
]

Property Map configuration

Optional When an image is added to the Writer surface, the writer will fetch that image's metadata and fill the image node's properties automatically.

It is possible to configure which metadata fields from the image's newsitem maps to the ximimage node properties.

Mapping of an Image Node property can be disabled by setting its mapped value to false.

Standard Mapping

If not present, these are the default mappings for an Image Node's properties.

Image Node Property Image Meta Property
authors "authors"
credit "credit"
caption "caption"
alttext false
Allowed Property Values

If an Image Node property is mapped to false it will not receive any value.

If the configuration is invalid, the image will use the standard
mapping.

Image Node Property Allowed Properties
authors "authors", false
credit 'text', 'caption', 'credit', false
caption 'text', 'caption', 'credit', false
alttext 'text', 'caption', 'credit', 'altText', false
Property Mapping Examples

Map caption to alttext
Disable caption mapping and map caption to image node's alttext.

"propertyMap": {
    "caption": false,
    "alttext": "caption"
}

Disable all metadata mapping
Completely disabled meta-data-mapping to added images.

"propertyMap": {
    "authors": false,
    "credit": false,
    "caption": false,
    "alttext": false
}

Output

<object id="imagegallery-8a52dde8c22e270f0023d2060b0128b4" type="x-im/imagegallery" uuid="c51d19ff-cc44-4788-b1d7-0eb394f9b7f2">
    <data>
        <text>In sodales lectus vel egestas rhoncus</text>
    </data>
    <links>
        <link rel="image" type="x-im/image" uri="im://image/znX8U1CU124n26zu7gb40_jBzSk.jpeg" uuid="c382c937-8511-5d48-9677-55658c2bbb32">
            <data>
                <text>Image caption</text>
                <height>200</height>
                <width>400</width>
                <flags>
                    <flag>disableAutomaticCrop</flag>
                </flags>
                <alttext>New lamp lights</alttext>
                <credit>Used with permission</credit>
            </data>
            <links>
                <link rel="crop" type="x-im/crop" title="16:9" uri="im://crop/0/0/0.445/0.3707865168539326"/>
                <link rel="crop" type="x-im/crop" title="8:5" uri="im://crop/0.4025/0/0.5975/0.5599250936329588"/>
                <link rel="crop" type="x-im/crop" title="4:3" uri="im://crop/0.055/0/0.89/1"/>
                <link rel="crop" type="x-im/crop" title="1:1" uri="im://crop/0.16625/0/0.6675/1"/>

                <link rel="focal-point" type="x-im/focal-point">
                    <data>
                        <x>123</x>
                        <y>456</y>
                    </data>
                </link>

                <link rel="author" uuid="7a39b42b-1315-4711-a136-7b3a9f132110" title="Demo Demosson" type="x-im/author">
                    <data>
                        <email>demo.demosson@infomaker.se</email>
                    </data>
                </link>
            </links>
        </link>

        <!-- Fallback when x-im/imagegallery is unknown-->
        <link rel="alternate" type="image/jpg" url="https://imengine.se/457383845734734">
            <data>
                <width>400</width>
                <height>200</height>
            </data>
        </link>
    </links>
</object>

Notes