Display post author on your blog post page using RainLab.Blog plugin

How to display post author on your blog post page

At some point you probably needed to create some kind of widget with post author data like it’s displayed on other blogging platforms such as Medium or as usually seen on many WordPress blogs.

Dive in to learn how to exactly get user data from post and display them on your CMS page

Let’s assume that you have some experience working with OctoberCMS and you already have CMS page with blog post component in place.

If you haven’t worked with RainLab.Blog plugin before, please go ahead and read the official documentation.

Post page

We are using bootstrap as css framework which won’t be a problem teaching you how to display user data but your design might be different so keep that in mind.

Basic display of post data

<section id="single-post">
    <div class="container">
        <div class="single-row row">
            <div class="single-col-1 col-xl-7 col-lg-7 col-md-8 col-sm-12 col-10">
                <!-- POST TITLE -->
                <h1 class="post-title">
                    {{ post.title }}
                </h1>
                <hr class="post-title-separator">
                <!-- POST PUBLISH DATE -->
                <p class="post-date">{{ post.published_at | strftime('%d.%m.%Y')}}</p>
            </div>
            <!-- POST CONTENT -->
            <div class="single-col-2 col-xl-7 col-lg-8 col-md-10 col-sm-10 col-10">
                {{ post.content_html|raw }}
            </div>
        </div>
    </div>
</section>

As you can see from the code above it’s simple and we get to show basic post data such as title, published at date, and post content. If you are having issues with date format try installing twig extension plugin.

Now, let’s say you want to display name, and avatar of the post author. If you tried working with OctoberCMS and Blog plugin it’s really simple. All you need to do is access user property inside post model.

<section id="single-post">
    <div class="container">
        <div class="single-row row">
            <div class="single-col-1 col-xl-7 col-lg-7 col-md-8 col-sm-12 col-10">
                <!-- POST TITLE -->
                <h1 class="post-title">
                    {{ post.title }}
                </h1>
                <hr class="post-title-separator">

                <!-- AUTHOR DATA -->
                 <img style="border-radius: 40px;display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px;" src="{{ post.user.avatar.path }}" height="80px;"/>
                <p class="post-date">By: 
                   style="color: #ef0d33">
                        {{ post.user.first_name }} {{ post.user.last_name }}
                    </a>
                </p>

                <!-- POST PUBLISH DATE -->
                <p class="post-date">{{ post.published_at | strftime('%d.%m.%Y')}}</p>
            </div>
            <!-- POST CONTENT -->
            <div class="single-col-2 col-xl-7 col-lg-8 col-md-10 col-sm-10 col-10">
                {{ post.content_html|raw }}
            </div>
        </div>
    </div>
</section>

If you are curious what is inside User model you can use code section on CMS page to find out. It’s best to use onEnd function as that’s when page and components are loaded fully. For example:

function onEnd(){
    dd($this->post->user->attributes); // This will give you user data 
}

Hope this helps you understand how RainLab.Blog Post component works