- This topic has 19 replies, 2 voices, and was last updated 1 year, 6 months ago by
Leo.
-
AuthorPosts
-
July 2, 2019 at 10:45 am #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,
RobJuly 2, 2019 at 10:54 am #947269Leo
StaffCustomer 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 2, 2019 at 4:07 pm #947474Rob
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,
RobJuly 2, 2019 at 4:40 pm #947501Leo
StaffCustomer 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; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 3, 2019 at 12:12 pm #948273Rob
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,
RobJuly 3, 2019 at 5:47 pm #948397Leo
StaffCustomer 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 π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 3, 2019 at 5:56 pm #948405Rob
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'>
July 3, 2019 at 6:02 pm #948413Leo
StaffCustomer SupportCan 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/July 3, 2019 at 6:20 pm #948421Rob
July 3, 2019 at 6:50 pm #948426Leo
StaffCustomer 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 π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 3, 2019 at 7:47 pm #948446Rob
Done! Thanks Leo, I really appreciate your work on this!!!
July 3, 2019 at 7:56 pm #948451Leo
StaffCustomer SupportTry this CSS:
.page-hero.reviewedby .inside-page-hero { display: flex; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 3, 2019 at 8:06 pm #948453Rob
Thank 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 #948458Leo
StaffCustomer 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 3, 2019 at 10:38 pm #948483Rob
Hey 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
- You must be logged in to reply to this topic.