[Support request] How to get this look (Meta data)

Home Forums Support How to get this look (Meta data)

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #1346600
    Rohan Verma

    We want to have exact same look for the metadata (we also want author image with the name)
    : https://prnt.sc/t8zl7w.

    I have attached the website link as well

    #1347141
    David
    Staff
    Customer Support

    Hi there,

    try adding this PHP Snippet:

    // set entry header post meta
    add_action( 'wp', function() {
        if ( is_single() ) {
    
            add_filter( 'generate_header_entry_meta_items', function( $items ) {
                return array(
                    'author',
                    'date',
                    'comments-link',
                );
            } );
        }
    } );
    
    // add avatar to author
    add_filter( 'generate_post_author_output', function() {
        return sprintf( ' <div class="avatar vcard">%4$s</div><span class="byline"><span class="label">by</span><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' ) )
        );
    } );
    
    // Set date to latest and no link
    add_filter( 'generate_post_date_output', function( $output, $time_string ) {
        $time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time>';
    
        $updated_time = get_the_modified_time( 'U' );
        $published_time = get_the_time( 'U' ) + 86400;
    
        if ( $updated_time > $published_time ) {
            $time_string = '<time class="entry-date updated-date" datetime="%3$s" itemprop="dateModified">%4$s</time>';
        }
    
        $time_string = sprintf( $time_string,
            esc_attr( get_the_date( 'c' ) ),
            esc_html( get_the_date() ),
            esc_attr( get_the_modified_date( 'c' ) ),
            esc_html( get_the_modified_date() )
        );
    
        return sprintf( '<span class="posted-on"><span class="date-label">Posted on </span>%s</span>',
            $time_string
        );
    }, 10, 2 );
    
    // Remove labels from comments number link
    add_filter( 'comments_number', 'wporg_com_num', 10, 2 );
    function wporg_com_num ( $out, $num ) { // Two parameter as in filter described
        if ( 0 === $num ) { 
            $out = 'Leave Comment'; // If No comments
        } elseif ( 1 === $num ) {
            $out = ' 1 '; // If 1 comment
        } else {
            $out = $num; // More than 1 comment
        }
     
        return $out;
    }

    And this CSS to style it:

    /* Add top bottom border to meta */
    .single .entry-header .entry-meta {
        padding: 10px 0;
        border-top: 1px solid;
        border-bottom: 1px solid;
        border-color: #ccc;
    }
    
    /* Make all elements flex */
    .single .entry-header .entry-meta,
    .single .entry-header .entry-meta>span {
        display: flex;
        align-items: flex-end;
    }
    
    /* Postition labels over meta */
    .single .entry-header .entry-meta>span {
        flex-direction: column;
        align-items: flex-start;
        flex-basis: 20%;
    
    }
    
    /* Add border to posted-on and force comments over */
    .single .entry-header .posted-on {
        flex: 1;
        padding-left: 10px;
        border-left: 1px solid #ccc;
    }
    
    /* Vertical Align Comments */
    .single .entry-header .entry-meta .comments-link {
        align-items: flex-end;
        align-self: center;
    }
    
    /* set meta label font size */
    .single .entry-header .byline .label,
    .single .entry-header .posted-on .date-label {
        font-size: 12px;
    }
    
    /* Style Avatar */
    .single .entry-header .avatar img {
        border-radius: 100%;
        height: 36px;
        width: 36px;
        margin-right: 10px;
    }
    
    /* style comments link */
    .single .entry-header .comments-link a {
        font-size: 12px;
        background-color: #ff6666;
        color: #fff !important;
        padding: 5px 13px;
        border-radius: 3px 3px 0 3px;
        position: relative;
    }
    
    .single .entry-header .comments-link a:before {
        content: '';
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        right: 0;
        top: 100%;
        border: 0 solid transparent;
        border-width: 6px 10px;
        border-left-width: 0;
        border-top-color: #AA0000;
    }
    #1349828
    Rohan Verma

    Thanks David that code works. Can we can get this style https://prnt.sc/tanpmf

    I am liking this one more than the previous one. Date under the author name

    #1349835
    Rohan Verma

    And also this type of category style https://prnt.sc/tanzm9

    If possible please guide me. Thanks

    #1349908
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    For that style, you just need this:

    .entry-header .entry-meta {
        display: flex;
        flex-direction: column-reverse;
    }

    To move your categories, you’ll want to disable the output in Customize > Layout > Blog.

    Then, add this:

    add_action( 'generate_before_entry_title', function() {
        $categories_list = get_the_category_list( _x( ' ', 'Used between list items, there is a space after the comma.', 'generatepress' ) );
    
        if ( $categories_list ) {
            printf( '<span class="entry-meta cat-links"><span class="screen-reader-text">%1$s </span>%2$s</span>',
                _x( 'Categories', 'Used before category names.', 'generatepress' ),
                $categories_list
            );
        }
    
        $tags_list = get_the_tag_list( '', ' ' );
    
        if ( $tags_list ) {
            printf( '<span class="tags-links"><span class="screen-reader-text">%1$s </span>%2$s</span> ',
                esc_html_x( 'Tags', 'Used before tag names.', 'generatepress' ),
                $tags_list
            );
        }
    } );

    It’ll need some CSS, but it should get you started.

    #1350135
    Rohan Verma

    Tags are not showing up. I have checkmark it from layout blog but still, no tag is showing up in a single post. I have updated our site link

    #1350142
    Rohan Verma

    and how to show the date under the author name. With your code date is showing above author

    #1350841
    Tom
    Lead Developer
    Lead Developer

    Just updated the function above.

    Remove flex-direction: column-reverse; if you want the order reversed.

    #1350855
    Rohan Verma

    Tags are showing at the top after adding the PHP. I want the tag to be placed after the content area just like the default and the category above title

    #1351060
    Tom
    Lead Developer
    Lead Developer

    In that case, remove the code I just added. You should just be able to keep the “Display post tags” option turned on in Customize > Layout > Blog.

    #1351366
    Rohan Verma

    Hello, I have enabled that option still no tags showing up. All other meta options are working only tags are not showing up. Check screenshot: https://prnt.sc/tbm7f1

    I have updated site link as well so that you can check

    #1352075
    Tom
    Lead Developer
    Lead Developer

    Any other functions active on the site? Something must be turning them off.

    #1352315
    Rohan Verma

    Yes, there are some codes we are using;
    1) To show updated date
    add_filter( ‘generate_post_date_output’, function( $output, $time_string ) {
    $time_string = ‘<time class=”entry-date published” datetime=”%1$s” itemprop=”datePublished”>Published on: %2$s</time>’;

    if ( get_the_date() !== get_the_modified_date() ) {
    $time_string = ‘<time class=”entry-date updated-date” datetime=”%3$s” itemprop=”dateModified”>Last Updated on: %4$s</time>’;
    }

    $time_string = sprintf( $time_string,
    esc_attr( get_the_date( ‘c’ ) ),
    esc_html( get_the_date() ),
    esc_attr( get_the_modified_date( ‘c’ ) ),
    esc_html( get_the_modified_date() )
    );

    return sprintf( ‘<span class=”posted-on”>%s</span> ‘,
    $time_string
    );
    }, 10, 2 );
    function rocket_lazyload_exclude_src( $src ) {
    $src[] = ‘Logo-RMG-black.png’;

    return $src;
    }

    2) To show author image alongside the author name single post

    add_filter( ‘generate_post_author_output’, function() {
    return sprintf( ‘ <span class=”byline”>%1$s</span>’,
    sprintf( ‘<span class=”author vcard” itemtype=”http://schema.org/Person&#8221; itemscope=”itemscope” itemprop=”author”>%4$s<span class=”author-name” itemprop=”name”>%3$s</span></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’ ) )
    )
    );
    } );

    add_filter( ‘generate_header_entry_meta_items’, function() {
    return array(
    ‘author’,
    ‘comments-link’,
    ‘date’,
    );
    } );

    add_filter( ‘generate_footer_entry_meta_items’, function( $items ) {
    return array(
    ‘categories’,
    );
    } );

    #1352905
    Tom
    Lead Developer
    Lead Developer

    This function is preventing tags from showing up:

    add_filter( 'generate_footer_entry_meta_items', function( $items ) {
        return array(
            'categories',
        );
    } );

    What was the original intention of the filter? To exclude something?

    #1352908
    Rohan Verma

    No to show the author image alongside the name in a single post. Only for this purpose > https://prnt.sc/tca5rw

    can you share an alternate PHP code

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