[SOLVED] Change header images on each page
 

Am brand new to Atahualpa. Set up a beautiful homepage without any problems. The homepage features 5 rotating images that are 950px by 600px.
However, on the rest of the pages on the site I would like a single header image (different image for each page) that measures 950px by 300. Beyond this, everything remains the same as the homepage.
I have very limited knowledge of php or css.
Thank you.
westpro

have you searched the forums?

Thank you for this solution.
One more question. The header on my home page measures 950px by 600px. The headers I want to use on the other pages need to be 950px by 300px. Do I need to add code to each of the headers to make them appear the right size?

I got ahead of my self. Yesterday I posted:
"Am brand new to Atahualpa. Set up a beautiful homepage without any problems. The homepage features 5 rotating images that are 950px by 600px.
However, on the rest of the pages on the site I would like a single header image (different image for each page) that measures 950px by 300. Beyond this, everything remains the same as the homepage.
I have very limited knowledge of php or css.
Thank you."
Was sent a great solution. Before I could try it I posted another question. Now when I try to find the solution Juggledad sent all I can find is a message that reads, "have you searched the forums?"
I have been searching the forums for over an hour now and cannot relocate the solution sent to me yesterday.
If possible, please send it again.
Thank you,
Westpro

Still trying to keep rotating header images on homepage but have different header images on the rest of the pages and posts.
Per instructions added to HTML/CSS Inserts:

body.page-id-7 div#imagecontainer {
background-image: url(http://yourdomain.com/wordpress/wp-c.../page-id-7.jpg) !important;} (of course I substituted my pages and images)

Did not work. Still have homepage rotating header images appearing on each page. Have tried searching forums but it's looking for a needle in a haystack.

Trying to get this site completed. Please give me some direction.
Thank you,
Westpro

To just have an item showing on the front page you can set it to display:none and than after that CSS you set it to display block but target the home page.

I think I have poorly communicated what I want to do.

1. Homepage - it is working perfectly rotating the images that are in the header images folder - no problem.

2. I want different images displayed in the header of each (of the other)pages and posts -these images are a different size from those currently displaying in the homepage. The dimensions of the homepage images are 950x600. The images I want to display on each of the (other) pages are 950x300.

I was searching around and found articles on page templates but I do not know how to edit the header images on a template.

I'm getting a little desperate. Thank you, for any help you can offer.
Thanks,
Westpro

One possibility is adding a new widget area in place of %image and then use a slider or slideshow plugin to to display the front page images and an image widget to display the other page images. Then you would use another plugin such as widget logic to limit the display to where you want.

ATAHUALPA -
I am getting nowhere at breakneck speed.
There has got to be a reasonable way to accomplish what I want.
My home page is perfect - images rotating - excellent!
The images on the homepage are located in the header image folder as they should be.
I want to keep the homepage just as is.
Every other page needs a smaller header image which I have prepared. However, if put into the header image folder . . . they just become part of the header gallery so you see a 950px by 600 image followed by a 950 px by 300px image. I got that part! So I removed the smaller images and am back to square one.
Home page . . . fine. Every other page needs a static header image - 950px by 300.
I so wanted to have this done by tomorrow but can't get a clean, clear solution. As for adding all the widgets . . . there's got to be a better way.
Am totally burned out as I have searched threads for 2 days.
Surely, someone has faced the exact same challenge. Really need some help.
Thanks,
Westpro

To have your images on the front page only show on the front page you could use something like the following in CSS Inserts. This assumes you want the images showing on the home page.
That should take care of your header images showing on the front page. What I would do to get a different header image for different pages is to use a plugin like WP Display Header. This requires php added which is not directly allowed by WordPress so you would need to add a new widget area per the instructions in the theme options and add the php code given by the plugin in a php aware widget. Now you would configure your pages per the instructions for the plugin to display the images you want.

I know of no simpler way to accomplish this although this is not terribly complex.

First add a new div with an id of 'my-imagecontainer' right after the %image in the 'Configure Header area'
second in the css code add
adjust height and width as you want, repeat for each page

I did the following:
In the Configure Header area I added

%pages %image <div id="my-container"> %bar2

In the css insert I added

#imagecontainer {display:none;}
body.home #imagecontainer {display: block;}
body.home div#my-imagecontainer {display: none;}
body.page-id-4 div#my-imagecontainer {display:block;

height: 200px;
background: url("http://www.clbengineers.com/wp-content/uploads/2012/09/WaterPlantHeader-for-pages.jpg") top center no-repeat;);
width: 950px;

