Site Management Tools Custom Preview Screen Sizes

If you want to preview your site for dimensions that are not already defined, you can create your own preview sizes by adding the dimensions to the adapter file. Additionally, you can override the default preview sizes so that only your custom preview sizes are available for selection.

The following sample code illustrates several custom preview screen sizes. Notice that each preview option is designated as either desktop, tablet, or phone. The attributes for each preview size includes the name, width dimension, and height dimension.

          var setup = { // Config values the adapter can give the cms on startup.
   // Screen size preview override/extension
   screen_preview: {
      override_defaults: false,
         sizes: {
            desktop: [{
               name: 'XL',
               width: 2000,
               height: 3000
            }, {
               name: 'XXL',
               width: 3000,
               height: 4000
            }, {
               name: 'Portrait',
               width: 768,
               height: 1024
            }],
               tablet: [{
               name: 'Huge',
               width: 1300,
               height: 2000
            }],
            phone: [{
               name: 'Massive',
               width: 1400,
               height: 2400
            }]
                  }
               }
            };

When you define custom dimensions for tablets and phones, Site Management Tools (SMT) forces the width dimension to be greater than the height dimensions. If you define a dimension where the height is greater than the width, SMT swaps the width and height dimensions so that width is greater than height. This rule does not apply to desktop dimensions.

Override Defaults

If you want to make only your custom preview sizes available, in the CMS adapter, set the value of the override_defaults flag to true. Only custom dimensions will be available. When set to false, both default and custom preview dimensions are listed on the dimensions dropdown list.

Enabling Custom Preview Sizes and Overriding Defaults

To enable custom preview screen sizes or override default preview sizes, you must customize the CMS adapter file to include the code for the custom screen sizes and to set the value of the override_defaults flag. For information about customizing a module, see Develop Your SCA Customization.

Override Defaults

Enabling Custom Preview Sizes and Overriding Defaults

Related Topics