Want to add "Medically Reviewed By" near top of article

[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

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[Leo]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[Leo]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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'>

[Leo]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Rob]

Here’s a link!

[Leo]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Rob]

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

[Leo]

Try this CSS:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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!

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

[Author]

Posts