Sridhar Katakam

Genesis and WordPress Tutorials

Featured Image Background Parallax section on Posts and Pages in Altitude Pro

by 64 Comments

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:

altitude-pro-post-parallax-featured-image

Screenshot of a sample Page:

altitude-pro-page-parallax-featured-image

Step 1

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.

    Reply

    • Hi bluacre,

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

      Reply

      • Hello Amanda,

        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.

        Warmest,
        Amol

        Reply

  • Hello Sridhar,

    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.

    Warmest,
    Amol

    Reply

  • Hello Sridhar,

    Is it possible to have custom images on custom Pages. If you guide me out i will appreciate it.

    Warmest,
    Amol

    Reply

    • 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?

      Reply

      • @ Shridhar,
        Thanks sorry my bad through excitement i did not went through the featured image box.

        Thanks appreciate your support.

        Reply

  • Love the tutorial… Is there any way to to either hide the Page Title and line under it or move below the Featured Image?

    Reply

  • Hi Sridhar,

    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.

    Jason

    Reply

  • Hello Sridhar,

    Is it possible to have breadcrumbs inside the featured image parallax section.

    It will be of great help.

    Thanks

    Reply

  • 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.

    Reply

  • Hi Sridhar,
    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!

    Leslie

    Reply

  • Hi Sridhar,

    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.

    Many thanks,

    Pairfum

    Reply

  • 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.

    Reply

  • Hi Sridhar,

    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?

    Cheers

    Steven

    Reply

  • 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.

    Thanks again

    S.

    Reply

  • Hi Sridhar,

    Would you be able to share how I would apply the custom template also to a CPT on site?

    I would greatly appreciate!

    Yael

    Reply

  • Hi Sridhar,

    I just noticed on mobile devises there is a margin / white space above the featured images and below the site header:

    http://dekalbalphas.org/dek15/about/

    I’ve tried to track down the css on this and am not successful.

    Would appreciate knowing what is causing this.
    Thank you. Yael

    Reply

  • 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

    Reply

  • 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?

    Thank you!

    Reply

  • 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/

    Reply

  • 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?

    Reply

  • Awesome!! Thank-you!!

    How do I change the height of the parallax section? I would like to change it to closer to a full page image.

    Reply

    • Sirdhar

      You can delete my full height request as I found the other tutorial!

      Your tutorials are very easy to follow!!

      THANK-YOU!!

      Clayton

      Reply

  • 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?

    Reply

    • Hi, Love this tutorial but I have the same issue, parallax section don´t work in Woocommerce Shop page.

      Reply

  • 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.

    Reply

  • 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]

    Thank you!

    Reply
    • >