[Resolved] Want to add "Medically Reviewed By" near top of article

Home Forums Support Want to add "Medically Reviewed By" near top of article

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #947254
    Rob

    Hi GeneratePress,

    Amazing product! I’ve been running the Pivot theme for the last two months and love what you do. Thank you.

    My site has recently added a team of medical reviewers to review and approve our articles for scientific accuracy. As such, I’d like to add (near the top of each article) their names, photos, and links to their bio pages.

    Here’s an example of another site that does this: https://www.healthline.com/health/aging-gracefully

    See the supporting screenshot: https://imgur.com/1vROUmB

    And here’s an example of my site. See the supporting screenshot: https://imgur.com/FtPsnfP

    I’m happy to also have this in the widget section of an article or within the element that includes the article title.

    Things that might make this complicated:

    1. If we place this in a widget area, mobile users won’t see the “Medically reviewed by: _____” until they reach the bottom of the article.

    2. There are different reviewers for different articles. As such, there needs to be flexibility in which articles show which reviewers, and which don’t.

    Best,
    Rob

    #947269
    Leo
    Staff
    Customer Support

    Hi there,

    Unfortunately the only thing GP can help is to provide a hook which you can place the content.

    The after_entry_title hook would be what you are looking for:
    https://docs.generatepress.com/article/hooks-visual-guide/

    I believe what you need is some sort of author box plugin that will allow you to customize and add custom content (reviewers). Nothing built-in will help with this unfortunately.

    #947474
    Rob

    Thanks, Leo! After some tinkering, I decided to use conditional post tagging + Element Headers. Here’s the (current) result.

    Would you mind helping me stylize this a bit? Ideally, I’d like to:

    1. Have the image to the right of the text and centered, with a | bar separating the text and the image.
    2. Add a little more spacing between the h1 tag and the rest of the text.

    The hope is to have this text look similar to Example #2 on this page:

    https://docs.generatepress.com/article/page-hero-examples/

    Best,
    Rob

    #947501
    Leo
    Staff
    Customer Support

    1. Right of both lines of text? So it would be something like this but on the other side?
    https://docs.generatepress.com/article/entry-meta-style/#example-2

    You can see the CSS in that example as well.

    2. Modify this existing CSS:

    h1.header {
        letter-spacing: 2px;
    }

    to this:

    h1.header {
        letter-spacing: 2px;
        margin-bottom: 4em;
    }
    #948273
    Rob

    Hey Leo,

    Thanks for your reply!

    1. Yes, just like the example #2 on that page – only centered and with the photo to the right. It’s also fine if the photo is to the left. My main goal is to just have the | bar separating the text and the photo – and for these items to be next to each other (rather than underneath).

    I would copy/paste the PHP + CSS from Example #2, but the challenge is that our medical reviewer isn’t the author of the article. This is why I’m using a conditional Element header triggered through an article tag. The header just includes the article title along with the reviewer’s information. So, under this circumstance, I don’t know how to style this to look similar to example you’ve shown.

    The very last thing – to be super annoying (I am sorry) – is that I only want this styling to show for non-mobile users. For mobile, having these items stacked on top of each other looks totally fine.

    2. Thank you! This looks great. I just implemented it.

    Best,
    Rob

    #948397
    Leo
    Staff
    Customer Support

    Can you create a header element and add in all the elements you have in mind and I’ll do my best to provide some CSS?

    Let me know πŸ™‚

    #948405
    Rob

    Hey Leo,

    This is the html in the header. If I’m misunderstanding something, please let me know. And thank you for your help.

    <h1 class="header">{{post_title}}</h1>
    <h4>
    	Medically reviewed by: <a href='https://perfecthairhealth.com/about#medical-team/'>Reviewer Name, M.D.</a>
    </h4> <img src='https://perfecthairhealth.com/wp-content/uploads/2019/07/Po-Chang_Hsu-min.png'>
    #948413
    Leo
    Staff
    Customer Support

    Can you guide me to a page where I can see the result?

    #948421
    Rob
    #948426
    Leo
    Staff
    Customer Support

    Try this for your HTML:

    <div class="text">
        <h1 class="header">{{post_title}}</h1>
        <h4>Medically reviewed by: <a href='https://perfecthairhealth.com/about#medical-team/'>Reviewer Name, M.D.</a></h4>
    </div>
    <div class="image">
        <img src='https://perfecthairhealth.com/wp-content/uploads/2019/07/Po-Chang_Hsu-min.png'>
    </div>

    And add reviewby as a custom class for the header element:
    https://docs.generatepress.com/article/header-element-overview/#element-classes

    Let me know when this is done and I’ll tackle the CSS πŸ™‚

    #948446
    Rob

    Done! Thanks Leo, I really appreciate your work on this!!!

    #948451
    Leo
    Staff
    Customer Support

    Try this CSS:

    .page-hero.reviewedby .inside-page-hero {
        display: flex;
    }
    #948453
    Rob

    Thank you, this is close!

    View post on imgur.com

    It looks like the image is to the right of both the title and the “reviewed by”. If possible, I’d like the post title to be above both the “reviewed by” text and the photo, but for the “reviewed by” text + photo to be next to each other (for desktop only).

    I’m re-reading my earlier messages and realizing I wasn’t clear enough about this –– I am sorry!

    #948458
    Leo
    Staff
    Customer Support

    Hmm that case try this for the HTML:

    <h1 class="header">{{post_title}}</h1>
    <div class="image">
        <h4>Medically reviewed by: <a href='https://perfecthairhealth.com/about#medical-team/'>Reviewer Name, M.D.</a></h4>
        <img src='https://perfecthairhealth.com/wp-content/uploads/2019/07/Po-Chang_Hsu-min.png'>
    </div>

    Then I don’t think you will need any CSS but try that first.

    #948483
    Rob

    Hey Leo,

    I tried that (with the CSS provided above):

    View post on imgur.com

    And without the CSS from above:

    View post on imgur.com

    The first photo is close, we just need the post title to sit above both the “medically reviewed by” text + photo rather than next to it.

    I’m sorry for all of the back-and-forth on this.

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