- This topic has 24 replies, 3 voices, and was last updated 4 years ago by Tom.
-
AuthorPosts
-
March 20, 2020 at 4:18 pm #1201092TomLead DeveloperLead 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(); } );
March 22, 2020 at 8:10 am #1205957HorstHello 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
March 22, 2020 at 8:41 am #1206177HorstHier noch die korrekte URL, bitte Einzelansicht des Artikels aufrufen.
March 22, 2020 at 8:56 am #1206207TomLead DeveloperLead DeveloperHi 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?
March 22, 2020 at 10:41 am #1206420HorstHello Tom,
Thanks for the feedback.
I have now pasted the code for the category.
Thank you.
Best regards, Horst
March 22, 2020 at 3:54 pm #1206616TomLead DeveloperLead DeveloperAh, 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!
March 23, 2020 at 3:59 am #1207158HorstHello 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
March 23, 2020 at 9:43 am #1207711TomLead DeveloperLead DeveloperTry 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; }
March 24, 2020 at 3:52 am #1208194HorstHello Tom,
just like that! Finally, thanks again for the great support.
Now I’m completely satisfied.
Best regards, Horst
March 24, 2020 at 9:48 am #1208714TomLead DeveloperLead DeveloperGlad I could help 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.