In Copilot, there is a Media Block button within the Toolbar in the body field of an article – see below:
If a user clicks on the entire Media Block it will automatically add a Group of Two to the body field – see below.
If a user clicks on the entire box, a menu will appear above the Media Block that allows users to change to a Group of 3, 4 or a masonry grid.
Users can select the masonry grid option by clicking on the icon in the toolbar highlighted below:
To add items to the masonry grid, users must click the Add Asset icon within each slot, which will open the asset finder. Only photos can be added to a masonry grid. When photos are added to the grid it will look like the example below.
The masonry option in Copilot allows up to six photos. Once assets are added to the masonry grid, they can be dragged to other slots within the grid.
Each photo placed in the masonry in Copilot appears in its exact corresponding position on the website — resulting in a visually dynamic layout where column heights vary naturally based on the photos placed in the masonry.
On the website, the masonry grid displays photos across three columns on desktop, and two columns on mobile.
How To Apply Fade In and Slide In Motions
On the Copilot side, the Fade In and Slide In animations can be applied to any layout in the Media Block, including Group of 2, Group of 3, Group of 4, and the masonry layout.
Each animation has a distinct motion:
Fade In: When applied, all assets in the Media Block gradually fade into view as the reader scrolls down the page.
Slide In: When applied, the assets in the Media Block slide into view from the left and right side of the page as the reader scrolls down.
Please note: The masonry grid in the Media Block, as well as the Fade In and Slide In animations, are available on articles only.