Following my Featured Image Background Parallax section on single Posts in Altitude Pro tutorial, a few users asked how the same can be extended to static Pages as well.
In this tutorial I share the code to add a section below the header on Pages and Posts in Altitude Pro that display the featured image (if present), otherwise a pre-set default image as the background for the section with Parallax effect.
Screenshot of a sample Post:
Screenshot of a sample Page:
Create a file named say, singular.js in
js directory having:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
This is great Sridhar. My only issue is Im using static pages for the Home and Blog pages so my front-page template is getting replaced by the custom template. Can you provide the modified function code to add an elseif statement for the front-page as well as a singular page if we want the featured image removed on a single page? I appreciate the work you put into these tutorials.
I had the same issue so I changed the code in the php file to:
if ( is_singular( array( 'post', 'page' ) ) AND (!is_front_page()) AND (!is_home()) )
I am having same issue. My static page gets replaced with the custom page template. if you could help me out it.
Appreciate your support.
@Amanda, Thanks i got it resolved.
Very nice. I have a question though. Any possibility to hide the whole section when no featured image is selected, instead of displaying a default image?
Replace the entire code in template_singular-parallax.php with http://pastie.org/pastes/10234878/text.
and in style.css, replace http://pastie.org/pastes/10234880/text with http://pastie.org/pastes/10234879/text.
I am big fan of your work. Keep it up.
Sridhar Please help me out, My only issue is Im using static pages for the Home and Blog pages so my front-page template is getting replaced by the custom template. if you could help me out.
I will Appreciate your help on the same.
@sridhar, Thanks i got it resolved
Is it possible to have custom images on custom Pages. If you guide me out i will appreciate it.
well, that’s what this tutorial is about. Isn’t it? The image you set as Featured image for a Page will be used and shown on that Page. Can you elaborate your question?
Thanks sorry my bad through excitement i did not went through the featured image box.
Thanks appreciate your support.
Love the tutorial… Is there any way to to either hide the Page Title and line under it or move below the Featured Image?
If you wish to not relocate the entry header from its default location to on top of the featured image for Pages, replace the entire code template_singular-parallax.php in with http://pastie.org/pastes/10248708/text.
Applying this code has removed the featured image from displaying on the page. (however the entry title moves lower)
I’m not sure if I’m doing something wrong, but I copied and pasted the code into the new file like you instructed, but it’s not working.
I can see the default header image (I changed it to my own), but not the featured image.
Is there more code to change than just the default header image in the css file?
Thanks for any help you can offer.
Nope, just what’s there in the tutorial. Can you provide the URL of your site?
Sorry. Left for some holidays. I figured it out. I had a feature image plugin that was causing the issues. everything works great.
Is it possible to have breadcrumbs inside the featured image parallax section.
It will be of great help.
Hi Sridhar. I’ve implemented your tutorial and on the blog page there are no blog titles. Is that normal? Single pages and posts work great with the title overlay, but on the blog page they aren’t there at all. Any ideas? Thanks.
Saw your message in the Facebook group that this is resolved. Let me know if it’s not.
I’m having this same issue. Could you share how you fixed this?
continued at https://www.facebook.com/groups/sridharkatakam/permalink/880284142059037/.
You provide terrific tutorials – I have been following you for a while. I did everything per your instructions but am getting blank posts. See: http://elliottbrundage.com/wordpress/find-a-designer/. I am actually hoping to use this code on static pages per your instructions for Altitude Pro but this theme is Parallax Pro. Would first like to resolve the blank posts!
Many thanks for this tutorial. Some parts of it are not clear to me though:
1. Will the header bar be transparent as on the home but turn solid on page scroll, i.e. will it behave the identically to the home page ? I would like to recreate the home page’s header & featured image combination on inner- / sub-pages, e.g. WooCommerce Shop
2. Can the featured image be not quite as high as on the home page, i.e. only 400 or 600px high ?
Many thanks for your support.
I just applied this tutorial to Altitude Pro project and it worked well. Now, the question is how can I force that featured image to display full view in screen? (just like front-page-1 image section) I find that size a bit small and a pain if a client uploads a general image, so I thought making the image display full height just like in front-page-1 of Altitude Pro may work better. Any suggestions as to how I can modify the your code to make this happen? Thanks.
Here you go: https://sridharkatakam.com/full-screen-featured-image-background-parallax-section-on-posts-and-pages-in-altitude-pro/
[…] the comments section of Featured Image Background Parallax section on Posts and Pages in Altitude Pro tutorial, a user […]
Fantastic work – an incredible resource for people using Genesis.
Do you know of a simple way to have additional text display below the page title, perhaps using a custom field entry or even a text widget?
Use code similar to http://pastie.org/pastes/10300352/text.
Would like to do this also – not sure where the screen grabs are from is that a Post Meta plugin. ? Many thanks
One other quick question –
Could you please tell me how I could exclude select pages from executing the change in the functions.php?
I duplicated the front page widgetized functions (template/functions/output/customize) on 2 other pages of the site which works great… until I make the above changes to show the featured image – It then ignores the widget sections.
Here is the functions file before the page header change – when it is working:
This is the functions change that makes it all disappear –
Would you be able to share how I would apply the custom template also to a CPT on site?
I would greatly appreciate!
Can you give me the URL of any single CPT page of your site?
Of course, when we complete new design, I will move the new site to root folder (so /dek15/ will be removed.
500 – Internal Server Error at that URL.
beautillionsthe name of the CPT?
that’s strange, the page is loading fine for me.
Yes, beautillions is the name of the CPT.
Now it is loading fine.
Change line 14 in step 3 to http://pastie.org/pastes/10347727/text.
What is a good size to recommend to my clients for images to work well with this feature?
1140 x 400?
1600 x 409
I just noticed on mobile devises there is a margin / white space above the featured images and below the site header:
I’ve tried to track down the css on this and am not successful.
Would appreciate knowing what is causing this.
Thank you. Yael
I’m very happy with getting this tutorial to work for my Posts, Pages, and Custom Post Types. How can this also be done also to the Blog Archive page and/or a Custom Post Type Archive page? I’d love to have this blog archive page (http://ki-ki.net/seisenbacher2/news/) match other pages on the site (such as http://ki-ki.net/seisenbacher2/interior-solutions/).
I am trying this tutorial on Parallax Pro is there any specific changes I need to make – or should this tutorial work straight away.? Image not showing at th emoment. Many thanks
Ignore last comment I have sorted..my daft.
Hey Sridhar, not sure if this thread still open but i hope it is and that you can help…
Anyways, when I applied the tutorial the look I get is quite different from the one you show in the images. the featured image not high enough and the title is behind the navbar.
Please see page here: http://ultraluxe.ohanamedia.ca/ultra-luxe-linens/
Thanks Sridhar. It works perfectly 🙂
Is there a way to add an overlay (black @ 50% opacity) onto the image on the blog post page only (that’s when the text overlays the image), so the white text is visible even on a light colored image?
Yes. I have updated the tutorial and added steps for this near the end.
This is a great tutorial! Thank you for this.
Is there a way to have it work on the Events page with the plugin called The Events Calendar by Modern Tribe? The heading doesn’t show up at all on that page now.
Also, how would I get subtitles to show up using the Subtitles plugin? These also weren’t showing up. https://wordpress.org/plugins/subtitles/
I have questions on landing pages. When I do this tutorial, the landing page template page places the menu bar and footer bar like a normal default page. Is there any way that we can remove the menu bar and footer bar just for the landing page template?
How do I change the height of the parallax section? I would like to change it to closer to a full page image.
You can delete my full height request as I found the other tutorial!
Your tutorials are very easy to follow!!
I did everything in the tutorial, but now on my main blog page, the blog titles are not showing up. I thought that was what the second part of the tutrial was supposed to fix.
the website is here: http://genparenting.com/blog/
[…] Resources: http://my.studiopress.com/themes/showcase/ https://sridharkatakam.com/featured-image-background-parallax-section-on-posts-and-pages-in-altitude… […]
Is there a way to get the parallax section to show up in woocommerce’s ‘SHOP’ page? Basically the function doesn’t seem to apply to this page?
Hi, Love this tutorial but I have the same issue, parallax section don´t work in Woocommerce Shop page.
[…] In the past, I wrote a tutorial titled Featured Image Background Parallax section on Posts and Pages in Altitude Pro. […]
Hello Sridhar, Thank you for the great tutorial and code!
Implementing it though results in the Titles being removed from the Blog template provided by Studiopress in Altitude Pro.
Following Bill Erickson’s instructions from the post linked in the Facebook thread (https://www.billerickson.net/dont-use-genesis-blog-template/) results in the standard loop successfully displaying the Titles in the selected posts page BUT unfortunately also replacing the standard default home page provided in Altitude Pro 1.14.
Is there any way to have and use the Altitude Pro home page together with a blog page that displays post titles?
Thanks in advance for any additional direction.
Have you created a Page titled like
Blogand set it as Posts page at Settings > Reading?
Can you share a screenshot of your Reading settings?
Could you help me resolve an issue?
My featured image shows up correctly in the parallax section/page header
However, the featured image also appears again — before the page text, as it normally would if I had not added the parallax feature.
Am I missing something here, is there an additional step I need to make the featured image *only appear in parallax? [my site is in development so I am unable to attach a link]
Actually, I apologize, it was an error on my part. Thank you for these great tutorials!