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

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.

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

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

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

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 :)

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

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

Here’s a link!

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 :)

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

Try this CSS:

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

Thank you, this is close!

https://imgur.com/frtKHpL

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!

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.

Hey Leo,

I tried that (with the CSS provided above):

https://imgur.com/VbOrfjf

And without the CSS from above:

https://imgur.com/FzMUriq

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.