How to Show Adjacent Posts

TODO:

When shown a single post, you may want to show link to other articles at the end of the post. This is a very common practice to improve user experience, so visitors can continue reading other articles without having to go back to the main blog page, or to other archive pages. If a user cam directly to a post, show the adjacent post is a good option to show visitors other articles that might be interesting as well.

 

<!--adjacent posts-->
{{post show="next" assign_to="next"}} 
{{post show="previous" assign_to="previous"}}
<section class="row">
    <div class="next col-md-6">
        {{if $next.data.post_permalink}}
        <a class="" rel="next" href="{{$next.data.post_permalink}}">
            <div>Next Article<br/>
            {{if $next.data.post_thumbnail}}
            <img src="{{$next.data.post_thumbnail}}" width="80">
            {{else}}
             <img src="http://placehold.it/80x80" width="80">
            {{/if}}
            </div> {{$next.data.post_title}}
        </a>
        {{/if}}
    </div>
    
    <div class="prev text-right col-md-6">
        {{if $previous.data.post_permalink}}
        <a class="" rel="prev" href="{{$previous.data.post_permalink}}">
            <div>Previous Article<br/>
            {{if $previous.data.post_thumbnail}}
            <img src="{{$previous.data.post_thumbnail}}" width="80">
            {{else}}
             <img src="http://placehold.it/80x80" width="80">
            {{/if}}
            </div> {{$previous.data.post_title}}</a>
        {{/if}}
    </div>
</section><!--/adjacent posts-->

 

Leave a Reply

Your email address will not be published. Required fields are marked *