Community Forums › Forums › Archived Forums › Design Tips and Tricks › Full width images – Education Theme
- This topic has 8 replies, 4 voices, and was last updated 8 years, 8 months ago by myrealitie.
-
AuthorPosts
-
December 30, 2013 at 10:11 am #82068SueCrawfordParticipant
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!
December 30, 2013 at 10:35 am #82083Brad DaltonParticipantLink 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/
December 30, 2013 at 10:37 am #82085Sridhar KatakamParticipantDo you want the full width image on top of all static Pages above the existing header? Can you provide the URL of your site?
December 30, 2013 at 3:50 pm #82160SueCrawfordParticipantTo 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!
December 31, 2013 at 10:54 pm #82434Sridhar KatakamParticipantSeveral 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>'; } }
December 31, 2013 at 10:55 pm #82435Sridhar KatakamParticipantalso add this in style.css:
#custom-header { text-align: center; } #custom-header img { width: 100%; }
January 1, 2014 at 4:38 am #82453Brad DaltonParticipantIf 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.
January 1, 2014 at 4:41 am #82454Sridhar KatakamParticipantor, set it up so that featured image (if present) will be used as the full width image.
July 20, 2015 at 5:59 am #159872myrealitieMemberHello. 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 -
AuthorPosts
- The topic ‘Full width images – Education Theme’ is closed to new replies.