[Resolved] Entry Meta Style

[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!

[Leo]

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 );
} );

[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?

[Leo]

So nothing is showing at all?

Are they set to displayed here?

Let me know 🙂

[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?

[Tom]

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?

[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

[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?

[Tom]

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?

[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.

[Tom]

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

[Ronja]

Hi Tom,

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

[Tom]

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?

[Ronja]

Oh yes, that would be great!

[Tom]

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.

[Author]

Posts