- This topic has 21 replies, 2 voices, and was last updated 2 years, 8 months ago by Leo.
-
AuthorPosts
-
July 2, 2019 at 10:45 am #947254Rob
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,
RobJuly 2, 2019 at 10:54 am #947269LeoStaffCustomer SupportHi 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.
July 2, 2019 at 4:07 pm #947474RobThanks, 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,
RobJuly 2, 2019 at 4:40 pm #947501LeoStaffCustomer Support1. 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-2You 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; }
July 3, 2019 at 12:12 pm #948273RobHey 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,
RobJuly 3, 2019 at 5:47 pm #948397LeoStaffCustomer SupportCan 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 π
July 3, 2019 at 5:56 pm #948405RobHey 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'>
July 3, 2019 at 6:02 pm #948413LeoStaffCustomer SupportCan you guide me to a page where I can see the result?
July 3, 2019 at 6:20 pm #948421RobJuly 3, 2019 at 6:50 pm #948426LeoStaffCustomer SupportTry 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-classesLet me know when this is done and I’ll tackle the CSS π
July 3, 2019 at 7:47 pm #948446RobDone! Thanks Leo, I really appreciate your work on this!!!
July 3, 2019 at 7:56 pm #948451LeoStaffCustomer SupportTry this CSS:
.page-hero.reviewedby .inside-page-hero { display: flex; }
July 3, 2019 at 8:06 pm #948453RobThank you, this is close!
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!
July 3, 2019 at 8:27 pm #948458LeoStaffCustomer SupportHmm 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.
July 3, 2019 at 10:38 pm #948483RobHey Leo,
I tried that (with the CSS provided above):
And without the CSS from above:
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.
-
AuthorPosts
- The topic ‘Want to add "Medically Reviewed By" near top of article’ is closed to new replies.