[Resolved] Read more button and author gravatar

[Swadhin]

Hi there,

1) The read more button produces a permalink structure like permalink/#5546. Will it create some SEO or duplicate content issue?

Can you please tell me how to get the read more text styled exactly as Brian does on his homepage http://www.woorkup.com? I used this code for read more button and it does not work when I have my read more as button style enabled. Even with having read more as text it gets mixed up in the post excerpt unlike Brian’s site where it aligns nicely visible on a new line. Please help me achieve that.

2) I am using this code snippet from Brian to get the updated dates in blog posts and on Google. It works best. I just want to add my gravatar to before my name like on this post https://smartblogger.com/affiliate-marketing/. Please help me 🙂

3) I want to create a custom page template for some of my posts (suppose for how to guides post) like this page where there is a featured image (would be great if Generatepress can do that custom excerpt in overlay on the featured image) and the content is a bit center-alligned with the sidebar.

Thank you so much.

[Tom]

Hi there,

1. He doesn’t use the button option, he uses this CSS:

a.read-more {
    border-bottom: 2px solid rgba(45, 130, 230, 0.4);
    margin-top: 10px;
    float: right;
}

2. This should help: https://generatepress.com/forums/topic/add-author-photo-for-each-post-in-blog-home/#post-335202

3. Are you talking about the top image/excerpt area? That would likely require some custom programming. If you check out the code on that page using developer tools, you’ll be able to see the necessary HTML/CSS.

[Swadhin]

Hi Tom,

1) The first snippet did not work. The result was the same as before adding the CSS…the read more button is still attached to the excerpt unlike Brian’s where it comes to a new line and more spaced.

2) It worked but the pic was a square one maybe 150*150 size. How to reduce it to a small circle as I shared the example link to you.

3) No that part might require a lot of coding, but I want just a full width featured image as they have and the content area and sidebar width and alignment (aren’t the body a bit aligned to the center with more empty space to the left and the sidebar has become narrow-er). I want that layout but it shouldn’t be site-wide it should be a template I can use on specific posts.

I linked the site to you if you wanted to see. 🙂

-Swadhin

[Tom]

1. Where did you add the CSS? I’m not seeing it anywhere.

2. You could do this:

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

3. Have you tried setting Customize > Layout > Blog > Featured Images > Posts to “Above Content Area”?

[Swadhin]

Hi Tom,

I hope you’re doing good. 🙂

I’m opening this thread back because some of our tips haven’t worked. Sorry for the delay, this was a temporary project back then so I did not give much importance.

1. The author image and date in the last updated section

This feature did not work despite I did everything you told. It was showing a big 150*150 image but now not showing even that and showing two dates instead.

Can you please help me give the code used on this site (finally found a GP site using it) to achieve a similar design I want and it shows the updated date on Google results also:

https://www.cloudliving.com/best-keyword-research-tools/ (Here is an image preview of what I am saying https://imgur.com/a/H6GBFxJ)

2. For the custom post type mentioned in #3 in the first message in this page

Tom, I was asking for a page template where I have some sections where the content is full-width (like the image in that post I mentioned above and some sections (like the content section) which are not more than 750-800 px wide.

For better understanding, here is another example from backlinko where you see exactly that (some sections full-width and some sections having a widthof 800-900px (approx))

Looking forward for your help 🙂

Thank you so much Tom,

[Tom]

1. The author needs to be enabled in order for the code to work. Can you turn it back on?

This code will prevent the image from being 150×150: https://generatepress.com/forums/topic/read-more-button-and-author-gravatar/#post-478526

It may need some more CSS cleaning up, which I’ll be happy to help with once it’s up.

2. That site is using something similar to our Page Header module for the full width page header. Then the content is all contained, until you reach the footer which goes full width again.

You can achieve this using the Page Header, and maybe something like Hooks for the footer.

Alternatively you would need to set the page to full width (https://docs.generatepress.com/article/page-builder-container/), then wrap your contained content around a container div.

I'm full width

<div class="contained-area">
    I'm contained.
</div>

I'm full width

With this CSS:

.contained-area {
    max-width: 700px;
    margin: 0 auto;
}

[Swadhin]

Tom,

Thanks so much for the help. Specially the second one now that you told me the solution appears so easy. Loving GP for this!

P.S. How do I change colors for the full-width sections (https://backlinko.com/google-search-console has a different color for each instance of full-width section).

For the gravatar (1st issue) I don’t know how to enable the author. If what I understood is to go by, I have enabled it from the customizer which now shows my name and the post date. Is this what you meant?

I have added the following code too:
.byline img {
width: 25px;
height: 25px;
border-radius: 50%;
position: relative;
vertical-align: middle;
margin: 0 10px;
}

But still neither the image shows nor the sizing of it. Please check here: http://www.alertcafe.com/how-to-delete-youtube-video-permanently.html

If you want, I can give you admin access once you reply.

Thanks so much Tom. You’re doing something valuable for those of us who don’t know coding. I mean it 🙂

[Tom]

For the first one, you can give this classes.

For example:

.blue {
    background-color: blue;
    color: white;
}

.purple {
    background-color: purple;
    color: white;
}

.grey {
    background-color: #dddddd;
    color: #000;
}

Then you can do this:

<div class="contained-area purple">
    I'm contained.
</div>

<div class="contained-area blue">
    I'm contained.
</div>

etc..

As for the second issue – where are you adding the function that’s supposed to add the gravatar?

[Swadhin]

Hi Tom,

1) Sorry (I’m really embarrassed) I had forgotten to activate the snippet I just saved it instead of save and activate.

The gravatar now appears, how do I get the comments count, and the design (gravatar to the left, separators etc like this https://imgur.com/a/H6GBFxJ)

2) Thanks for the codes. One question:

This color classes will add color to the contained “narrow” areas or the full width sections as in backlinko.com’s case?

Best regards,
-Swadhin

[Tom]

I just went ahead and coded this up for you 🙂

First, here’s your PHP:

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

	if ( ! is_single() && ! 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>';
	}

	echo $date;
}

Then this is your CSS:

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

.byline,
.comments-link,
.posted-on {
	display: inline-block;
}

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

.comments-link:before {
	display: none;
}

Then if you want to show the updated date, you can do this: https://docs.generatepress.com/article/show-the-updated-post-date/

[Swadhin]

Thanks so much Tom,

I truly appreciate you going out of the way to help me. It means a lot to be the part of a community like this. 🙂

I did as you’ve instructed and it exactly works as I wanted. But the comment (text or link) doesn’t appear. Plus I see a small gap between the meta data and the first paragraph/image. Please check the image https://imgur.com/a/WQZVu5o and the page link here

Tom,

Just sharing a quick win:

You won’t believe I was searching on how to remove meta data from comments and I was your answer to a similar question. Instead of going the easy way to hide it for visitors, I followed your detailed tutorial to remove it from the comments section of the theme’s function (I added the snippet via the plugin)

Thanks! (I am learning)
Best regards,
-Swadhin

[David]

Hi there, that gap is coming from the top margin on the entry-content.

This CSS should do the trick, adjust the margin to suit:

.entry-content {
    margin-top: 0.5em;
}

[Swadhin]

Hi David,

Thanks for the quick solution. It wonderfully works.

Should I wait for Tom to address this issue ” But the comment (text or link) doesn’t appear.”?

Thanks so much,

Best regards,
-Swadhin

[Tom]

The comment link won’t appear on single posts – it’s meant to only be on archive pages.

If you’d like it to appear on single posts, you can try removing this part of the code: ! is_single() &&

[Swadhin]

Thanks Tom 🙂

[Author]

Posts