<div class="blog-sidebar sidebar">
    <div class="sidebar-heading">
        recent posts
    </div>
    {% assign posts = site.posts | sort:"date" | reverse | slice: 0, 4 %}
    {% for post in posts %}
        <div class="media">
            <div class="media-left">
                <a href="{{ post.url | relative_url }}">
                    <img class="media-object" src="{{ 'assets/blog-images/' | append: post.img.url | absolute_url }}">
                </a>
            </div>
            <div class="media-body">
                <h3 class="media-heading"><a href="{{ post.url | relative_url }}">{{ post.title | escape }}</a></h3>
                <p>{{ post.date | date: "%b %-d, %Y" }}</p>
            </div>
        </div>
    {% endfor %}
</div>
