Editor platforms

Intro

While composing an article, XalokNext allows the editor to preview it on different platforms (tablet/mobile/etc). To configure the available platforms change the platforms configuration directive under the wf_cms_base_admin, (normally done in /app/config/cms/admin.yml).

wf_cms_base_admin:
    platforms:
        desktop:
        tablet:
            width: 768
            height: 1024
        mobile:
            iframe_class: mobile
            children:
                iPhone:
                    body_class: iPhone
                    width: 480
                    height: 640
                iPhone-landscape:
                    body_class: iPhone-landscape
                    name: Landscape
                    width: 640
                    height: 480
                responsive:
        amp:
            base_url: http://amp.domain.com
            template: ___TEMPLATE___-amp
            css: amp.css
            inherit_modules: false

The available options for each platforms are:

• name: the name to be displayed. By default, the key used for configuration is used.
• iframe_class: the CSS class that should be appended to the container of the editor's iframe. This allows the developer to add a "frame" around the iframe. mobile is styled in base to add a border around the iframe, mimicking a phone's bezel.
• body_class: the CSS to be added to the body of the editor's iframe.
• base_url: the base URL of the public domain where this platform is showing content (m.domain.com, amp.domain.com, etc.)
• css: Default: screen.css. CSS files to load when this platform is selected. If the value doesn't contain any slashes, it loads the file from the cms bundle's stylesheets directory. You can include multiple CSS files by separating them with comma: screen.css,print.css
• width: the width that the iframe will have for this platform. Leave empty (or don't include it at all) to fill the entire screen.
• height: the height that the iframe will have for this platform. Leave empty (or don't include it at all) to fill the entire screen.
• inherit_modules: Default true. Specify inherit_modules: false if you want this platform to have its own modules. By default, the modules are shared between the platforms - editing a module in one of the platforms shows this change in all other platforms. Think about using social networks as platforms: the editor might want to edit the title of the article when sharing it through social networks.
• template: Default: ___TEMPLATE___. Allows you to load a different template for the given platform. Use the ___TEMPLATE___ placeholder for the article's template (default, gallery, video, etc.).

The responsive platform

The responsive platform is treated differently in that when selected, the editor is asked to enter the desired width and height of the iframe.

Cascading configuration

None of the options is required, a configuration could be just:

wf_cms_base_admin:
    platforms:
        desktop:
        mobile:
        tablet:

This will set the default values mentioned above to all the options that have a default value.

Inherited from the first platform

Changing the template, css and/or base_url options for the first platform will change it for all the available platforms. So:

wf_cms_base_admin:
    platforms:
        desktop:
            css: custom_name.css
        mobile:
        tablet:

is the same as:

wf_cms_base_admin:
    platforms:
        desktop:
            css: custom_name.css
        mobile:
            css: custom_name.css
        tablet:
            css: custom_name.css

Inherited from the parent platform

iframe_class, body_class and inherit_modules are copied from the parent platform to its children:

wf_cms_base_admin:
    platforms:
        desktop:
        mobile:
            iframe_class: mobile
            children:
                iPhone:
                iPhone-landscape:
                responsive:
        tablet:

is the same as:

wf_cms_base_admin:
    platforms:
        desktop:
        mobile:
            iframe_class: mobile
            children:
                iPhone:
                    iframe_class: mobile
                iPhone-landscape:
                    iframe_class: mobile
                responsive:
                    iframe_class: mobile
        tablet: