Tile Grid Pluglet Reference#

By default the Terminal for MkDocs Tile Grid is displayed using logic in the theme's templates. These templates add components around the page's markdown content (for example, the side navigation menu or the latest git revision date for the page).

We can use the MkDocs Macros Plugin to affect what appears within the page's markdown content; i.e., inline. This plugin, in combination with Terminal for MkDocs' built-in Tile Grid Pluglet, will render the tile grid within a page's markdown content instead of before or after the markdown content.

web page with three square images in a row.  images appear in between Lorem Ipsum paragraphs.

Tile Grid Inline Example


Setup#

Follow the instuctions in the MkDocs Macros Plugin reference. Then enable the Terminal for MkDocs Tile Grid Pluglet by adding

mkdocs-terminal:terminal.pluglets.tile_grid.main

to the modules config option of the macros plugin:

plugins:
  - search
  - macros:
      modules: 
        - mkdocs-terminal:terminal.pluglets.tile_grid.main

Usage#

1. Define Grid#

Define your tile grid according to the Tile Grid Overview.

2. Configure Grid#

Set show_tiles_inline to true.

3. Call tile_grid Macro#

Add the following macro call wherever on the page you would like the grid to be displayed:

{{ tile_grid(page.meta) }}

Example#

---
show_tiles_inline: true
tiles:
  - caption: '@petradr'
    img_src: ../../../img/picsum/167_200x200.jpeg
    alt_text: 'close up of fallen leaves.'
  - caption: 'Marcin Czerwinski'
    img_src: ../../../img/picsum/127_200x200.jpeg
    alt_text: 'close up of green moss on a log.'
  - caption: "Steve Richey"
    img_src: ../../../img/picsum/143_200x200.jpeg
    alt_text: 'overhead of fallen leaves.'
---

# My Page Content

Aliquam eu augue hendrerit, bibendum felis sit amet, commodo lorem.

Maecenas facilisis id tortor volutpat fermentum. Integer volutpat arcu leo, sed semper sapien facilisis ut. Nam ac tincidunt sem, eu gravida augue. Suspendisse varius facilisis rhoncus. 

## Inline Example
{{ tile_grid(page.meta) }}

## Error Output
{{ tile_grid("invalid") }}

# Page Content Continued
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam elementum vitae lacus a sodales.