- This topic has 29 replies, 4 voices, and was last updated 2 years, 5 months ago by
Fernando.
-
AuthorPosts
-
July 5, 2022 at 3:06 pm #2274222
Anna
Hi Generatepress,
I’ve followed many posts in the forum to display the author name, publish date, update date, and estimated read time. However, I hit the limits of my CSS knowledge and haven’t found the answer in the forums to my questions.
2 related questions:
1. How can I get the order of the meta items to show like thisby Anna Rider Updated: July 30, 2021 Updated July 25, 2021 ~8 mins to read
Currently, the behavior looks like this:
Published: July 25, 2021 ~8 mins to readby Anna Rider
Or like this if there was an update
Updated: June 30, 2022 Published: June 24, 2022 ~6 mins to readby Anna Rider
In other words, I want to rearrange the order of the meta items and have appropriate spacing in between. I prefer them to show on 1 line but if that looks terrible, especially on mobile, I’m ok with making it 2 lines, in which cause I’d rather have the author and estimated read time on one line and the 2 dates on a second separate line.
Second related issue (let me know if I need to open a new ticket for this issue), is that the meta font size appears to get larger when I view the single post on a smaller (mobile) screen. It appears on desktop as the same font size as the body content. But on mobile, the meta font size is larger than the body which looks weird to me. How do I make the meta the same size as the body regardless of the screen size?
Here’s the code I’m using:
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 . ' mins'; } add_filter( 'generate_post_date_output', function( $output ) { $output .= '~' . tu_estimated_reading_time() . ' to read'; return $output; } );
/* https://generatepress.com/forums/topic/how-to-show-last-updated-date-as-well-as-the-original-published-date/ * https://generatepress.com/forums/topic/how-to-show-published-and-updated-dates/*/ /* Display updated date */ .posted-on .updated, .posted-on .updated + .entry-date{ display: inline-block; margin-right: 1em; } /*Add date prefixes */ .posted-on .updated:before { content: 'Updated: '; } .posted-on .entry-date:before { content: 'Published: '; } .entry-meta { display: inline-block; } .posted-on .entry-date.published { order: -2; }
July 5, 2022 at 8:44 pm #2274359Fernando Customer Support
Hi Anna,
Here’s a PHP snippet you can try:
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">Updated: %4$s</time> <time class="entry-date published" datetime="%1$s" itemprop="datePublished">Published: %2$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 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 . ' mins'; } add_filter( 'generate_post_date_output', function( $output ) { $output .= '~' . tu_estimated_reading_time() . ' to read'; return $output; } );
I included your
ttu_estimated_reading_time
PHP snippet in the code above.You shouldn’t need the CSS anymore
Adding PHP reference: https://docs.generatepress.com/article/adding-php/#code-snippets
Yes, to avoid confusion, may you start a new ticket for the second issue?
Side note: Here’s an alternative to your estimated time function if you want seconds in your estimated time:
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 ); $m = floor($word_count / 200); $s = floor($word_count % $wpm / ($wpm / 60)); if($m < 1) { $time = $s . ' second' . ($s <= 1 ? '' : 's'); } else { $time = $m . ' minute' . ($m <= 1 ? '' : 's') . ', ' . $s . ' second' . ($s <= 1 ? '' : 's'); } return $time; } add_filter( 'generate_post_date_output', function( $output ) { $output .= '~ ' . tu_estimated_reading_time() . ' to read'; return $output; } );
Hope this helps!
August 4, 2022 at 9:38 pm #2303833Anna
Hi Fernando,
I used your solution but I don’t see a change.
What I did:
1. Remove the CSS related to the dates.
2. Replaced mytu_estimated_reading_time
snippet with your code snippet.The result is I see no change to the “readby”. It is still stuck as 1 word How do I rearrange the items per my desired order as well as add a space.
I cleared the cache and reloaded (hard reload with the Network tab open and Disable cache checked).
Here’s a link to my staging site where you can see the meta information doesn’t meet the information I’m looking for (it’s missing the update date only has publish date, the date comes before the author name, and the “readBy” is one word)https://wn9dh3ioix-staging.onrocket.site/emulsion/
Thanks for your help.
August 4, 2022 at 9:45 pm #2303835Fernando Customer Support
What’s the entire PHP snippet you used and can you give a sample format?
August 5, 2022 at 3:02 pm #2304720Anna
Hi Fernando,
I used the snippet you shared in your reply #2274359.
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">Updated: %4$s</time> <time class="entry-date published" datetime="%1$s" itemprop="datePublished">Published: %2$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 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 . ' mins'; } add_filter( 'generate_post_date_output', function( $output ) { $output .= '~' . tu_estimated_reading_time() . ' to read'; return $output; } );
The current format using the above snippet you provided is:
Published on August 4, 2022 ~9 mins to readby Anna Rider
My desired format is the following:
By Anna Rider Updated on August 5, 2022 Published on August 4, 2022 ~9 mins to read
August 5, 2022 at 4:11 pm #2304750Ying
StaffCustomer SupportHi Anna,
Try adding this CSS:
.single .entry-meta { display: flex; } .single .entry-meta span.byline { order: -1; padding-right: 10px; }
August 5, 2022 at 4:34 pm #2304757Anna
Hi Ying,
Thank you for your help and providing the CSS snippet. This fixed the metadata for a post that has been updated. Here is an example: https://garlicdelight.com/emulsion/
However, it still looks like the undesired metadata for a post that has not been updated. You can see the example here:
https://garlicdelight.com/chopped-caprese-salad/How do I make the published but never updated post have the same metadata appearance as an updated post?
Thanks for your help.
August 7, 2022 at 5:29 pm #2306227Fernando Customer Support
How are you seeing it from your end? It seem like it’s in the right order from my end already: https://share.getcloudapp.com/12uL2P5k
August 11, 2022 at 7:28 pm #2310542Anna
Hi Fernando,
Yes, you are right because of this snippet, it is the desired order.
.single .entry-meta { display: flex; }
However, when I shrink my screen to a mobile view, the metadata is extremely hard to read because the items are on multiple lines now. This is worse for me in terms of readability. How can I get the same result as display: flex; but on smaller screens/mobile the words flow on 1 line like they do with this snippet.
.single .entry-meta { display: inline-block; }
Meaning I would prefer the following:
On desktop
by Anna Rider Published: August 23, 2021 ~5 mins to read
On mobile
by Anna Rider
Published: August 23, 2021
~5 mins to readInstead of this undesirable result:
by Anna Published: August. ~5 mins
Rider 23, 2021 to readMy problem with using inline-block is that we get back to the incorrect order of metadata.
August 14, 2022 at 3:38 am #2312328David
StaffCustomer SupportHi there,
change:
.single .entry-meta { display: flex; }
to:
.single .entry-meta { display: flex; flex-wrap: wrap; }
August 15, 2022 at 8:46 am #2313570Anna
Hi David,
Thank you. Your solution to add the wrap helped significantly.
1. Just curious, if it possible to have the dates on the same line if they fit the width? So that Update and Publish are on the same lines to leave less whitespace around the metadata? If that’s asking too much, I’m happy to leave it as is.2. One question about the display, when I see the metadata on this post in mobile mode, the “Published” text appears a bit higher to my eye than the byline. Why is that? Here is an example post where you can see this behavior when you shrink your screen down to mobile view size. https://garlicdelight.com/apple/
3. The metadata on my Category pages still uses the same old ordering of metadata items including no space between “read” and “by” so it looks like “readby”. How do I get this new format to show up on my Category pages. Here is an example of the current behavior: https://garlicdelight.com/recipes/
Thanks for your help.
August 15, 2022 at 5:36 pm #2313897Fernando Customer Support
1-3. Try turning these:
.single .entry-meta { display: flex; flex-wrap: wrap; } .single .entry-meta span.byline { order: -1; padding-right: 10px; }
into:
.single .entry-meta, .category .entry-meta { display: inline-flex; flex-wrap: wrap; align-items: center; } .single .entry-meta span.byline, .category .entry-meta span.byline { order: -1; padding-right: 10px; } .single .entry-meta span.posted-on time, .category .entry-met span.posted-on time { display: inline !important; }
August 16, 2022 at 10:59 am #2314871Anna
Hi Fernando,
Thank you for your help. I implemented the CSS you showed me and I like the formatting on mobile plus the dates are in line with the byline.
However, the “readby” problem is back where it is 1 word and missing a space. Also the byline is at the end of the metadata items now instead of the first item.Do you know how to fix this?
Here’s an example: https://garlicdelight.com/remoulade-sauce/
Thanks for your help.
August 16, 2022 at 5:45 pm #2315089Fernando Customer Support
It should look like this with the CSS I provided: https://share.getcloudapp.com/Z4uDbe4E
Looking at the CSS from my end, it seems it hasn’t been updated/changed yet.
I looked at the CSS you added, and it seems the that selectors are incorrect. Try copying and pasting the one I provided.
August 16, 2022 at 10:00 pm #2315182Anna
Hi Fernando,
Yes you are right. My apologies, I accidentally had
.single
twice.I’m curious. If I want to remove the meta data from showing up on Category pages, would I hide it in the CSS or another setting under Customizer?
Also, if I want the reading time to display on the same line as the Publish date when I shrink the screen to a mobile view how would I achieve that?
-
AuthorPosts
- You must be logged in to reply to this topic.