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

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, …

Escaperoom Early Access

A couple of months ago, we showed you [Escaperoom](https://coconauts.net/blog/2017/05/29/bank-holiday-hackday-escape-room-on-unity3d/), a puzzle game we developed during a hackday. We’ve continued improving the game after that, and today we want to show you a first polished prototype. ![3dview](/ …

Smartwatch Prototype With ESP8266: ESPmartwatch

It’s been a while since we built and deprecated our [Watchduino 2](http://coconauts/projects/watchduino2) smartwatch built with Arduino and BLE technology. The reason why we stopped developing the prototype was because it was not as optimal as we expected, and the bluetooth communication was …

Comments