customizing featured post display on mediumish

What Is the Featured Post Section?

The featured post section in the Mediumish Jekyll theme typically highlights your most recent blog post. It's positioned prominently on the homepage, often with a large image and headline to capture attention. While this is helpful, it can be improved by offering more control—like choosing which post to feature, excluding certain tags, or rotating content dynamically.

Why Customize the Featured Post?

Customizing the featured post allows you to:

• Control exactly what content appears first
• Feature evergreen or high-converting posts, not just recent ones
• Exclude promotional or temporary articles
• Improve visual consistency with custom styles

Default Mediumish Implementation

The default implementation in index.html usually looks something like this:

{% assign featured = site.posts.first %}
<div class="featured-post">
  <a href="{{ featured.url }}">
    <img src="{{ featured.image }}" alt="{{ featured.title }}">
    <h2>{{ featured.title }}</h2>
    <p>{{ featured.excerpt | strip_html | truncatewords: 25 }}</p>
  </a>
</div>

This approach assumes the most recent post should be featured, but that's not always ideal.

How to Customize the Featured Post Display

1. Add a Custom Front Matter Variable

Open any post you'd like to feature and add a custom front matter flag:

---
layout: post
title: "Why Jekyll is Still Relevant in 2025"
featured: true
---

2. Update Homepage Logic

Now modify index.html to look for this variable instead of the first post:

{% assign featured_posts = site.posts | where: "featured", true %}
{% if featured_posts.size > 0 %}
  {% assign featured = featured_posts.first %}
  <div class="featured-post">
    <a href="{{ featured.url }}">
      <img src="{{ featured.image }}" alt="{{ featured.title }}">
      <h2>{{ featured.title }}</h2>
      <p>{{ featured.excerpt | strip_html | truncatewords: 25 }}</p>
    </a>
  </div>
{% endif %}

3. Style the Featured Section

Enhance the styling in your CSS file:

.featured-post {
  display: block;
  margin: 2rem 0;
  padding: 1.5rem;
  background: linear-gradient(to right, #ffffff, #f5f5f5);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.featured-post img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 1rem;
}
.featured-post h2 {
  font-size: 1.8rem;
  margin: 0 0 0.5rem;
}
.featured-post p {
  font-size: 1rem;
  color: #555;
}

4. Exclude Featured from Other Sections

If you don’t want the featured post repeated in the Latest Posts section, update that loop to exclude it:

{% assign all_posts = site.posts %}
{% assign featured_posts = all_posts | where: "featured", true %}
{% assign recent_posts = all_posts | where_exp: "post", "post.featured != true" | slice: 0, 4 %}

{% for post in recent_posts %}
  <div class="latest-post-card">
    <a href="{{ post.url }}">
      <img src="{{ post.image }}" alt="{{ post.title }}">
      <h3>{{ post.title }}</h3>
    </a>
  </div>
{% endfor %}

Case Study: Manual Control Over Feature Content

A Jekyll-based tech blog wanted to highlight tutorial content over news posts. By tagging specific articles as featured: true, they gained full editorial control. Over the next 3 months, engagement on featured content increased by 35%, and users spent more time reading key tutorials that were strategically placed on the homepage.

Extra Tip: Rotate Featured Posts Randomly

You can rotate featured content randomly using Liquid filters:

{% assign featured_pool = site.posts | where: "featured", true | sample: 1 %}
{% assign featured = featured_pool[0] %}

Note: This works at build time, so it doesn’t change per visitor unless you rebuild the site.

Conclusion

Customizing the featured post section in the Mediumish Jekyll theme gives you powerful control over homepage storytelling. Whether you use front matter tags, random selection, or dynamic layout enhancements, this customization lets you put your best content in the spotlight and optimize for user engagement.