Custom Preview Sizes Configuration in SuiteCommerce

TL;DR: This article explains how to customize preview sizes in SuiteCommerce by overriding default settings. This can improve site management and tailored viewing options for users.

How to Customize Preview Sizes?

To tailor the preview display settings for your SuiteCommerce site, you can add custom preview sizes, or modify existing defaults within the adapter file. This flexibility allows developers to create dimensions that better fit their specific project needs, particularly when showcasing their content across different devices.

Sample Code for Custom Preview Sizes

The sample code below illustrates how to define various custom preview sizes categorized into desktop, tablet, and phone dimensions.

1"text-purple-400">var setup = {  // Config values the adapter can give the cms on startup.
2   // Screen size preview override/extension
3   screen_preview: {
4      override_defaults: false,
5      sizes: {
6         desktop: [{
7            name: 'XL',
8            width: 2000,
9            height: 3000
10         }, {
11            name: 'XXL',
12            width: 3000,
13            height: 4000
14         }, {
15            name: 'Portrait',
16            width: 768,
17            height: 1024
18         }],
19         tablet: [{
20            name: 'Huge',
21            width: 1300,
22            height: 2000
23         }],
24         phone: [{
25            name: 'Massive',
26            width: 1400,
27            height: 2400
28         }]
29      }
30   }
31};

Overriding Default Sizes

If you prefer to display solely your custom preview sizes in the CMS adapter, you can change the override_defaults flag to true. This setting ensures that only the custom dimensions will appear for selection, allowing for a more streamlined set of options. If the flag is set to false, both default and custom preview sizes will be available.

Important Note on Dimension Requirements

When defining dimensions for tablets and phones, ensure that the width exceeds the height. In cases where the height exceeds the width, the Site Management Tools (SMT) will automatically swap the dimensions to maintain this structure. This particular rule does not apply to desktop dimensions, giving you more flexibly to define these as needed.

Enabling Custom Preview Sizes

To enable or override default preview sizes, you must edit the CMS adapter file to implement the necessary code for your custom screen sizes and adjust the override_defaults flag according to your needs. For additional guidance on how to customize a module, refer to the section on developing your SCA customization.

Related Topics

• Site Management Tools Configuration
• Site Management Tools Templates and Areas
• Working with Site Management Tools Landing Pages in a Sandbox Account
• Changing Site Management Tools to Use a Different Hosting Root
• Configuring Escape to Log In
• Internationalization of Site Management Tools Administration

Who This Affects

• Developers involved in Site Management customization.
• Administrators managing site settings in SuiteCommerce.

Key Takeaways:

• Custom preview sizes enhance the display capabilities in SuiteCommerce.
• Setting the override_defaults flag controls the visibility of size options.
• SMT ensures that dimensions for tablets and phones maintain a width greater than height.

Source: This article is based on Oracle's official NetSuite documentation.