How to Display Thumbnails in Related Posts on GitHub Pages

Displaying thumbnails in related posts is a simple yet powerful way to make your GitHub Pages blog look more professional and engaging. When readers finish one article, showing them related posts with small images can visually invite them to explore more content — significantly increasing the time they spend on your site.

Why Visual Related Posts Matter

People process images faster than text. By adding thumbnails beside your related posts, you help visitors identify which topics might interest them instantly. It also breaks up text-heavy sections, giving your post layout a more balanced look.

On Jekyll-powered GitHub Pages, this feature isn’t built-in, but you can easily implement it using Liquid templates and a little HTML structure. Once set up, every new post will automatically display related posts complete with thumbnails.

Preparing Your Posts with Image Metadata

Before you start coding, you need to ensure every post has an image defined in its YAML front matter. This image will serve as the thumbnail for that post.

---
layout: post
title: "Building an SEO-Friendly Blog on GitHub Pages"
tags: [jekyll,seo,github-pages]
image: /assets/images/github-seo-cover.png
---

The image key can point to any image stored in your repository (for example, inside the /assets/images/ folder). Once defined, Jekyll can access it through .

Creating the Related Posts with Thumbnails

Now that your posts have images, let’s update the related posts code to include them. The logic is the same as the tag-based related system, but we’ll add a thumbnail preview.

Step 1 Update Your Related Posts Include File

Open or create a file named _includes/related-posts.html and add the following code:

{% assign related_posts = site.posts | where_exp: "item", "item.url != page.url" %}
Related Articles You Might Like

  {% for post in related_posts %}
    {% assign common_tags = post.tags | intersection: page.tags %}
    {% if common_tags != empty %}
      

        
          {% if post.image %}
            
          {% endif %}
          {{ post.title }}
        
      
    {% endif %}
  {% endfor %}

This template loops through your posts, finds those sharing at least one tag with the current page, and displays each with its thumbnail and title. The loading="lazy" attribute ensures faster page performance by deferring image loading until they appear in view.

Step 2 Style the Layout

Let’s add some CSS to make it visually appealing. You can include it in your site’s main stylesheet or directly in your post layout for quick testing.

.related-thumbs {
  list-style: none;
  padding: 0;
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.related-thumbs li {
  background: #f8f9fa;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.related-thumbs li:hover {
  transform: translateY(-4px);
}

.related-thumbs img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
}

.related-thumbs .title {
  display: block;
  padding: 0.75rem;
  font-size: 0.95rem;
  color: #333;
  text-decoration: none;
  text-align: center;
}

This layout automatically adapts to different screen sizes, ensuring a responsive grid of related posts. Each thumbnail includes a smooth hover animation to enhance interactivity.

Alternative Design Layouts

Depending on your blog’s visual theme, you may want to change how thumbnails are displayed. Here are a few alternatives:

• Inline Thumbnails: Display smaller images beside post titles, ideal for minimalist layouts.
• Card Layout: Use larger images with short descriptions beneath each post title.
• Carousel Style: Use a JavaScript slider (like Swiper or Glide.js) to rotate related posts visually.

Example: Inline Thumbnail Layout

  {% for post in site.posts %}
    {% assign same_tags = post.tags | intersection: page.tags %}
    {% if same_tags != empty %}
      

        
          
          {{ post.title }}
        
      
    {% endif %}
  {% endfor %}

.related-inline li {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

.related-inline img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  margin-right: 0.75rem;
  border-radius: 6px;
}

This format is ideal if you prefer a simple text-first list while still benefiting from visual cues.

Improving SEO and Accessibility

To make your related posts section accessible and SEO-friendly:

• Always include alt text describing the thumbnail.
• Ensure thumbnails use optimized, compressed images (e.g., WebP format).
• Use descriptive filenames, such as seo-guide-cover.webp instead of image1.png.
• Consider adding structured data (ItemList schema) for advanced SEO context.

Adding schema helps search engines understand your content relationships and sometimes display richer snippets in search results.

Integrating with Your Blog Layout

After testing, you can include the _includes/related-posts.html file at the end of your post layout so every blog post automatically displays thumbnails:

  {{ content }}


{% include related-posts.html %}

This ensures consistency across all posts and eliminates the need for manual insertion.

Practical Use Case

Let’s say you run a digital marketing blog with articles like:

When a reader views the “Understanding SEO Basics” article, your related section will automatically show the other two posts because they share the seo tag, along with their thumbnails. This visually reinforces topic relevance and encourages exploration.

Performance Considerations

Since GitHub Pages serves static files, you don’t need to worry about backend load. However, you should:

• Compress your thumbnails to under 100KB each.
• Use loading="lazy" for all images.
• Prefer modern formats (WebP or AVIF) for faster loading.
• Cache images using GitHub’s CDN (default static asset caching).

Following these practices keeps your site fast even with multiple related images.

Advanced Enhancement: Dynamic Fallback Image

If some posts don’t have an image, you can set a default fallback thumbnail. Add this code inside your _includes/related-posts.html:

{% assign default_image = "/assets/images/fallback.webp" %}

This ensures your layout remains uniform, avoiding broken image icons or empty spaces.

Final Thoughts

Adding thumbnails to related posts on your Jekyll blog hosted on GitHub Pages is a small enhancement with big visual impact. It not only boosts engagement but also improves navigation, aesthetics, and perceived professionalism.

Once you master this approach, you can go further by building a fully card-based recommendation grid or even mixing tag and category signals for more precise post matching.

Next Step

In the next part, we’ll explore how to combine tags and categories to generate even more accurate related post suggestions — perfect for blogs with broad topics or overlapping themes.