Share Your Work

csbeck
Participant

Customizing the Author Page

I have been working on a client's HubSpot Blog. They have a listing page, blog pages and the option to view an author's bio. The information on the author's bio page was good, but it needed some styling (the author image was full width so it was very large and their info was below the image). I thought I would find a page template but there wasn't one. After much searching (interestingly enough, there wasn't any information about styling or changing information on an Author's Bio Page). For this current job, thankfully it only needed some styling changes. While doing some other design modifications, I went into the Design Manager, and accessed the style sheet for this client's pages. I found the section for the Blog Author Page styles. It didn't take too long and the results are much better than what they originally were.

Here's one of the author pages with the new styling: http://blog.j2interactive.com/author/jen-carter

 

All of the content on the Author Bio Page has individual styles for each of the content types:

.hs-author-profile {}
.hs-author-profile h2.hs-author-name {}
.hs-author-profile .hs-author-bio {}
.hs-author-profile .hs-author-avatar {}
.hs-author-profile .hs-author-avatar img {}
h3.hs-author-listing-header {}

 

Hopefully this information will help others who want a custom look to their Author Bio Pages.

 

7 Replies 7
KKemp
Member

Customizing the Author Page

Can you remove the author image entirely? The template I am editing will only allow me to modify the image displayed, with some limitations that I am not fond of. In my screenshot below, I can adjust the width, but that is it unless I am missing something. I would like to either adjust the width and height or delete the author image altogether. Any help would be appreciated.

 Screen Shot 2022-04-13 at 5.14.02 PM.png

0 Upvotes
Anonymous
Not applicable

Customizing the Author Page

{% if blog_author %}
$('body').addClass('blog-author-page');
{% endif %}

This adds a class for your body in all author pages. And you can specifically author page using the specific class. Hope it makes things easier for you.

shawnwinston
Participant | Partner
Participant | Partner

Customizing the Author Page

Where would you place this code?

0 Upvotes
shawnwinston
Participant | Partner
Participant | Partner

Customizing the Author Page

Update:  You can place this code directly in hubl markup, the script tag is necessary.

 {% if blog_author %}
             <script>
            $('body').addClass('blog-author-page');
            </script> 
{% endif %}

 

John
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

Customizing the Author Page

You can edit the layout that the page is pulling from. It will be in your listing [edit: blog listing] template.

In the HubL, you will find something like

{% if blog_author %}
...
{% endif %}

Edit layout/structure changes there!



I like kudos almost as much as cake – a close second.

Graham_USMC
Contributor | Partner
Contributor | Partner

Customizing the Author Page

This is perfect - exaclty what I was looking for. I wanted to add the author's website listing above the social icons and I was able to easily add with the conditional if statement. Just FYI, the hook for that in a loop is "blog_author.website" - simply copy the other if statements and remove the social icon class and swap out that hook and you can list the author's website as well. Thank you John!!

Samantha_Alford
Top Contributor

Customizing the Author Page

Thanks for posting this @csbeck!

 

It definitely will help me with something I'm working on.

 

I like what you didn't with the layout of the example page - great stuff!


Samantha Alford
Did my post solve the issue? If so, please accept it as a solution!
0 Upvotes