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

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 …

Bank Holiday Hackday: Algorithmic Trading

As it is becoming tradition, we dedicated the last UK bank holiday to hacking activities. In this occassion we wanted to something bitcoint-related, as it is lately all the rage. We developed on the idea of an automated investing algorithm that would use an API to buy/sell bitcoin automatically, …

Comments