Custom Author Box in Dawn Theme?

christhaefner · October 15, 2023, 7:06am

I was wondering if someone successfully added some more information about the author in the author box below each post. Currently, there is only the author image shown. No name, no bio, nothing.

Since Google is using the author’s experience as ranking factor, I would like to add more information here to make it easier for google to identify the author.

I have tried adding author object attributes myself, but design wise, it doesn’t seem to be working well for me.

So if there is anyone who can help add name and bio of the author below each post and just the name on top of each post, without breaking the design - feel free to reach out. I’d also be happy to pay for a good code snippet.

jannis · October 15, 2023, 7:49am

Here you go

Desktop:

And mobile:

The modifications:

In the partials/content.hbs I have modified the div with class single-footer-middle to this, adding the author name and bio:

        <div class="single-footer-middle">
        {{#if @custom.show_author}}
            <div class="single-footer-top">
                <h3 class="single-footer-title">Published by:</h3>
                <div class="author-list">
                    {{#foreach authors}}
                    <div class="author-image-placeholder u-placeholder square">
                        <a href="{{url}}" title="{{name}}">
                            <img class="author-image u-object-fit" src="{{img_url profile_image size="xs"}}" alt="{{name}}" loading="lazy">
                        </a>
                    </div>
                    <div class="author-meta-info">
                        <h4 class="author-name">
                            <a href="{{url}}" title="{{name}}">{{name}}</a>
                        </h4>
                        <span class="author-bio">{{bio}}</span>
                    </div>
                    {{/foreach}}
                </div>
            </div>
        {{/if}}
        </div>

Additionally, I have added this CSS via a code injection directly in the Ghost settings:

        <style>
            .author-list {
                display: flex; 
                flex-direction: row; 
                justify-content: flex-start; 
                align-items: flex-start; 
                gap: 2rem; 
                padding: 0 2rem;
            }

            .author-image-placeholder.u-placeholder.square {
                width: 8rem; 
                height: 8rem;
            }

            .author-meta-info {
                flex-grow: 1;
            }

            @media (max-width: 768px) {  
                .author-list {
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                }
            }
        </style>

Hope this achieves what you were looking for

christhaefner · October 15, 2023, 11:43am

Wow! Thank you so much @jannis! Looks great, thank you so much.
Have you also added your name above the posts as part of the meta information?

jannis · October 15, 2023, 1:08pm

No, seems like I missed that part in your original post.

To add the author to the meta info above the post, just extend the div with the class single-meta as follows:

<div class="single-meta">
        <span class="single-meta-item single-meta-date">
            <time datetime="{{date format="YYYY-MM-DD"}}">
                {{date published_at}}
            </time>
        </span>
        {{#if reading_time}}
            <span class="single-meta-item single-meta-length">
                {{reading_time}}
            </span>
        {{/if}}
        {{#primary_tag}}
            <span class="single-meta-item single-meta-tag">
                <a class="post-tag post-tag-{{slug}}" href="{{url}}">
                    {{name}}
                </a>
            </span>
        {{/primary_tag}}
        {{#if @custom.show_author}}
           {{#foreach authors}}
               <span class="single-meta-item single-meta-author">
                   <a class="post-author" href="{{url}}">
                       by {{name}}
                   </a>
               </span>
           {{/foreach}}
       {{/if}}
</div>

For that part you wouldn’t need any additional CSS, though you could use the single-meta-author class to style it however you’d like

christhaefner · October 15, 2023, 6:13pm

Super cool! Thanks

lizaliza · October 16, 2023, 6:05pm

thanks you for provide authorbox its cool.

timucin · November 22, 2023, 12:13am

1- I tried but it’s not working. Can you send content.hbs?
2- And another question is where do you put to css in code injection module? To site header or site footer?

jannis · November 22, 2023, 6:02am

Here is the entire file:

<article class="single {{post_class}}">

    {{#match @page.show_title_and_feature_image}}
        <header class="single-header gh-canvas">
            {{#is "post"}}
            <div class="single-meta">
                <span class="single-meta-item single-meta-date">
                    <time datetime="{{date format="YYYY-MM-DD"}}">
                        {{date published_at}}
                    </time>
                </span>
                {{#if reading_time}}
                    <span class="single-meta-item single-meta-length">
                        {{reading_time}}
                    </span>
                {{/if}}
                {{#primary_tag}}
                    <span class="single-meta-item single-meta-tag">
                        <a class="post-tag post-tag-{{slug}}" href="{{url}}">
                            {{name}}
                        </a>
                    </span>
                {{/primary_tag}}
                {{#if @custom.show_author}}
                    {{#foreach authors}}
                        <span class="single-meta-item single-meta-author">
                            <a class="post-author" href="{{url}}">
                                by {{name}}
                            </a>
                        </span>
                    {{/foreach}}
                {{/if}}
            </div>
            {{/is}}

            <h1 class="single-title">{{title}}</h1>

            {{#if custom_excerpt}}
                <div class="single-excerpt">
                    {{custom_excerpt}}
                </div>
            {{/if}}

            {{#if feature_image}}
            {{#unless no_image}}
                <figure class="single-media kg-width-{{width}}">
                    <div class="u-placeholder horizontal">
                        <img
                            class="u-object-fit"
                            srcset="{{> srcset}}"
                            sizes="(min-width: 1200px) 920px, 92vw"
                            src="{{img_url feature_image size="l"}}"
                            alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
                        >
                    </div>

                    {{#if feature_image_caption}}
                        <figcaption>{{feature_image_caption}}</figcaption>
                    {{/if}}
                </figure>
            {{/unless}}
            {{/if}}
        </header>
    {{/match}}

    <div class="single-content gh-content gh-canvas">
        {{content}}
    </div>

    {{#is "post"}}
    <div class="gh-canvas">
    <footer class="single-footer">

        <div class="single-footer-left">
        {{#prev_post}}
            <div class="navigation navigation-previous">
                <a class="navigation-link" href="{{url}}" aria-label="Previous post">
                    {{> "icons/arrow-left"}}
                </a>
            </div>
        {{/prev_post}}
        </div>

        <div class="single-footer-middle">
        {{#if @custom.show_author}}
            <div class="single-footer-top">
                <h3 class="single-footer-title">Published by:</h3>
                <div class="author-list">
                    {{#foreach authors}}
                    <div class="author-image-placeholder u-placeholder square">
                        <a href="{{url}}" title="{{name}}">
                            <img class="author-image u-object-fit" src="{{img_url profile_image size="xs"}}" alt="{{name}}" loading="lazy">
                        </a>
                    </div>
                    <div class="author-meta-info">
                        <h4 class="author-name">
                            <a href="{{url}}" title="{{name}}">{{name}}</a>
                        </h4>
                        <span class="author-bio">{{bio}}</span>
                    </div>
                    {{/foreach}}
                </div>
            </div>
        {{/if}}
        </div>

        <div class="single-footer-right">
        {{#next_post}}
            <div class="navigation navigation-next">
                <a class="navigation-link" href="{{url}}" aria-label="Next post">
                    {{> "icons/arrow-right"}}
                </a>
            </div>
        {{/next_post}}
        </div>

    </footer>
    </div>
    {{/is}}

</article>

And you put the CSS into the header of the site.

timucin · November 22, 2023, 4:10pm

I put that code in Header via injection but it didn’t work. Which CSS?

jannis · November 22, 2023, 4:47pm

No. The code I posted in my last post is the content.hbs. You need to download your theme, edit the content.hbs, and re-upload it.

You put the CSS into the code injection. I posted that here:

timucin · November 23, 2023, 6:27am

Its worked, thank you.

Topic		Replies	Views
Need help creating author bio box at end of articles Themes	11	86	October 10, 2024
How to add an author description box Developer help	10	1945	June 25, 2020
Add custom field to Author Object Developer help	2	521	June 17, 2019
Meta Descriptions/SEO for Authors Developer help	2	1010	March 13, 2019
How to get authors details in feature posts? Themes	1	524	June 23, 2022

Custom Author Box in Dawn Theme?

Related topics