Visualizations

Visualizations are an easy to use and effective way of previewing your content and ensuring it meets your requirements before you save it to an edition to be scheduled for publishing, or at any time during the content production process.

If a visualization has been added to a content type, when content of this type is edited in the Content Library, the visualization is displayed in the right hand side of the content editing window. The image below shows a visualization for a carousel, consisting of several different carousel slides that can be cycled through using the arrows, just as the content will appear on a website or in an app.

The visualization display can be toggled on and off by clicking the eye icon at the top of the screen and can be opened in a separate window by clicking the icon on the right hand side of the window. If you edit the content, the visualization will be updated whenever the changes are saved.

Viewing a visualization
Viewing a visualization

You can use the device size menu to see how the content displays on different device screen sizes. The image below shows a preview of the content on a mobile device in landscape orientation, but you'll also want to ensure that it displays correctly on a tablet or desktop, or on any device size that you have set up. You can add your own device sizes in the visualization settings window.

The visualization of the content as it will appear on a mobile device
The visualization of the content as it will appear on a mobile device

Visualization settings

To open the visualization settings window, choose "Visualization settings" from the "Settings" menu at the top of the Content Library.

In the settings window you can configure the device sizes at which you want to be able to view a visualization. Desktop, tablet and mobile sizes are set up by default, but you can edit these and add your own devices.

Visualization settings
Visualization settings

The default visualization environment is specified in the settings window. This is the environment within which all visualizations are displayed and will usually have already been configured for you.

If an error message is shown rather than a visualization, then you will need to check that the visualization environment is valid and that your IP address is included in the "white list" included as part of the configuration.

Visualization scaling

If a piece of content is larger than the selected device size, it will be scaled to fit, which may result in font and image aliasing and display a less accurate representation of how the content will appear on your site. With the scale option you can use the full size of the visualization window and let your visualization app take care of responsively displaying the content.

When the scale option is unchecked (1 in the image below), the content can fill the entire visualization window and the device size menu and orientation icon will be grayed out.

With scaling turned off, the content can fill the entire visualization window
With scaling turned off, the content can fill the entire visualization window

With scaling off, the visualization will redraw when you resize the visualization window by hovering over the left edge of the window until the resize icon appears and dragging the window to make it smaller or larger. This is a good way for developers to test out their visualization app to ensure that its responsive. The site can’t be responsive in the scaled view because the width never changes.

When scaling is off, the visualization will redraw when you change the size of the window
When scaling is off, the visualization will redraw when you change the size of the window

Developing a visualization