[Resolved] Design meta line (s. Screenshot)

Home Forums Support Design meta line (s. Screenshot)

Viewing 15 posts - 1 through 15 (of 25 total)
  • Author
    Posts
  • #1194752
    Horst

    Hi there,

    I saw this screenshot in another thread here in the forum. How can the design of the meta line be redesigned as in the example? In addition to the content on my blog, I also added views. I would also like to take this into account. Do you have a solution for me?

    Thank you very much and best regards, Horst

    https://dl.dropboxusercontent.com/s/pfyz13ahv67uata/Screen%20Shot%202020-03-13%20at%2023.35.59.png?dl=0

    #1195028
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    What’s the main aspect you’re going for? The text descriptive text above the meta items?

    You would need to set the HTML up appropriately, so the descriptive text had its own elements. For example, the views and read time don’t have the necessary HTML right now for that kind of layout.

    Let me know 🙂

    #1195600
    Horst

    Hi there,
    yes, that’s what it was about. I have attached the presentation.

    I thought I had read about this topic here in the forum before, but I never found it again. When I found the screenshot (see above), I thought again that the topic had already been dealt with here.

    If it is too difficult to complete the presentation in this way, I don’t want to do any unnecessary work. Thanks for the feedback.

    Regards, Horst

    https://dl.dropboxusercontent.com/s/y2yenkhki2bj1gc/2020-03-15_17h30_43.png?dl=0

    #1195902
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    It’s not easy, but it’s possible.

    Can you share the function you’re currently using to add the gravatar + other items to the meta? We should be able to tweak it 🙂

    #1196501
    Horst

    Hi there,
    I hope you don’t laugh now when you look at my adjustment (Part 2). Part 1 came from one of your threads in the forum.

    This is how it works so far.

    Thanks for your help.

    Regards, Horst

    Part 1

    add_filter( 'generate_post_author', '__return_false' );
    add_filter( 'generate_show_comments', '__return_false' );
    add_filter( 'generate_post_date_output', 'tu_fancy_byline' );
    function tu_fancy_byline( $date ) {
    	printf( ' <span class="byline">%1$s</span>',
    		sprintf( '<span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">%4$s<a href="%1$s" title="%2$s" rel="author"><span class="author-name" itemprop="name">%3$s</span></a></span>',
    			esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
    			esc_attr( sprintf( __( 'View all posts by %s', 'generatepress' ), get_the_author() ) ),
    			esc_html( get_the_author() ),
    			get_avatar( get_the_author_meta( 'ID' ) )
    		)
    	);
    	
    	echo $date;
    
    	if ( ! post_password_required() && ( comments_open() || get_comments_number() ) ) {
    		echo '<span class="comments-link">';
    			comments_popup_link( __( 'Leave a comment', 'generatepress' ), __( '1 Comment', 'generatepress' ), __( '% Comments', 'generatepress' ) );
    		echo '</span>';
    	}
    }
    

    Part 2

     function tu_estimated_reading_time() {
        $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 );
    
        return $time . ' Min.';
    }
    
    add_filter( 'generate_post_date_output', function( $output ) {
       $output .= ' | <span id="views">' . the_views() . '</span>' . '<span id="read-time"> Lesezeit: ' . tu_estimated_reading_time() . '</span>' ;
        return $output;  
     } 	);
    
    #1196813
    Tom
    Lead Developer
    Lead Developer

    Ok, let’s adjust it a bit:

    add_filter( 'generate_post_author', '__return_false' );
    add_filter( 'generate_show_comments', '__return_false' );
    add_filter( 'generate_post_date_output', 'tu_fancy_byline' );
    function tu_fancy_byline( $date ) {
        printf( ' <span class="byline">%1$s</span>',
            sprintf( '<div class="author-heading">Author</div><span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">%4$s<a href="%1$s" title="%2$s" rel="author"><span class="author-name" itemprop="name">%3$s</span></a></span>',
                esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
                esc_attr( sprintf( __( 'View all posts by %s', 'generatepress' ), get_the_author() ) ),
                esc_html( get_the_author() ),
                get_avatar( get_the_author_meta( 'ID' ) )
            )
        );
    	
        echo '<span class="date-wrapper"><span class="date-headline">Date</span>';
            echo $date;
        echo '</span>';
    
        if ( ! post_password_required() && ( comments_open() || get_comments_number() ) ) {
            echo '<span class="comments-link-wrapper"><span class="comments-link-heading">Comments</span>';
                echo '<span class="comments-link">';
                    comments_popup_link( __( 'Leave a comment', 'generatepress' ), __( '1 Comment', 'generatepress' ), __( '% Comments', 'generatepress' ) );
                echo '</span>';
            echo '</span>';
        }
    
        echo '<span class="views-wrapper"><span class="views-heading">Views</span>';
            echo '<span id="views">' . the_views() . '</span>';
        echo '</span>';
    
        echo '<span class="read-time-wrapper"><span class="read-time-heading">Read Time</span>';
            echo '<span id="read-time"> Lesezeit: ' . tu_estimated_reading_time() . '</span>';
        echo '</span>';
    }
    
    function tu_estimated_reading_time() {
        $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 );
    
        return $time . ' Min.';
    }

    It won’t be pretty right away, but it should give us the HTML we need to accomplish that layout.

    Let me know 🙂

    #1197071
    Horst

    Hello Tom,

    thank you very much. I have inserted the code. It looks good. Can you give me an example of the CSS needed? I would then (hopefully) be able to customize the rest of the content myself. That would be great.

    Thanks for the great work.
    Regards, Horst

    #1197172
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    .single .entry-header .entry-meta,
    .single .entry-header .entry-meta>span {
        display: flex;
    }
    
    .single .entry-header .entry-meta>span {
        flex-direction: column;
        align-items: center;
        flex: 1 0 20%;
        line-height: 3.5em;
    }
    
    .single .entry-header .entry-meta span>span,
    .author-heading {
        border-left: 0;
        padding: 0 !important;
        margin: 0 !important;
        display: block;
        width: 100%;
        text-align: center;
    
    }
    
    .single .entry-header .entry-meta>span>span:first-child,
    .author-heading {
        border-bottom: 1px solid;
    }

    I think you still have the filter for the_views() function as the | is still being displayed.

    #1197211
    Horst

    Hello David,

    Thank you very much for the great work. It looks exactly the way I wanted it to.

    Thank you very much and best regards, Horst

    #1197221
    David
    Staff
    Customer Support

    You’re welcome – let us know if you need help with the mobile / tablet responsive views 🙂

    #1198050
    Horst

    Hello tom, hello david,

    The compilation of the first part of the code used is probably due to the output of the update date. However, I would like to issue the date of the contribution. Can you tell if I’m right and how to change the code accordingly?

    Otherwise everything has turned out very nicely. Thanks again.

    Regards, Horst

    #1198239
    David
    Staff
    Customer Support

    I am seeing these 2 CSS styles in your site – maybe in your child theme ?

    .posted-on .published {
        display: none;
    }
    
    .posted-on .updated {
        display: block;
    }

    If you remove them then it will display the published date.

    #1198246
    Horst

    Hi there,

    have already found the error. CSS. : – /
    Thanks.

    Regards, Horst

    #1198312
    David
    Staff
    Customer Support
    #1200440
    Horst

    Hi there,
    I am just wondering whether the changed meta line could be transferred to a hero header. Would the effort be high or would this takeover be relatively easy?

    I find this solution very nice.
    https://torquemag.io/2020/03/consequences-of-not-updating-your-wordpress-website/

    Best regards, Horst

Viewing 15 posts - 1 through 15 (of 25 total)
  • You must be logged in to reply to this topic.