Add List of Featured Posts to Octopress

| Comments

A few months ago we were requested to add a list of featured posts to an index page in Octopress. So we did a bit of research about how Octopress + Jekyll + Lyquid template internally works. And we ended up with a nice solution that you can easily replicate in your own blog.

In this post we will show you how to add your own custom list of featured octopress posts like in Coconauts

The first thing you need to do is to add a new custom tag to your posts, we will call it featured

1
2
3
4
5
6

---
layout: post
author: Javier Rengel
published: true
featured: true
---

Create a new template file called featured_posts.html inside your source/_includes folder, with this content:

1
2
3
4
5
6
7
8
9
10
11
12

<div class="row">
   {% assign featured_count = '' %}
   {% for post in site.posts %}
       {% if post.featured and featured_count.size < 3 %}
          {% capture featured_count %}{{ featured_count }}*{% endcapture %}
           <div class="col-sm-4 col-lg-4 column featured-post">
              <a class='post-link' href="{{ root_url }}{{ post.url }}">{{ post.title | titlecase }}</a>
              <p>{{ post.content | strip_html | condense_spaces | truncate:300 }}</p>
           </div>
       {% endif %}
   {% endfor %}
</div>

Then you can list your three most recent featured posts in every page you want just by adding this code to your markdown or HTML file:

1

{% include featured_posts.html %}

Just remember to adapt your HTML code and your CSS to your needs (this one is based on bootstrap).

Featured posts

Microservices: The Small Print

Microservices get a lot of sales talk, which leads many teams to adopt them eagerly. However, people are not always aware that they come at a price. In this talk I gave at PyconES 2018 I discuss the basic theory around microservices architectures, and go over the common pain points that they bring …

Spaceroads Demo

We announced a few months ago we were working on a remake of [Skyroads](http://www.bluemoon.ee/history/skyroads/), a 1993 arcade game, on Unity3D. We called it [Spaceroads](http://coconauts.net/blog/2017/07/25/spaceroads/). Today we announce we have released a demo version you can play directly on …

Procedurally Generated Engine With Websockets

We have been working for some time on an engine for cocos2d for persistent procedurally generated 2D worlds, for building a few ideas based on this concept, like a Zelda-like RPG multiplayer game. ![screenshot](/images/posts/2017-10-30-proc-websockets/sector-cocos.png) The engine is built in NodeJS …

Comments