[Resolved] Entry Meta Style

Home Forums Support Entry Meta Style

Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #958088
    Ronja

    https://docs.generatepress.com/article/entry-meta-style/

    I just love the design of the first example shown on the link and would like to use it for my website:
    the author name including gravatar picture, number of comments and the last updated date.
    However I would like to have the title first, then the featured picture and the author/comment/date section underneath.

    I installed the “Insert PHP Code Snippet” Plugin and inserted the given PHP Snippet Code.

    First problem:
    If I now insert the CSS, the date appears (btw why does it appear as a link and how can I remove the hyperlink?), the author name will appear after the date and without any picture, instead before it and the comment section is missing completely.

    Second problem:
    How can I move the section under the picture without moving the title?

    I used this CSS:

    .byline img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    margin: 0 10px 0 0;
    }

    .comments-link,
    .posted-on {
    border-left: 1px solid #ddd;
    padding-left: 10px;
    margin-left: 10px;
    }

    I would be really grateful for your help!

    #958458
    Leo
    Staff
    Customer Support

    Hi there,

    1. Strange. I just tested the code and the result is correct:
    https://www.screencast.com/t/RrbL0RCTy

    Are you using the latest theme version?
    https://docs.generatepress.com/article/generatepress-and-gp-premium/

    2. This PHP snippet should move it the entry meta after the featured image:

    add_action( 'after_setup_theme', function() { 
        remove_action( 'generate_after_entry_title', 'generate_post_meta' );
        add_action( 'generate_after_entry_header', 'generate_post_meta', 15 );
    } );
    #958802
    Ronja

    1. I updated the version now, but it’s still not working. Maybe I made a mistake with the Php insert. That’s the snippet I added:

    <?php
    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" 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' ) )
            )
        );
    } );
    
    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(
            'date',
            'categories',
        );
    } );
    add_action( 'after_setup_theme', function() { 
        remove_action( 'generate_after_entry_title', 'generate_post_meta' );
        add_action( 'generate_after_entry_header', 'generate_post_meta' );
    } );

    Or is there another way to insert php than via a plugin?

    #958831
    Leo
    Staff
    Customer Support

    So nothing is showing at all?

    Are they set to displayed here?

    Let me know 🙂

    #958905
    Ronja

    Hi Leo,

    I just checked it again and saw that the manual is for the preview of the blog posts. But I would like to have it only on my actual blog posts. What would that CSS and PHP look like?
    The gravatar still doesn´t work. Do I maybe have to type an ID number in the PHP Code?

    #959416
    Tom
    Lead Developer
    Lead Developer

    I’m not too sure what you mean by your actual blog posts? I’m seeing the above code working on your homepage and single blog posts?

    You need to add this CSS to inline them:

    .post-image + .entry-meta > * {
        display: inline-block;
    }

    Not sure why the gravatar isn’t working – you don’t need to replace ID in the code. Do you have any other custom functions?

    #959856
    Ronja

    Ok. So this is the CSS added:
    .byline img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    margin: 0 10px 0 0;
    }

    .comments-link,
    .posted-on {
    border-left: 1px solid #ddd;
    padding-left: 10px;
    margin-left: 10px;
    }
    .post-image + .entry-meta > * {
    display: inline-block;
    }

    .posted-on .updated {
    display: inline-block;
    }
    .posted-on .updated + .entry-date {
    display: none;
    }

    .posted-on .updated:before {
    content: “Zuletzt aktualisiert: “;

    If I have a look at my single blog posts I can see the following:
    1. blog post title
    2. Name | Date
    3. featured picture

    How I want it to be is:
    1. blog post title
    2. featured picture
    3. Gravatar + Name + Comments + date (like here: https://ibb.co/R6Hxp4s) and the date shouldn´t appear as a hyperlink

    #959935
    Ronja

    **I managed to put in the Gravatar now. 🙂
    How can I change the hyperlink, so the reader is directed to my about-me page as soon as he clicks on my name?

    #960353
    Tom
    Lead Developer
    Lead Developer

    I just edited the PHP Leo provided here: https://generatepress.com/forums/topic/entry-meta-style/#post-958458

    It should move the meta below the featured image.

    What’s the code you’re using for the author/gravatar now?

    #960838
    Ronja

    Thanks Tom, the php worked. It´s below the picture now.

    I had the gravatar turned off in settings, so all I had to do was to turn it on again…

    Now it´s only the comments that are missing, removing the hyperlink on the date and changing the hyperlink on the authors name.

    .comments-link, –> maybe by adding some CSS here??
    .posted-on {
    border-left: 1px solid #ddd;
    padding-left: 10px;
    margin-left: 10px;
    }
    In the customizer I can tick the comments sign for the preview, but not for the single post entrys.

    #961323
    Tom
    Lead Developer
    Lead Developer

    Are you wanting the comments link to appear on single posts? As of right now it only works on archives, unfortunately.

    #961576
    Ronja

    Hi Tom,

    this blog Link is also using the Generatepress Theme and shows the comments in the single posts.

    #962095
    Tom
    Lead Developer
    Lead Developer

    Yes, they’re using a custom function for that. We can do the same – where do you want the comments link to show up? Between the author and date?

    #962223
    Ronja

    Oh yes, that would be great!

    #962359
    Tom
    Lead Developer
    Lead Developer

    Can you share the exact code you’re using now for all of the post meta? That way I can add onto it to prevent conflicts.

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