Sridhar Katakam

Genesis and WordPress Tutorials

Medium-like Full View Featured Image in Genesis

by 47 Comments

Danny asked,

Great tutorials as always!

I was wondering, I’ve just implemented Parallax Pro for my own blog. Is there a way to use a custom header image for each post, the way that Medium does:

https://medium.com/life-tips/494224e0f983

Or how the new Ambiance Pro theme does it:

http://demo.studiopress.com/ambiance/mobile-responsive/

Or how Dustin Stout did it on his use of Parallax Pro:

http://dustn.tv/stunning-reading-experience/

Thanks!

In this article I share the code I've put together while referring to a couple of my previous posts and Centric Pro and Agency Pro.

Screenshot

medium-like-full-view-featured-image-genesis

Screencast

Note: Although I have developed this solution in Genesis Sample theme, it should work with minor adjustments in other StudioPress themes as well.

Summary

Site-wide

  • Header: Fixed at top, slides up and goes away when scrolling down and fades into view when scrolling up.

Single Post pages

  • If the Post has a Featured image set, it will appear in full view (as high as visitor's browser viewport) via Backstretch.
  • Header will appear as a transparent overlay at the top.
  • Post title, post info and a down arrow will appear centered on the image. Clicking on the down arrow will scroll smoothly to the content area.
  • When scrolling down Post title and post info will fade away and fade back in when scrolling up.

Let's get started.

Javascript

All the below js files should be uploaded/created in child theme directory/js (create js directory if it is not existing). Ex.: wp-content/themes/genesis-sample/js/

1. Create a file named header-fade.js having the following code:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Fantastic post Sridhar. I have seen a script for a header that will slide away like yours does, but it will return when you start to scroll back up. This lets the user simply start to scroll up without having to return to the top again. I will look for the script and send a link. It might be a nice feature addition to this tutorial.

    Reply

  • That is very nice Sridar. Can this be done just for the header like Ciaran Whelan discusses ? Looks to be using Zepto ? I would like to do this for the Header and Nav structure…. I don’t need the image size change. Working on a Centric Theme…this would very nice.

    Thanks for posting all the great snippets.

    Reply

  • How would I apply the resulting transparent overlay header site-wide on parallax pro (default #000)? I want them to match. Transparency is currently only being applied “post pages. Thank you.

    Reply

      • Thanks for your prompt reply, Sridhar. This almost worked. For some reason there is still what appears to be a “grey” background color underneath the transparency that shows through. on both the home & page posts. I’ve included the url of the site in question in the website field so you can take a look

        Reply

  • I’m starting a complete redesign of my site based on Parallax Pro. And I’m soooooo glad I stumbled across your site. What you explain here is exactly what I want to do with my posts – except for the reverse.

    I want the header to be invisible when the page shows up. Then the header should fade in as the person scrolls down the screen. Is that an easy edit in the header-fade.js file I wonder?

    Reply

  • Thank you so much for this. I’ve worked it into my site almost to where I want it. My header is fixed at the top on every page. On my posts I have the wonderful large photo and fading effect.

    But what I’m trying to do now with my posts is to only have the header appear after I scroll down to the text of each post. Arriving on the post page should show just the image and the title. Scrolling down should have the header appear.

    I tried to implement headroom but I made no changes at all. I’m not sure where I went wrong. Any advice for me at this point?

    http://www.wiltonblake.com

    Reply

    • While it may be possible to create a new layout (for single Posts) that incorporates the solution, am thinking if it would be easier to perhaps use ACF and create a custom field like “Do you want to display Medium-like featured image?” for single Posts. Code would need to be altered such that it checks for this custom field and if it’s selected, then only display the large featured image.

      What do you think?

      Reply

  • Hi Sridhar!

    Thank you for providing this, and all other very useful tutorials on your site. I trying to figure out how to adjust the height of the featured image proportional to the width of the screen, to limit the scroll on small screens. Is image size controlled use .js ?

    Reply

  • Thank you so much for your helpful code snippets. I’ve gotten it “mostly working” but have run into one oddity. Whether I’m using my original template (which I built based off of the Genesis Sample) or whether I put a fresh clean Genesis Sample theme in, I lose the meta data about who the post author is. So my post info says: April 14, 2014 by — 2 Comments [edit]

    I see that your code, there is: remove_action( ‘genesis_entry_header’, ‘genesis_post_info’, 12 );
    And after that you add it back along with the other featured-single elements. I’ve done it your way and I’ve tried customizing that bit as well. Nothing seems to have any effect. (Yet I don’t see anyone else mentioning this problem.)

    Any thoughts on what could be happening? (I actually don’t want the comments/edit bit in there. Just the date & post_author. However, even though I can filter the comments and edit out of the post info, the [post_author_posts_link] doest not ever show up.

    I feel like I understand enough about Genesis to be dangerous… and frustrated. 😉 Thanks for any help you can give. Cheers.

    Reply

  • This is an excellent tutorial! My question is actually about the default image. Backstretch does not seem to take into account its height in the same way as it takes into account the height of an image that is actually uploaded. Is there a way to ensure that the css generates the correct height?

    What it generates now is:

    Notice that the height of the div.backstretch is 180px, while the image itself is 592px. Is there a way to automatically set the div size only when using default images?

    Reply

  • Hi Sridhar,

    This tutorial is wonderful! How can I get the same full view image (responsive to fit all viewport sizes) to display on the homepage, underneath the header and navigation. Can I do this with a slider instead of a static image?

    Thanks!

    Reply

  • This is a great tutorial, how would you accomplish the same thing with pages, so you could essentially have a custom photo per page.

    Reply

  • Hi Sridhar,
    Thanks for the great tutorials.
    I was looking for a way to add a background color to my site-header as the page gets scrolled down.
    I’m using your one-pager genesis theme and came across this tutorial. I changed the headr-fade.js code to:
    jQuery(function( $ ){
    $(window).scroll(function () {
    var yPos = ( $(window).scrollTop() );
    if( yPos > 75 ) { // fade out sticky menu after 75 pixels have been scrolled down from the top
    $(“.site-header”).fadeIn();
    } else {
    $(“.site-header”).fadeOut();
    }
    });
    });// JavaScript Document
    And it’s now exactly doing what I want – except the entire .site-header with it’s contents is fading in and out. I would like to just fade in a white background.

    Can you help?

    Thanks,
    Kat

    Reply

    • The relevant code is http://pastebin.com/raw.php?i=fgACsGk4 in the code to be added in functions.php, especially the if part.

      You need to replace

      wp_get_attachment_url( get_post_thumbnail_id() )

      with the code that outputs the URL of image uploaded to the entry via that plugin.

      Try posting in the plugin’s support forum for that. Let me know if there’s no reply after a couple of days. I will try to look inside the plugin for that.

      Reply

      • Hi Sridhar,

        Thanks for the reply, i’ve actually found an easier way of achieving the same
        think using the dynamic featured images plugin to pull in a second image for the backstretch and it works perfectly with this tutorial.

        One thing i’ve can’t figure out though is how i can add the post excerpt
        under the title.

        I tried adding a filter in the featured-image wrap but that didn’t seem to work
        properly and caused the scroll to ID button to duplicate.

        Any ideas on how this can be added?

        Kind regards
        Darrell

        Reply

  • I’d like to make this work on pages and posts, site wide. I have it functioning perfectly for posts, how would I go about adding the code to execute for pages?

    Reply

  • I have this implemented on a site that I am now adding woocommerce to. I have the headers set on posts, pages and archives but I want to EXCLUDE any shop pages, except possibly the main and category pages. How would I exclude the cart, checkout, account pages. I have tried variations of:

    if ( is_singular(‘post’ ) || is_page() || is_archive() || !is_page(‘Cart’) )

    any tips on getting this to work? Thanks in advance!

    Geza

    Reply
    • >