in education

How to - Display author on blog post


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 are new to OctoberCMS we will try to keep it simple, and 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.

Let's see some standard 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 
}

If you need more features, you can check our blog toolbox plugin, with it you can get even more data for your autor sections and pages, and you get a nice component ready for author page (*html and design is not included, only basic to showcase it's use)

Small details but those are important to make your development easier, for example you had to use post.user.first_name to get author's first name, and if you use our plugin then you can use

{{ post.getAuthor().first_name }}

directly in your twig. Method getAuthor is much more friendly and easier to remember. And don't forget the additional data you can set for your users such as: social network links, biography, contact info and more.

If you are interested you can check tutorials for blog toolbox and get more sense how this plugin can help you.

Thank you for reading, if you have any questions or just want to say hi feel free to send an email on info@ideaverum.com