[Resolved] showing author photo and bio

Home Forums Support [Resolved] showing author photo and bio

Home Forums Support showing author photo and bio

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #622782
    Manish

    How can one show author photo at the top and author bio at the bottom of the article. Like here

    https://hpathy.com/cause-symptoms-treatment/hypertension-high-blood-pressure/

    GeneratePress 2.1.3
    GP Premium 1.6.2
    #622942
    David
    Staff
    Customer Support

    Hi there,

    we would recommend a plugin for this option. As this is fairly bespoke we could try it with some code, this should get you started.

    Add this PHP:

    add_action( 'generate_before_entry_title', 'db_author_box_header', 10 ); 
    function db_author_box_header() { if ( is_single() ) { ?>
        <div class="author-box-header">
            <div class="author-image">
                <?php echo get_avatar( get_the_author_meta('email'), '100' ); ?>
            </div>
    
            <div class="author-bio">
                <span>Written by <?php the_author_posts_link(); ?></span>
            </div>
        </div>
    <?php }}
    
    add_action( 'generate_before_comments_container', 'db_author_box_footer', 10 );
    function db_author_box_footer() {
      if ( is_single() ) { ?>
        <div class="author-box-footer">
            <div class="author-box-title">
                <h3>
        			About the author
        		</h3>
            </div>
            <div class="author-box-footer-inner">
                <div class="author-image">
                    <?php echo get_avatar( get_the_author_meta('email'), '100' ); ?>
                </div>
    
                <div class="author-bio">
                    <h3><?php the_author_posts_link(); ?></h3>
                    <p>
                        <?php the_author_meta('description'); ?>
                    </p>
                </div>
            </div>
        </div>
    <?php }}

    https://docs.generatepress.com/article/adding-php/

    And then add this CSS:

    .author-image img {
    	border-radius: 100%;
    	border: 3px solid white;
    	box-sizing: border-box;
    	width: 80px;
    }
    .author-box-header {
    	display: flex;
    	flex-direction: column;
    	align-items: center;
    	margin-top: -70px;
    	margin-bottom: 40px;
    }
    .author-box-footer-inner {
    	display: flex;
    	align-items: center;
    	background-color: #f6f7f8;
    	padding: 20px;
    }
    .author-box-title {
    	text-align: center;
    	box-sizing: border-box;
    	border: 1px solid #e6e7e8;
    	padding: 5px;
    }
    .author-bio {
    	padding: 0 20px;
    }
    .author-bio p {
    	margin-bottom: 0;
    }
    .author-box-footer h3 {
    	margin-bottom: 0.25em;
    }

    https://docs.generatepress.com/article/adding-css/

    #623436
    Manish

    Thanks for the help.

    Shouldn’t this php code work if we add it to gp hooks ‘after content’?

    Tried adding it that way but doesn’t work.

    #623481
    Manish

    Nevermind. I used a plugin that works with coauthors plus.

    But your support is Awesome!

    #623495
    David
    Staff
    Customer Support

    Glad you found a solution. That code cannot be executed for a hook. With GP 1.7 you will be able to just add the HTML to that hook as it has custom hooks and display condtions built it 😉

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