Image fields

Field types in edit and template settings forms

Imagex (new in v4)

This field which is new for Open Content 4 replaces all other previous image and cropper fields and adds some new options.
Although it's called Image Extended, this is only done to make sure existing templates keep working.
From now on this is the default image field and you should base all new templates on this field and replace the other fields with this one whenever you change a template.

schema.json

"ImageExtended": {
      "type": "string",
      "title": "Image"
    }

options.json

"ImageExtended": {
      "type": "imagex",
      "uploadhidden": false,
      "uploadfolder": "Images/Full",
      "fileExtensions": "gif|jpg|jpeg|tiff|png",
      "fileMaxSize": 2000000,
      "showOverwrite": true,
      "overwrite": false,
      "showCropper": true,
      "cropfolder": "Images/Cropped",
      "saveCropFile": true,
      "width": 750,
      "height": 750
    }

The following options are supported:

Atttribute	Description	Default
uploadhidden	Show or hide the upload button (when hidden the user can only select existing images from the folder	False
uploadfolder	use a already existing relative folder. example: Files/Images/Banners
fileExtensions		gif|jpg|jpeg|tiff|png
fileMaxSize	Maximum file upload size in Bytes	2000000
showOverwrite	Show a checkbox to select to overwrite an existing file	True
overwrite	Overwrite an existing file by Default	False
showCropper	Show the cropper	False
cropfolder	Folder to write the cropped files to
saveCropFile	Save the cropped file if the crop button is clicked	False
width	Width of the cropped image	2000
height	Height of the cropped image	1500

Cropping

There are two ways to handle Cropping in Open Content.
Some fields generate cropped file (imagex / imagebrowser)
But you can also generate them on the fly

OpenImageProcessor

To generate cropped or scaled image on the fly, install OpenImageProcessor https://github.com/sachatrauwaen/OpenImageProcessor.
Now you can use all kind of image manipulations using Query String Parameters.

Open Image Processor Examples

<img src="{{Image.url}}?width=600" />
<img src="{{Image.url}}?width=600&height=250" />

For ImageX field:
<img src="{{Image.url}}?width=750&crop={{Image.crop.x}},{{Image.crop.y}},{{Image.crop.width}},{{Image.crop.height}}" alt="{{title}}" />

For ImageCrop field (legacy)
<img src="{{Image.url}}?crop={{Image.x}},{{Image.y}},{{Image.width}},{{Image.height}}&width=2000&height=400&bgcolor=fff" alt="{{Title}}">

📘

Note

This will handle all images within your website even outside Open Content

Legacy image and cropper fields:

Image (legacy)

(with instant upload and auto complete image search in specified folder)
schema type : string
options type : image

options.json

"Image": {
    "type": "image",
    "helper": "Url of the image",
    "typeahead": {
        "Folder": "Images"
    },
    "uploadfolder" : "Images",
    "uploadhidden" : false
}

Remarks :

• Uploaded files are stored in : /Portals/[portalid]/OpenContent/Files
• "uploadhidden" : false/true available from version 1.4

Image2 (legacy)

schema type : string
options type : image2

options.json

"ImageId": {
    "type": "image2",
    "helper": "Select FileId of the image",
    "folder": "Images"
}

Remarks

• based on select2
• no upload function
• only suitable for searching max 1000 items

Image crop (legacy)

options.json

"Photo": {
            "label": "Group Photo",
            "type": "imagecrop",            
            "cropper": {
                "aspectRatio": 1               
            },
            "uploadfolder": "Files/images/GroupPhotos/",
            "uploadhidden": false,
            "manageurl": "/webmanagement/filemanager"
        },

template.hbs

<img src="{{Image.url}}?crop={{Image.x}},{{Image.y}},{{Image.width}},{{Image.height}}&width=2000&height=400&bgcolor=fff" alt="{{Title}}">

Requires Open Image Processor (see above)

Image crop 2 (legacy)

options.json

"Photo": {
            "label": "Image",
            "type": "imagecrop2",            
            "width": 200,
            "height": 100,
            "uploadfolder": "Files/images/GroupPhotos/",
            "cropfolder": "Files/images/GroupPhotos/",
            "uploadhidden": false,
            "manageurl": "/webmanagement/filemanager",
            "cropButtonHidden" : false,
            "multiple": false
        },

options.json (with ratio)

"Photo": {
            "label": "Image",
            "type": "imagecrop2",            
            "cropper": {
                "aspectRatio": 1               
            },
            "uploadfolder": "Files/images/GroupPhotos/",
   					"cropfolder": "Files/images/GroupPhotos/",
            "uploadhidden": false,
            "manageurl": "/webmanagement/filemanager",
   					"cropButtonHidden" : false
        },

template.hbs

<img src="{{Image.cropUrl}}" alt="{{Title}}">
 
 <!-- OR with "cropButtonHidden" : true  and image handler-->
 
<img src="{{Image.url}}?crop={{Image.x}},{{Image.y}},{{Image.width}},{{Image.height}}&width=2000&height=400&bgcolor=fff" alt="{{Title}}">

Image cropper (legacy)

schema type: string
option type: imagecropper

options.json

"Photo": {
            "label": "Group Photo",
            "type": "imagecropper",
            "helper": "select the group photo of your choice and select the appropriate region's",
            "cropper": {
                "aspectRatio": 1,
                "minContainerWidth": 500,
                "minContainerHeight": 300
            },
            "croppers": {
                "sq300x300": {
                    "width": 300,
                    "height": 300
                },
                "sq100x100": {
                    "width": 100,
                    "height": 100
                },
                "land1080x720": {
                    "width": 1080,
                    "height": 720
                },
                "port720x1080": {
                    "width": 720,
                    "height": 1080
                }
            },
            "typeahead": {
                "Folder": "Files/images/GroupPhotos/"
            },
            "cropfolder": "thumbs/GroupPhotos",
            "uploadfolder": "Files/images/GroupPhotos/",
            "uploadhidden": false,
            "manageurl": "/webmanagement/filemanager"
        },