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.

"ImageExtended": {
      "type": "string",
      "title": "Image"
    }
"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:

AtttributeDescriptionDefault
uploadhiddenShow or hide the upload button (when hidden the user can only select existing images from the folderFalse
uploadfolderuse a already existing relative folder. example: Files/Images/Banners
fileExtensionsgif|jpg|jpeg|tiff|png
fileMaxSizeMaximum file upload size in Bytes2000000
showOverwriteShow a checkbox to select to overwrite an existing fileTrue
overwriteOverwrite an existing file by DefaultFalse
showCropperShow the cropperFalse
cropfolderFolder to write the cropped files to
saveCropFileSave the cropped file if the crop button is clickedFalse
widthWidth of the cropped image2000
heightHeight of the cropped image1500

Legacy image and cropper fields:

Image (legacy)

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

"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

"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)

"Photo": {
            "label": "Group Photo",
            "type": "imagecrop",            
            "cropper": {
                "aspectRatio": 1               
            },
            "uploadfolder": "Files/images/GroupPhotos/",
            "uploadhidden": false,
            "manageurl": "/webmanagement/filemanager"
        },
604
<img src="{{Image.url}}?crop={{Image.x}},{{Image.y}},{{Image.width}},{{Image.height}}&width=2000&height=400&bgcolor=fff" alt="{{Title}}">

need http://imageprocessor.org

Image crop 2 (legacy)

"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
        },
"Photo": {
            "label": "Image",
            "type": "imagecrop2",            
            "cropper": {
                "aspectRatio": 1               
            },
            "uploadfolder": "Files/images/GroupPhotos/",
                    "cropfolder": "Files/images/GroupPhotos/",
            "uploadhidden": false,
            "manageurl": "/webmanagement/filemanager",
                    "cropButtonHidden" : false
        },
<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

"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"
        },