Tutorials

Table of contents
Close

How to add a Styled Blog Author Profile to the Bottom of your Blog Posts

Check out one of the more popular and readable ways to display author information underneath Blog Posts 

Example

blogauthor

 

mobileblogauthor

Step 1:

Add the following CSS to your Blog Style Sheet
.full-article-footer {
    border-top: 1px solid #E0DFDB;
}




.article-footer {
    padding: 20px 10px 10px 10px;
    min-height: 115px;
    display:table;
}




.avatar-module {
    display: table-cell; 
    vertical-align: middle;
}




.avatar-module img {
    border-radius: 50%!important;
    height: 120px;
    width: 120px;
    float: left;
    margin:0px 20px 0px 20px;
}




.article-footer p {
    line-height:1.5em;
    padding-left:15px;
}




a.author-link {
    font-size:25px;
    line-height:2em;
    color:#617a3a;
    text-decoration:none;
}




a.author-link:hover {
    color:#000000;
    text-decoration:none;
}




@media (max-width:750px) {
.article-footer {
display:inherit;
margin:0px;
}




.avatar-module {
display:inherit; 
vertical-align: none;
}




.avatar-module img {
margin-left: auto;
margin-right: auto;
display: block;
float:none;
margin-top:0px;
}




.article-footer p {
text-align:center;
padding-left:0px;
}
}

Step 2

Add the following HTML Snippet to your Blog Listing Template underneath your blog article content. Typically this is added underneath Topic HTML - see screenshot 

 


<div class="full-article-footer">
     <div class="article-footer">
        {% if content.blog_post_author.avatar %}
            <div class="avatar-module">
                <img class="avatar" height="100px" src="{{ content.blog_post_author.avatar }}">
            </div>
        {% endif %}
        <p>Written by
            <br>
            <a class="author-link" href="{{ group.absolute_url }}/author/{{ content.blog_post_author.slug }}">{{ content.blog_post_author.full_name }}</a>
            <br>
            {{ content.blog_post_author.bio }}
        </p>
    </div>
</div>
blogauthorhtml