Full width images – Education Theme

[SueCrawford]

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!

[Brad Dalton]

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/

---

Tutorials for StudioPress Themes.

[Sridhar Katakam]

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?

---

Genesis Tutorials | Follow me on Twitter

[SueCrawford]

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!

[Sridhar Katakam]

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>';
	}

}

---

Genesis Tutorials | Follow me on Twitter

[Sridhar Katakam]

also add this in style.css:

#custom-header {
	text-align: center;
}

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

---

Genesis Tutorials | Follow me on Twitter

[Brad Dalton]

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

Unique Header Images in Genesis

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.

---

Tutorials for StudioPress Themes.

[Sridhar Katakam]

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

---

Genesis Tutorials | Follow me on Twitter

[myrealitie]

Hello. I have the Parallax Pro theme.

I am trying to make images on my landing pages full width.
I tried to make an individual landing page with a full-width image using the instructions of Sridhar but I had no luck.

Can someone please advise?

Thank you SO MUCH in advance.
~Kate

[Author]

Posts