contentfry

Appearance

Manifest ​

Overview ​

Displays' custom options and supported features should follow this manifest definition guideline.

Display's manifest file stores public option key/values for the editor. Those options help editor to understand which features are available in the display so that users can set them via editor interface.

Sample /public/manifest.json :

json
{  
  "meta": { // Used in the display catalog listing and filtering
    "contents_count": { // Number of contents this display can show.
      "min": 1,
      "max": null,
      "best": 24
    },
    "category": "grid", // grid | timeline | mosaik | slider | showcase | single-post | post-slider
    "name" : "Grid Small" ,// Display's readable catalog name.
    "thumbnail" : "preview.jpg" // Display's thumbnail to show in catalog, add your thumbnail to public folder in same folder with manifest.json and change filename in case needed.
  },
  // supported/disabled features
  "supports" : {
    "autoresize": true, // display supports adjusting the height based on display's content
    "banners" : ["left", "right", "up", "down"], // array of supported bannner placements
    "responsive_chunks" : true, // | false
    // which data attributes are available on the interface.
    "shows" : ["navigation_arrows", "navigation_dots"] // ... check options shows for more.
  },
  // Manifest attributes (optional)
  "default": { // default user options are delivered to display via settings.manifest object.
    "autoplay" : true // e.g.: custom user option
  },
  "form": { // define user inputs to overwrite default data.
    // e.g.: custom definition, form key should match defaut key 'autoplay'
    "autoplay" : { "title": "Autoplay", "type": "boolean"} 
  }
}

State ​

Display manifest merges custom display manifest with following default settings.

Those are default settings and they might change in the future.

json
{ 
  "supports" : {
    "banners" : true,
    "responsive_chunks" : false,
    "shows" : [] // shows all fetures by default (good for development, set those before going live.)
  },
  "default": {},
  "form": {}
}

Form ​

List of options are stored in the form key and their their initial values in the default key.

json
{  
  "supports" : {
    // supported features (default supports described above)
  },
  "default": { 
    // option defaults
  },
  "form": { 
    // option inputs
  }
}

Key of each form options should have a default value.

Select ​

Select input type:

  • title: String | Name of the input
  • type: String | 'select'
  • options : Array of options title value key pair.

For example image-ratio should have a default value so that option comes preselected.

json
{
  "default" : {
    "image-ratio" : "square"
  },
  "form" : {
    "image-ratio" : { "title": "Image ratio", "type": "select", "options" : [{ "title" : "Portrait mode", "value": "portrait"}, { "title" : "Square mode", "value": "square"}, { "title" : "Landscape mode", "value": "landscape"}]},
  }
}

Boolean ​

  • title: String | Name of the input
  • type: String | 'boolean'
json
{
  "default" : {
    "autoplay" : false
  },
  "form": {                        
      "autoplay" : { "title": "Autoplay", "type": "boolean"}
  }
}

Accessing custom variables from configuration ​

When you would like to access custom paremeter, such as "autoplay" via javascript, you can get from config response.

js
$cf.listen('config', (response) => {
   // State: { config : response.config }
   $cf.ui.get(response.config, 'settings.manifest.autoplay'); // replace "autoplay" with your custom parameter.
});