Adaptive Image Block

As is says, the Adaptive Image Block is used to insert an adaptive image. An adaptive image is one which optimises it's size to the device which is currently being used to view it.

Wex Usage Case

This block is used in various other blocks to output an image. However it can be used on its own if resizing the image before it's added to the site isn't an option.

Content Settings

There are 11 content setting for the Adaptive Image Block, in addition to the default block Settings

  • ImageHeight - Numerical input which Sets the Height of the Image output
  • ImageWidth - Numerical input which Sets the Width of the Image output
  • Image - Select box which allows you to select a image to be used in the block from the Episerver Media Library
  • Description - Sets the Alt text on the image in the block
  • CSS Class -  Allows you to add a specific class to the image img tag so that any default CSS can be overuled.
  • Caption - Adds a Caption to the bottom of the image block. Basically a <p class="text-center">[caption text]</p> added under the image.
  • Width - Isn't used in this block
  • Height - Isn't used in this block
  • Quality -  Isn't used in this block
  • Output Format -  Allows you to convert between different image file formats, or use the default file format of the image selected in the 'Image' option.
  • BG Colour - Sets the background colour (in HEX - no precceding #) if the ImageHeight and ImageWidth set above result in a bigger canvase size than the image posses. The default is white.