It got rid of the homepage header for the "Aboout Page" but did not replace it with the header image I specified for the "About Page" which is the first page I am trying.
Have I done something wrong?

I did the following:
In the Configure Header area I added

%pages %image <div id="my-container"> %bar2

In the css insert I added

#imagecontainer {display:none;}
body.home #imagecontainer {display: block;}
body.home div#my-imagecontainer {display: none;}
body.page-id-4 div#my-imagecontainer {display:block;

height: 200px;
background: url('http://www.clbengineers.com/wp-content/uploads/2012/09/WaterPlantHeader-for-pages.jpg') top center no-repeat;");
width: 950px;

It got rid of the homepage header for the "Aboout Page" but did not replace it with the header image I specified for the "About Page" which is the first page I am trying.
Have I done something wrong?

Your div has an id of my-container but your CSS is using div#my-imagecontainer as the selector.

Thank you! Thank you! Thank you! It works!!!!!

Make sure you add a closing div in the configure header so it should be

This is working for pages 4, 8, and 12 but not for pages 6 and 10??? Can you see any reason why?


#imagecontainer {display:none;}
body.home #imagecontainer {display: block;}
body.home div#my-imagecontainer {display: none;}
body.page-id-4 div#my-imagecontainer {
display: block;
height: 200px;
background: url('http://www.clbengineers.com/wp-content/uploads/2012/09/WaterPlantHeader-for-pages.jpg
') top center no-repeat;");
width: 950px;
}

#imagecontainer {display:none;}
body.home #imagecontainer {display: block;}
body.home div#my-imagecontainer {display: none;}
body.page-id-6 div#my-imagecontainer {
display: block;
height: 200px;
background: url('http://www.clbengineers.com/wp-content/uploads/2012/09/RoadsHeaderforPages.jpg
') top center no-repeat;");
width: 950px;
}

#imagecontainer {display:none;}
body.home #imagecontainer {display: block;}
body.home div#my-imagecontainer {display: none;}
body.page-id-8 div#my-imagecontainer {
display: block;
height: 200px;
background: url('http://www.clbengineers.com/wp-content/uploads/2012/09/ConstructionPageHeader.jpg
') top center no-repeat;");
width: 950px;
}

#imagecontainer {display:none;}
body.home #imagecontainer {display: block;}
body.home div#my-imagecontainer {display: none;}
body.page-id-10 div#my-imagecontainer {
display: block;
height: 200px;
background: url('http://www.clbengineers.com/wp-content/uploads/2012/09/LandDevelopmentPageHeader.jpg
') top center no-repeat;");
width: 950px;
}

#imagecontainer {display:none;}
body.home #imagecontainer {display: block;}
body.home div#my-imagecontainer {display: none;}
body.page-id-12 div#my-imagecontainer {
display: block;
height: 200px;
background: url('http://www.clbengineers.com/wp-content/uploads/2012/09/WaterPlantHeader-for-pages.jpg
') top center no-repeat;");
width: 950px;
}

First off, you don't have to repeat all the css you only need the
once. You can also combine the commen rules and end up with this

Thank you. It certainly shortened the code. However, it didn't help me on the images. I am going to reload the missing images from my computer and see if they will work.
I am sorry for taking so much of your time. I just feel that I am too far into this project to look for another theme. I appreciate very much your help.
-westpro

By the way, the site I am working on is http://www.clbengineers.com - if you have a chance you can see what is happening.
Thanks

get rid of the extra double quote's at the end of each line - since there is one at the end of the pade-id-4 code it makes everything after that - up to the end of the page-id-6 code - a literal nad it is ignored.

Curious.
Checking the source code of the three pages that are working.
On line 217 the images don't all agree with what I typed in on the CSS insert.

www.clbengineers.com

looking at About, Construction and Contact pages.

It's all working!