Image banner block

Demo image banner block

The banner across the top of the page represents a live example of the Image Banner block in action. This block also contains an embedded link.

In the demo example, the block is set in the pre-title region.

The Image Banner block allows you to display a full-width image across the top of your page with the option of an embedded clickable link.

Create and Configure your Image Banner block

Depending on your approach, either apply the block in Layout Builder or the Block Layout page. Once the block is added, you can configure the following elements:

  • Block description - (required) a brief description to make it easier to identify at a glance
  • Primary image - (required) This image will be automatically cropped to a maximum width of 2000 pixels. The height can be variable. If you want to match the height of Page Title Banners you can crop your image before uploading to 2000x460 pixels. This image will automatically be stretched to fill 100% of its container. One file only. 3 MB limit. Allowed types: png gif jpg jpeg.
  • Link - (optional) Enter an internal or external URL if desired. This link will then wrap the image so that it is clickable. Start typing the title of a piece of content to select it. You can also enter an internal path such as /node/add or an external URL such as http://example.com. Enter <front> to link to the front page.

When the block configurations are complete, move on to reviewing your block's visibility