[Resolved] Design meta line (s. Screenshot)

Home Forums Support [Resolved] Design meta line (s. Screenshot)

Home Forums Support Design meta line (s. Screenshot)

  • This topic has 24 replies, 3 voices, and was last updated 4 years ago by Tom.
Viewing 10 posts - 16 through 25 (of 25 total)
  • Author
    Posts
  • #1201092
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You would need to build the HTML inside the hero, then you’d need to re-write the CSS to apply to the new markup.

    The HTML would look something like this:

    <div class="hero-meta">
        <div class="hero-author-meta">
            <div class="hero-author-heading">
                Author
            </div>
    
            {{post_author}}
        </div>
    
        <div class="hero-date-meta">
            <div class="hero-date-heading">
                Date
            </div>
    
            {{post_date}}
        </div>
    
        <div class="hero-comments-meta">
            <div class="hero-comments-heading">
                Comments
            </div>
    
            [comment_number]
        </div>
    
        <div class="hero-views-meta">
            <div class="hero-views-heading">
                Views
            </div>
    
            [views]
        </div>
    
        <div class="hero-read-time-meta">
            <div class="hero-read-time-heading">
                Read Time
            </div>
    
            [read_time]
        </div>
    </div>

    Then your PHP:

    add_shortcode( 'comment_number', function() {
        ob_start();
            comments_popup_link( __( 'Leave a comment', 'generatepress' ), __( '1 Comment', 'generatepress' ), __( '% Comments', 'generatepress' ) );
        return ob_get_clean();
    } );
    
    add_shortcode( 'views', function() {
        ob_start();
            echo the_views();
        return ob_get_clean();
    } );
    
    add_shortcode( 'read_time', function() {
        $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 );
    
        ob_start();
    
            echo $time . ' Min.';
    
        return ob_get_clean();
    } );
    #1205957
    Horst

    Hello Tom,

    thank you very much for the help. I now understand how to create the shortcodes and then display them on the hero page.

    Unfortunately, I cannot cope with the design of the necessary CSS instructions. I set up the presentation with Hero Page for one category. (https://horstschulte.com/2020/wem- Follows-die-spd-diese-beiden-haben-sich-wohl-endgueltig-disqualisiert/)

    I tried to take David’s CSS and adapt it to the hero page. That didn `t work. Can you help me?

    Thank you very much and best regards, Horst

    #1206177
    Horst

    Hier noch die korrekte URL, bitte Einzelansicht des Artikels aufrufen.

    https://horstschulte.com/category/kurznachricht/

    #1206207
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    That single post doesn’t seem to be using the HTML structure I’ve set up in the post above. Can you double-check?

    #1206420
    Horst

    Hello Tom,

    Thanks for the feedback.

    I have now pasted the code for the category.

    Thank you.

    Best regards, Horst

    #1206616
    Tom
    Lead Developer
    Lead Developer

    Ah, sorry – I’ve made some changes to the HTML and PHP above: https://generatepress.com/forums/topic/design-meta-line-s-screenshot/page/2/#post-1201092

    Can you re-add it and then let me know?

    Thanks!

    #1207158
    Horst

    Hello Tom,

    it looks really great. Thank you very much.

    A little thing. How can I change the arrangement for the author and Gravatar so that it looks like the example (see screenshot)?
    That’s what it looks like in my blog now.
    https://horstschulte.com/2020/wem-folgt-die-spd-diese-beiden-haben-sich-wohl-endgueltig-disqualifiziert/

    Thank you and best regards, Horst

    https://dl.dropboxusercontent.com/s/pf8pkqkbd5a1j63/2020-03-23_12h38_51.png?dl=0

    #1207711
    Tom
    Lead Developer
    Lead Developer

    Try this:

    .page-hero-gravatar {
        grid-area: image;
        text-align: right;
    }
    
    .hero-author-meta {
        display: grid;
        grid-template-areas:
            "image label"
            "image author";
        width: auto;
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-author-heading {
        grid-area: label;
    }
    
    span.author.vcard {
        grid-area: author;
    }
    
    .hero-author-meta a.url.fn.n {
        float: none;
    }
    #1208194
    Horst

    Hello Tom,

    just like that! Finally, thanks again for the great support.

    Now I’m completely satisfied.

    Best regards, Horst

    #1208714
    Tom
    Lead Developer
    Lead Developer

    Glad I could help 🙂

Viewing 10 posts - 16 through 25 (of 25 total)
  • You must be logged in to reply to this topic.