Blog

A blog pattern is used to display a collection of blog articles in a grid layout. Each article can include a title, image, description, author(s), and publication date.

The blog pattern supports two content loading strategies:

• Dynamic content - Articles are loaded asynchronously using a template
• Static content - Articles are passed directly to the pattern

The pattern offers two layout variants based on the number of articles:

• 4-block layout (default)
• 3-block layout

The blog pattern is composed of the following elements:

Dynamic content

For scenarios where articles need to be loaded asynchronously (e.g., from a blog API), the pattern provides a template mode. This mode creates a template structure that can be populated by external modules like @canonical/latest-news. See the next section for setup instructions.

To use static content instead, see static content.

Using dynamic content mode introduces some slight variations in pattern usage.

• All content normally passed in via articles is assumed to be loaded from an asynchronous data source. The pattern creates .article-image, .article-title, .article-link, .article-excerpt, .article-author, and .article-time objects inside a template element, which should then be populated by JavaScript.
• Layout must be explicitly specified via template_config.layout ("3-blocks" or "4-blocks")

By default, the pattern assumes a 4-block layout, just like in static content mode.

To show a 3-block layout, the template_config.layout parameter must be set to "3-blocks".

Using with latest-news module

To use the blog pattern with the latest-news module, follow the following steps.

Install @canonical/latest-news and configure it, following its usage instructions. You must use version 2.1.0 or later, as earlier versions do not support the imageClasses option needed for proper article image styling.

Enable template mode in the blog pattern by passing template_config. This generates the template structure and prepares it for dynamic content.

{{ vf_blog(
  title={"text": "Latest from our blog"},
  template_config={
    "enabled": True,
    "layout": "3-blocks",  # Must specify layout "3-blocks" or "4-blocks" in template mode.
    "template_container_id": "articles",
    "template_id": "template"
  }
) }}

Populate the template with the latest news articles by calling canonicalLatestNews.fetchLatestNews().

Be sure to match articlesContainerSelector with template_container_id, articleTemplateSelector with template_id, and set limit to "3" or "4".

canonicalLatestNews.fetchLatestNews({
  // Make sure you add `p-image-container__image` to ensure the article image receives the correct styling.
  imageClasses: ["p-image-container__image"],
  // Use `3` with `template_config.layout="3-blocks"` or `4` with `template_config.layout="4-blocks"`
  limit: "3",
  articlesContainerSelector: "#articles",
  articleTemplateSelector: "#template",
  excerptLength: 180
});

After following the above steps, the blog pattern will render with articles fetched and populated by the latest-news module.

Static content

The pattern can also render static articles passed into the articles parameter. The layout (3-block or 4-block) is automatically determined based on the number of articles provided.

4-block layout

The default layout displays four articles in a grid. On large screens, the title spans the full width while articles are arranged in a 4-column grid.

3-block layout

When exactly three articles are provided, the pattern automatically adjusts to a 3-column grid layout.

Custom Fallback Image

Each article can specify its own cover image. If no image is provided, a fallback image is used.

Jinja Macro

The vf_blog Jinja macro can be used to generate a blog pattern. The API for the macro is shown below.

Parameters

Article Configuration

Each article in the articles array accepts the following configuration:

Import

Jinja Macro

To import the Blog Jinja macro, copy the following import statement into your Jinja template.

{% from "_macros/vf_blog.jinja" import vf_blog %}

View the building with Jinja macros guide for macro installation instructions.

SCSS

Since Patterns leverage many other parts of Vanilla in their composition and content, we recommend importing the entirety of Vanilla for full support.