Full width images – Education Theme

Community Forums Forums Design Tips and Tricks Full width images – Education Theme

This topic is: resolved

This topic contains 7 replies, has 3 voices, and was last updated by  Sridhar Katakam 7 months, 3 weeks ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #82068

    SueCrawford
    Member
    Post count: 9

    Is it possible to add a static full-width image to the top of each page (other than the slider on the home page)? And still have it be responsive like the home page? How would I do that?

    Also, when I try to identify a “featured image” on each page, it doesn’t show up anywhere. How does that feature work?

    Thanks!

    #82083

    braddalton
    Participant
    Post count: 9223

    Link to your site please.

    You can do this several ways.

    Did you want to use the same image on every page or a unique image?

    In what position on the page http://www.genesisframework.com/markup.php

    Here’s more on featured images http://wpsites.net/web-design/display-featured-image-before-or-after-entry-title-on-single-posts-pages/


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #82085

    Sridhar Katakam
    Participant
    Post count: 961

    Do you want the full width image on top of all static Pages above the existing header? Can you provide the URL of your site?


    #82160

    SueCrawford
    Member
    Post count: 9

    To clarify, I would like a different image on each page. I am using the Education theme with sidebar to the right. Two options would work….1) located below the header/navigation and above the page content and sidebar; or 2) located below the header/navigation and above the page content but next to the sidebar.

    I can’t provide the url because I am working on a “practice” site that is hidden until I figure out everything. Then I will apply the changes to the site we are switching to this new theme.

    Thanks!

    #82434

    Sridhar Katakam
    Participant
    Post count: 961

    Several ways of doing this. Here’s one. Add the following in Education’s functions.php and modify to suit.

    add_action( 'genesis_after_header','sk_full_width_image' );
    function sk_full_width_image() {
    
    	if( is_page('sample-page-2') ) {
    		echo '<div id="custom-header"><img src="' . get_stylesheet_directory_uri() . '/images/custom-header1.jpg" alt="" /></div>';
    	}
    	else if( is_page('contact') ) {
    		echo '<div id="custom-header"><img src="' . get_stylesheet_directory_uri() . '/images/custom-header2.jpg" alt="" /></div>';
    	}
    
    }

    #82435

    Sridhar Katakam
    Participant
    Post count: 961

    also add this in style.css:

    #custom-header {
    	text-align: center;
    }
    
    #custom-header img {
    	width: 100%;
    }

    #82453

    braddalton
    Participant
    Post count: 9223

    If you want to do this on every new page, its better to create a custom field

    Here’s 2 tutorials which help you do that

    http://wpsites.net/web-design/add-unique-header-images-using-custom-fields/

    http://wpsites.net/web-design/how-to-add-a-2nd-meta-box-for-a-different-featured-image/

    If its only for a handful of pages, then you can use PHP and/or CSS code.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #82454

    Sridhar Katakam
    Participant
    Post count: 961

    or, set it up so that featured image (if present) will be used as the full width image.


Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.