This tutorial provides the code which enables you to add a unique image after the header on all page types using the Atmosphere Pro child theme by StudioPress.
You can also display unique content over the image on all page types otherwise default text will be shown.
The code in this tutorial has been written based on this question from a member :
Hi Brad, I am using the Atmosphere Pro theme and would like to have a different image appear in the After Header area that is different than the one on the Home page. I would think that this is possible, but could not find a tutorial that seems to be correct. Is it possible to do this with the Atmosphere Pro theme.
You can change the image via the customizer and change the backup image in the Atmosphere Pro themes image folder otherwise, you can use code to add unique images after the header on all page types as seen in the following demo video.
Demo Video
The video shows how you can add unique images after the header on any page type otherwise a default image is displayed with default text. You can change the default text on line 61 of the after_header.php file.
The default image is pulled from the Atmosphere Pro themes images folder and uses the same default as the front page which is added via the customizer.
You can change the default image on line 34 of the after-header.php file.
Code Installation
There’s 3 steps after downloading the after-header folder:
Step 1 : Upload the unzipped after-header folder to the Atmosphere Pro themes root directory.
Step 2 : Add the following line of PHP code to the end of the Atmosphere Pro themes functions.php file.
include_once( get_stylesheet_directory() . '/after-header/after-header.php' );
Hello:
This tutorial worked on the desktop version of the website, but on mobile (sub pages) my height of 350px is being activated which is too large. Any suggestions for a fix.
http://integritycontractingva.com/temporary/services/
Hello. Any suggestions for this issue?
You could also use jQuery. Full tutorial
jQuery(function( $ ){ $( window ).resize(function(){ if ($(window).width() < 960) { $( '.after-header' ) .css({'height' : '400px'}); } }); });I was able to set it up so that the image from the main page shows up on all of the pages and posts but how do I select the image that will appear there and how do I change the content that is displayed on top of it?
OK. I found out how to get the new image to show up but how do I change the content on it?
Add a new custom field named text_over_image and add your unique content to the value field.
I think the problem I am having with using this on the altitude- pro theme might be line line 34 in the after-header php fie:
$default = get_option( ‘altitude-front-image’, sprintf( ‘%s/images/bg-1.jpg’, get_stylesheet_directory_uri() ) );
where the get option is referenced but not sure, and no idea what it should be instead of this if it is the problem
thoughts?
This tutorial isn’t coded to work with Altitude Pro.
Is there a way to make the altitude pro have different after_header images on all pages different than the home page.
On the existing tutorial above- I changed any references I found to the Atmosphere Pro theme in the after-header php file to reference the Altitude Pro theme.
Yes, i’ll write a new theme specific tutorial for this over the weekend.
get what you are saying about finding another theme for the full width. In doing that would I be able to use the tutorial poster here for the After_Header to have a different header image on other pages- or would that need to be changed somehow to work on the interior pages of a full width site – thinking of the altitude theme
You could use another tutorial depending on which theme you choose.
Thanks for posting this Brad.
I got it working somewhat but having a couple of issues.
related that I am trying to do here:
1: on all pages including the home page is there a way to make the header image display as the full width of the screen- like the images do on the ” Altitude Pro Theme”
2: Is there a way to set the height of the interior pages- everything except the home page so that the after image photo is not as tall ( height ) as the home page image:
It would seem that this should b possible with css but I am not having much luck figuring it out.
currently when I try to add an image to the After Header area in the custom field the image gets cropped and does not display correctly.
Here is the URL of a page where I have the custom filed enabled:
http://www.beaphotoninja.com/atlantic/sample-page/
* To clarify in the tutorial you mention above the ACF plugin used = https://www.advancedcustomfields.com/ -by Elliot Condon
Best
Scott
1. This would require major modification of the theme as its coded not to display full width. I would use another theme if you want full width.
2. Yes, you can change the height on line 9 of after-header-size.js like this:
Note : It’s best to crop images before uploading.