Ralf Skirr | digital renaissance

The Post List Module

The post list shows posts as rows: a small image on the left, title, excerpt and category on the right. It is the module for archive pages, category pages and any block of older posts. The post-card grid shows a few posts large and side by side; the post list runs many posts as a plain, scannable column.

The list has no width of its own. It fills the column it is put into, so how long a row runs is decided by the row and column around it, never by the module. You place the same markup at page width or full width, in a wide column or a narrow one, and the rows adjust.

The whole module

This is the complete module with one row and placeholders where your content goes. Each further post is another "module-post-list-item", just like this one, added inside the same list with the class "module-post-list".

<div class="module-post-list">
  <ul class="no-text-rhythm">

    <li class="module-post-list-item">
      <a class="module-post-list-article-featured-image" href="">
        <img src=""
             alt=""
             width="" height="">
      </a>
      <div class="module-post-list-text">
        <h3 class="module-post-list-article-title"><a href="">[[article-title]]</a></h3>
        <p class="module-post-list-article-excerpt">[[article-excerpt]]</p>
        <p class="module-post-list-meta"><a class="module-post-list-article-category" href="">[[article-category]]</a></p>
      </div>
    </li>

  </ul>
</div>

Each row is one "module-post-list-item" and holds two parts:

  • the linked photo, "module-post-list-article-featured-image", on the left,
  • and the text column, "module-post-list-text", on the right, with the title, the excerpt and the category in that order.

Point the image src at your file and describe it in alt. Fill in width and height with the image’s real pixel size, so the page doesn’t jump while the images load. Set the href on the photo and on the title to the post, and the href on the category to your category page. Whatever shape your files are, the module crops every thumbnail to the same size, so all the images line up down the left edge.

A part may be left out and the rest keep their order. The category is the only meta shown for now; a date or reading time would sit beside it in the same "module-post-list-meta" line.

The rest of this page

The same list runs below in three settings. Nothing about the markup changes between them; only the row around it does:

  • at article-content width,
  • at page width,
  • in a 40/60 column next to body text,
  • at full width.

At article-content width

Up until here the content has been wrapped in an article content module. That's why the text lines are shorter than below.

At page width

This is the plain case: the list sits in a normal row and runs at the reading width of the page.

In a column beside body text

This is the everyday case. The list sits in the narrow column of a "layout-row--40-60" row, with an article running in the wide one beside it – a sidebar of recent posts next to the main text. The list fills its column just as it filled the full page above; the narrow column simply makes the rows shorter and the excerpts wrap sooner.

The wide column holds the reading text of the page while the list runs beside it. This paragraph stands in for that text, so the two columns can be seen at their real widths together.

A reader scans the main text on the left and glances at the list of recent posts on the right without leaving the page. The list needs no special width or markup for this; it takes whatever the column gives it, the same way it filled the whole page higher up.

When the window narrows past the row’s switch point, the two columns stop sitting side by side and stack, the text first and the list below it. Neither column has to be told to do this – it is the row that stacks, and the list simply comes along.

At full width

Put the list in a row with the class "layout-row--full-width" and it reaches almost to both edges of the screen. The rows grow wider, the thumbnails stay the same size, and the excerpts get more room to run. It is the same markup as above, only the row differs.