Blog Author

HTML

Add to the bottom of the Blog Post Module

        
          <div class="post-footer-author">
              <h4>Author</h4>
              <div class="author-image"><img src="{{ post.authorImageUrl }}" alt="post.authorName" class="cover"></div>
              <div class="author-details">
                  <div class="author-name">
                      {{ post.authorName }}
                  </div>
                  <div class="author-title">
                      {{ post.authorTitle }}
                  </div>
                  <div class="author-bio-preview">
                      {{ post.authorBio | truncate : 700, "..." }}
                      
                  </div>
                  <div class="author-bio">
                      {{ post.authorBio }}
                      
                  </div>
              </div>
              <div class="clearfix"></div>
          </div>
          
        
      

CSS

Add to Styles.css File in the Blog Section

                
              /* Post Author */
              .blog-post .post-footer-author { margin-top: 30px; padding-top: 30px; border-top: 1px solid #ccc; }
              .blog-post .post-footer-author .author-image { position: relative; height: 130px; width: 130px; overflow: hidden; margin: 0 auto 30px; border-radius: 50%; }
              .blog-post .post-footer-author .author-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
              .blog-post .post-footer-author .author-details { text-align: center; }
              .blog-post .post-footer-author .author-details .author-name { font-size: 18px; color: #333333; letter-spacing: 0.1em; text-transform: uppercase; margin: 0; }
              .blog-post .post-footer-author .author-details .author-title { font-size: 14px; color: #545655; line-height: 1.1; text-transform: uppercase; margin-bottom: 15px; }
              .blog-post .post-footer-author .author-details .author-bio { display: none; }
              .blog-post .post-footer-author .author-details .author-bio, .author-bio-preview { font-size: 15px; color: #545655; line-height: 1.1; }
              .blog-post .post-footer-author .author-details .author-bio > *:last-child { display: inline; }
              .blog-post .post-footer-author .author-details .author-bio-toggle { font-size: 13px; display: inline; color: #545655; letter-spacing: 0.025em; text-transform: uppercase; }
              @media (min-width:501px) {
              	.blog-post .post-footer-author .author-image { float: left; margin: 5px 30px 10px 0; }
              	.blog-post .post-footer-author .author-details { text-align: left; }
              }