Image Block

Introduction

page title heading deeplink

The Image enjin block has a seemingly simple task: display the image that the editor haschosen for the end-users to appreciate and maybe even learn something new from.

There's a lot of complexity behind this task ranging from cross-browser supports to thewildly large array of screen sizes used by modern users.

The image block provides a number of features beyond the simple display this imagerequirement.

The image block is backed primarily by the <picture> HTML tag (ratherthan just the normal <img> tag) which delivers a clean way for editorsto specify which version of their image needs to be displayed at whatever theirmedia-query needs are.

top

Example Image

page title heading deeplink
an example image

Image blocks have just the picture as their primary content, however there is still theheader and footer aspects which can be used to provide context around the image beingpresented.

For demonstration purposes, this image block is configured to show two different images:

  • Greater than 1024 pixels wide: a painting of a bonsai tree
  • Less than 1024 pixels wide: a garage door with a samurai theme
top

Image Constraints

page title heading deeplink

Image blocks can be configured for one of two constraints: width and height .

Use the link below to see a demonstration of the two different image block constraints.

top

Image Fittings

page title heading deeplink

Image blocks can have their images be fitted within their viewport: contain ,cover , fill , none and scale-down .

Use the link below to see a demonstration of the two different image block fittings.

top

Image Positions

page title heading deeplink

Image blocks can be configured for one of the following positions: center ,top , top-left , left , bottom-left , bottom ,bottom-right , right and top-right .

Use the link below to see a demonstration of the two different image block positions.

top

Image Sizes

page title heading deeplink

Image blocks can be configured for a range of viewport sizes (in the height dimension):sliver , thin , banner , normal , tall , huge andactual .

Use the link below to see a demonstration of the two different image block sizes.

top