Documentation

Setup

Select a source image or source FileSet which contains images suitable for large retina screens or larger. Every required resolution generates automatically. Leaving the default settings, the block will output as follows:

Up to 460px

Small image (1/8 of the source image) / Medium image (1/4 of the source image) for retina

From 461 to 920px

Medium image (1/4 of the source image) / Large image (1/2 of the source image) for retina

From 921px

Large image (1/2 of the source image) / XL image (source image) for retina

The whole block is responsive and adjusts to parent container.

Custom settings

You can define custom settings for each block separately or set them globally at Dashboard. Feel free to adjust each option to match your own design needs:

Media queries can be specified in px, em or other unit as well.
Image resolution can be set in px or in %. Percentages are calculated from Image Size set for Large Retina screen.
Placeholders indicate what values will be used when you leave it blank.
For horizontal layouts just switch the Layout radio button so you can use the images f.e. in horizontal scrollers.

Page attributes

You can set Presets either in block itself or in Page Attributes. Each block looks at this Preset attribute and adjusts accordingly. This saves time when using more of the Responsive Images blocks at the same page. However, it there is one or two which should use different settings, you can override these easily.

FileSet for Responsive ImageSet block can be defined when adding/editing the block or leaving the default value here and the block will look after selected FileSet in Page Attributes.

Error handling

If for some reason the source image or fileset is not found, the block stays empty. Your users will not see any error message or missing image icon. Even if you accidentally delete the image/fileset used in one of your blocks. Enter the edit mode to see the error message - this tells you why your block is empty.