Design meta line (s. Screenshot)

Hi there,

You would need to build the HTML inside the hero, then you'd need to re-write the CSS to apply to the new markup.

The HTML would look something like this:

<div class="hero-meta">
    <div class="hero-author-meta">
        <div class="hero-author-heading">
            Author
        </div>

        {{post_author}}
    </div>

    <div class="hero-date-meta">
        <div class="hero-date-heading">
            Date
        </div>

        {{post_date}}
    </div>

    <div class="hero-comments-meta">
        <div class="hero-comments-heading">
            Comments
        </div>

        [comment_number]
    </div>

    <div class="hero-views-meta">
        <div class="hero-views-heading">
            Views
        </div>

        [views]
    </div>

    <div class="hero-read-time-meta">
        <div class="hero-read-time-heading">
            Read Time
        </div>

        [read_time]
    </div>
</div>

Then your PHP:

add_shortcode( 'comment_number', function() {
    ob_start();
        comments_popup_link( __( 'Leave a comment', 'generatepress' ), __( '1 Comment', 'generatepress' ), __( '% Comments', 'generatepress' ) );
    return ob_get_clean();
} );

add_shortcode( 'views', function() {
    ob_start();
        echo the_views();
    return ob_get_clean();
} );

add_shortcode( 'read_time', function() {
    $post = get_post();
    $content = $post->post_content;
    $wpm = 300; // How many words per minute.

    $clean_content = strip_shortcodes( $content );
    $clean_content = strip_tags( $clean_content );
    $word_count = str_word_count( $clean_content );
    $time = ceil( $word_count / $wpm );

    ob_start();

        echo $time . ' Min.';

    return ob_get_clean();
} );

Hello Tom,

thank you very much for the help. I now understand how to create the shortcodes and then display them on the hero page.

Unfortunately, I cannot cope with the design of the necessary CSS instructions. I set up the presentation with Hero Page for one category. (https://horstschulte.com/2020/wem- Follows-die-spd-diese-beiden-haben-sich-wohl-endgueltig-disqualisiert/)

I tried to take David's CSS and adapt it to the hero page. That didn `t work. Can you help me?

Thank you very much and best regards, Horst

Hier noch die korrekte URL, bitte Einzelansicht des Artikels aufrufen.

https://horstschulte.com/category/kurznachricht/

Hi there,

That single post doesn't seem to be using the HTML structure I've set up in the post above. Can you double-check?

Hello Tom,

Thanks for the feedback.

I have now pasted the code for the category.

Thank you.

Best regards, Horst

Ah, sorry - I've made some changes to the HTML and PHP above: https://generatepress.com/forums/topic/design-meta-line-s-screenshot/page/2/#post-1201092

Can you re-add it and then let me know?

Thanks!

Hello Tom,

it looks really great. Thank you very much.

A little thing. How can I change the arrangement for the author and Gravatar so that it looks like the example (see screenshot)?
That's what it looks like in my blog now.
https://horstschulte.com/2020/wem-folgt-die-spd-diese-beiden-haben-sich-wohl-endgueltig-disqualifiziert/

Thank you and best regards, Horst

https://dl.dropboxusercontent.com/s/pf8pkqkbd5a1j63/2020-03-23_12h38_51.png?dl=0

Try this:

.page-hero-gravatar {
    grid-area: image;
    text-align: right;
}

.hero-author-meta {
    display: grid;
    grid-template-areas:
        "image label"
        "image author";
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

.hero-author-heading {
    grid-area: label;
}

span.author.vcard {
    grid-area: author;
}

.hero-author-meta a.url.fn.n {
    float: none;
}

Hello Tom,

just like that! Finally, thanks again for the great support.

Now I'm completely satisfied.

Best regards, Horst

Glad I could help :)