ImageBlock

The ImageBlock is a simple banner to display an image. The ImageBlock can either be used standalone or embedded into a grid wrapper.

Structure examples

Take a look at some examples, to further understand the configuration options to display an ImageBlock.

Normal image
Fullscreen width
Fullscreen height
Whole screen

This code example shows a simple version of an ImageBlock.

{
    "image":{
    "url":"https://my-image-url.png",
    "altText":"alt text"
},
    "styleOptions":{
    "maxHeight":"450px",
    "isFullWidth":true
}
}

Create

POST _apiBaseUrl/v1/cms/banner/image-block

Code

ImageBlockDto

{
   "image":{
      "url":"https://my-image-url.png",
      "altText":"alt text"
   },
   "styleOptions":{
      "baseWidth": null,
      "minHeight":"400px",
      "maxHeight":"600px",
      "isFullWidth":"100%",
      "isScreenWidth":true,
      "isScreenHeight": false,
      "position":"center"
   }
}

Arguments

image●

ImageDto

required

Data directly related to the image.

styleOptions●

ImageBlockStyleOptionsDto|

null

Optional style options to further customize the image block. Focusing on the size and placement of it.

ImageBlockStyleOptionsDto

baseWidth●

string|

null

The base width, the image tries to resize to, if possible.

minHeight●

string|

null

Min height of the image. Allows all possible css sizes.

isScreenWidth●

boolean|

null

Sets image block to full width, omitting the default padding.

isScreenHeight●

boolean|

null

Sets the image block to screen height.

maxHeight●

string|

null

Max height value allows all possible css sizes.

position●

string|

null

As the image is set to fill when having a max height or is screen width/height, the image position can also be defined. The value can either be a fixed alignment value like top, bottom... or a more specific value like '50% 100%'

isFullWidth●

boolean|

null

Stretches the image width to 100% of the parents' container.

GridWrapper ProductPreviewBlock