[Resolved] Order the meta items to author, read time, dates

Home Forums Support [Resolved] Order the meta items to author, read time, dates

Home Forums Support Order the meta items to author, read time, dates

Viewing 15 posts - 1 through 15 (of 30 total)
  • Author
    Posts
  • #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 this

    by 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;
        }
    #2274359
    Fernando
    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!

    #2303833
    Anna

    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 my tu_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.

    #2303835
    Fernando
    Customer Support

    What’s the entire PHP snippet you used and can you give a sample format?

    #2304720
    Anna

    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

    #2304750
    Ying
    Staff
    Customer Support

    Hi Anna,

    Try adding this CSS:

    .single .entry-meta {
        display: flex;
    }
    
    .single .entry-meta  span.byline {
        order: -1;
        padding-right: 10px;
    }
    #2304757
    Anna

    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.

    #2306227
    Fernando
    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

    #2310542
    Anna

    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 read

    Instead of this undesirable result:

    by Anna Published: August. ~5 mins
    Rider 23, 2021 to read

    My problem with using inline-block is that we get back to the incorrect order of metadata.

    #2312328
    David
    Staff
    Customer Support

    Hi there,

    change:

    .single .entry-meta {
        display: flex;
    }

    to:

    .single .entry-meta {
        display: flex;
        flex-wrap: wrap;
    }
    #2313570
    Anna

    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.

    #2313897
    Fernando
    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;
    }
    #2314871
    Anna

    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.

    #2315089
    Fernando
    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.

    #2315182
    Anna

    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?

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