Configuring Responsive Image Handling

You can control the Widget Framework's responsive image handling by setting a number of section parameters (usually in a publication's root section).These section parameters are associated with content profiles (see Content Profiles), so that different content profiles can have different responsive image policies.

The responsive image section parameters are:

• wf.contentprofile.content-profile.image.policy

• wf.contentprofile.content-profile.image.grid.gridViewportWidth

• wf.contentprofile.content-profile.image.breakpoints.fluid

where content-profile is the name of the content profile ( default by default).

The parameters should be used as follows:

image.policy

You can set this parameter to one of the following values:

adaptive(default)

For all visible images, representations are selected and loaded based on the width specified in the img element. For hidden images (for example, images that are not initially visible in a carousel), low quality representations are loaded initially. Once such a hidden image is actually displayed, the proper representation is loaded and used to replace the low-quality representation. You can control the details of how the low quality proxy image representations are generated using the image.proxy.xxx section parameters described in Configuring Image Preloading.

picturefill

Images are selected for small devices (i.e phones) based on the assumption that they will occupy the full width of the screen. For larger devices, including tablets, images are selected based on the assumption that they are displayed in a layout grid. The width of this grid is read from image.grid.gridViewportWidth (see below).

grid

Disables support for responsive images. Fixed-size images are used, in the same way as in Widget Framework systems prior to version 3.0.

The default policy is adaptive.

image.grid.gridViewportWidth

If image.policy is set to picturefill then this parameter is used by the wf-core:image tag together with the current element width (calculated by the Widget Framework) to calculate the required image width for larger devices. A typical value would be 1140.

If image.policy is set to any other value, then this parameter is not used.

image.breakpoints.fluid

If image.policy is set to picturefill then this parameter defines a series of device width breakpoints at which a different size image representation will be selected for display. The specified breakpoints should match the breakpoints used in your Bootstrap CSS. The default value is 320,480,640,767.

If image.policy is set to any other value, then this parameter is not used.