Terminal for MkDocs Tile Grid#

Terminal for MkDocs enables you to quickly create a grid of linked tiles. Each tile can contain an image, link, and caption.

web page with three square images in a row. images appear after Lorem Ipsum text. — Tile Grid Example

To use this feature, complete the following steps:

1. Add `tiles` to Page Metadata#

Add a YAML Style Meta-Data section to the very top of your Markdown page. The metadata should contain the attribute tiles which is a list of YAML objects.

Pay special attention to the indentation. There should be two spaces before the - marking the start of an object. There should be four spaces before any additional object attribute:

---
tiles:
  - caption: '@petradr'
    img_src: https://picsum.photos/id/167/200/200
    alt_text: 'close up of fallen leaves.'
  - caption: 'Marcin Czerwinski'
    img_src: https://picsum.photos/id/127/200/200
    alt_text: 'close up of green moss on a log.'
  - caption: 'Steve Richey'
    img_src: https://picsum.photos/id/143/200/200
    alt_text: 'overhead of fallen leaves.'
---

# My Page Content

Each tile object may have any of the attributes described in the Tile Reference.

2. Add Page to Nav#

Add the markdown file which includes the tiles metadata to the site's navigation in mkdocs.yml. If the page is not included in the mkdocs.yml nav, the markdown will not be loaded as a MkDocs Page Object¹ and will not include your metadata.

Note: the page does not need to be visible in the final side navigation menu. Deeply nested pages can also use the tile grid feature.

nav:
    - Home: 'index.md'
    - Example Page: 'tile-grid/examples/example-page.md'
    - Tile Grid:
      - Examples:
        - Also Works: 'tile-grid/examples/example-page.md'

3. Configure Tile Grid#

The Tile Grid can be further configured using the attributes described in the Grid Reference. For example, the grid can be configured to display before the main page content:

---
show_tiles_first: true
tiles:
  - caption: '@petradr'
    ...

Complete Example#

mkdocs.yml#

file location: .
filename: mkdocs.yml

site_name: Tile Grid Demo

nav:
    - Home: 'index.md'
    - Example Page: 'tile-grid/examples/example-page.md'

theme:
  name: terminal

example-page.md#

file location: ./docs/tile-grid/examples/example-page.md
filename: example-page.md

---
tiles:
  - caption: '@petradr'
    img_src: ../../../img/picsum/167_200x200.jpeg
    tooltip: 'to Picsum homepage'
    alt_text: 'Picsum Photo API.'
    link_href: https://picsum.photos/ 
  - caption: 'Marcin Czerwinski'
    img_src: ../../../img/picsum/127_200x200.jpeg
    tooltip: 'to Picsum homepage'
    alt_text: 'Picsum Photo API.'
    link_href: https://picsum.photos/ 
  - caption: 'Steve Richey'
    img_src: ../../../img/picsum/143_200x200.jpeg
    tooltip: 'to Picsum homepage'
    alt_text: 'Picsum Photo API.'
    link_href: https://picsum.photos/ 
---

# 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. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam elementum vitae lacus a sodales. 

<br>

MkDocs Page Object Documentation ↩