In the comments section of Featured image below header on static Pages in Infinity Pro, a user asked:
How can I add the title of the page to the middle of the image?
This tutorial provides the steps to
- register a custom image size for hero image on static Pages and single Posts.
- create a custom shortcode that outputs the URL of author page for the entry author outside the loop.
- create a WordPress template part having the code to (if a featured image is present) a) show featured image and entry header below site header b) remove all actions hooked to entry header (entry title, entry meta etc.) c) Replace Sridhar Katakam shortcode with our custom one from earlier step in the post info.
- load the above template part into the templates for static Pages and single Posts.
- add CSS to overlay the entry header centered on top of the featured image when the viewport width is more than 800px.
in Infinity Pro.
Sample screenshots:
Static Page having a featured image:
Single Post having a featured image:
Tested in Infinity Pro version 1.1.3.
Step 1
Add the following in Infinity Pro's functions.php:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
Hi Srid,
I tried this and it gives me margins on left and right of the image. Do you know how I can make it full-width?
Also, is there a way to add a color overlay over the image, such as rgba(0,0,0,0.5);
http://mwi.dev.onpressidium.com/services/
Oh, darn, I’m so sorry!! I’m using Altitude Pro, not Infinity Pro…. I’m such a dope.
No problem.
I see that you have followed the method in my other tutorial. Let me know if you want to use this one instead so I can take a look at implementing this in Altitude Pro and add an addendum to this tutorial.
I was wandering if anyone knows how to modify this code for it to work with Monochrome pro ? I would like the post title to appear in the featured image area and to also remove the gravitar image that appears at the top of the post in Monochrome pro ?
Actually, does anyone know how to make the navigation bar transparent on single posts and for the featured post image to lay behind it like it does on the homepage ? I’d then like it to change to a white navigation bar on scroll. I think this would be easier to do than modifying Monochrome pro.
I’ve also noticed that on mobile view the post title jumps below the featured image. Is there anyway to keep it on top of the featured image ?
See Addendum 1 (added on January 14, 2018).
Hello Sridhar… I’m having a heck of a time -I’m using infinity pro and in mobile view, there’s a big gap below the featured image/entry title, and the image is hidden under the header – I’ve been working on this for days with no luck – i’ve run out of ideas… Can you help? the site name is: dev.communitycares.org. I’m also having trouble getting the front page background image to respond. its been a challenging website… thank you in advance for all you do and if you can help I will so appreciate it…
Barbara
Hello Barbara,
You are referring to https://d.pr/i/xKVzPA, correct?
The reason for the problem is because you have customized the header to be fixed: https://d.pr/i/WeUJ4r
Is this a requirement from the client?
Hi – Thank you for answering…
no – it is not a requirement from the client – So I should change it to inherit? Is that the best? Also, is there anyway to make it responsive?
You are a life saver!
Thank you so much!
I got it! Thank you again!
Hi Again…
one more question … since this is using featured images is there a quick and easy way to have it not apply to posts only pages?
Sometimes I have to wonder about myself… I got this one – I deleted single-post.php – is that the right thing or is there more code that has to be changed in function.php? I’m sorry to be a pest…
You did it correctly.
Could I customize this so I just have the featured image, without moving the entry header?
Yes.
1) Replace the entire code in template-pageimage.php with :
2) Replace the code to be added in style.css from the tutorial with:
[…] In the past, I covered Featured image below header on Pages and Posts with entry header overlay in Infinity Pro. […]
Hey Sridhar,
I followed your tutorial using Aspire Pro and I was left with some margins which I managed to sort out. When I implemented the update – it completely broke my page? My theme didn’t like something in the line of code that was swapped in template-pageimage.php? I’m a little bit stuck with this one – do you have any ideas?
James
Can you paste the full code in that file at pastebin.com and share the link?
Also, what is your site’s URL?
Hi Sridhar,
Thanks so much for this. I want to implement Infinity Pro’s team member entries but as you can see from the screenshot, the above code also includes these individual pages as they use the featured image to display on both the front page and team member pages.
Is there a way to exclude the individual team member pages from your script without affecting all other posts and pages?
Thanks,
Andy
ANd I forgot the link to the screen shot… https://www.dropbox.com/s/uo1ugdt1kde0ymd/Screenshot%202018-04-05%2009.38.08.png?dl=0
Hi Andy,
Replace the entire code in
template-pageimage.php
with https://pastebin.com/raw/TcYbxEnb.Replace all instances of 965 with the ID of your Team Page.
Thanks so much, Sridhar.
Hi again Sridhar,
I’ve added the code, but it doesn’t seem to have removed the image. In fact it broke the page until I swapped back to the original printf statement: https://www.dropbox.com/personal/Screenshots?preview=Screenshot+2018-04-09+09.57.17.png and https://www.dropbox.com/s/sireyq8tq6retjw/Screenshot%202018-04-09%2009.57.35.png?dl=0
Also, as I need this for multiple team member pages, would I put all the page IDs into an array?
Thanks for your help and sorry to be a pain.
Andy
965 is the ID of your main Team page. It is not the ID of an individual Team member page.
The individual Team member pages should all be subpages of the main Team page per the theme setup.
Can you provide the URL of your site?
My apologies Sridhar, and my mistake, I was applying the number of the individual member page – it works perfectly now thank you.
Hi Sridhar! Can I add a CSS overlay over the image but under the text? I’m going crazy trying to figure it out. Thanks!
Found the answer . Modify template-pageimage.php to add linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)) . Obviously change the values as needed.
// display the image and entry header.
printf( ‘
%s
‘, genesis_get_image( ‘format=url&size=page-image’ ), $entry_header );
This stopped working and broke once I updated to WordPress 5.0 . Is there a fix? disrupt2create.com/groom Thanks in advance!
Excellent tutorial. I’m having one issue with all of my “Entry Titles” or “Post Titles” not displaying in Altitude Pro on the Blog template.
This code in the template-pageimage.php seems to be the issue.
// remove entry actions hooked to entry header.
remove_all_actions( 'genesis_entry_header' );
}
Is there a way to only remove the entry title in the top of the page and not have it affect the individual blog titles in Altitude Pro?
This isn’t working for me, it’s not showing the header nor the featured image any more. Using latest WordPress 5.0.3. Maybe this tutorial needs to be updated.
Hello,
You have helped me many times in the past, hoping to get help with another question… I am very new at web design. I don’t know how to create a file as stated in Steps 2 & 3 above. I’m working through wordpress with the Infinity Pro theme.
Thanks in advance!
Hi,
I went through all the steps but there is a space on the right side of the screen. How do I fix this? https://www.islandstyledance.com/ballroom
I used new 2018 steps, and I cannot get desktop version to display header image & overlay text — only about 20% of bottom of image & text shows?
Thank you!
FIXED! I moved location of CSS edits, and all displays correctly now. Thank you!