Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

[SOLVED] How to assign different header-images to different pages?


  #1  
Old Nov 11, 2009, 02:41 PM
gxxfy
 
16 posts · Nov 2009
Hi there

I'm looking for a way to assign one specific header-image per page, eg

- header1 on page X
- header2 on page Y
- header3 on page Z

Seems quite hard to achieve (see this older post:
http://forum.bytesforall.com/showthr...ht=diff+header

but maybe there is a way of doing this now? Would be great!

All the best
Roman
  #2  
Old Nov 11, 2009, 06:56 PM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
at ATO->Style & edit HEADER AREA->Configure Header Area use
HTML Code:
<div id="imagecontainer" class="header-image-container"></div>
instead of %image
at Add HTML/CSS Inserts->CSS Inserts add
HTML Code:
div#imagecontainer { 
background-position:center top;
background-repeat:no-repeat;
height:150px;
margin:0;
padding:0;
position:relative;
}
where the height is the height of your images. Now for each page add the following CSS Insert
HTML Code:
body.page-id-211 div#imagecontainer {
background-image: url(http://yourdomain.com/wordpress/wp-content/themes/atahualpa344/images/header/homepage.jpg) !important; 
}
where '211' is the page ID for the page you are working on (to get the page ID, go and edit the page, then look in the browsers address bar. The last part of the html address will be a number and that is the page ID)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Mar 15, 2011 at 11:17 AM.
  #3  
Old Nov 13, 2009, 07:58 AM
gxxfy
 
16 posts · Nov 2009
Hi Juggledad

Thanks very much, works perfectly well :-) One final question remains:

I've set a static page as homepage (with page id 88). In such a case, I'm not able to set the header-image for the homepage. The code

HTML Code:
body.page-id-88 div#imagecontainer {
background-image: url(http://yourdomain.com/wordpress/wp-content/themes/atahualpa344/images/header/homepage.jpg) !important;
}
only works if the page is not set as homepage (seems that wordpress does not operate with page-ids in case of the homepage anymore?!). Do you have any suggestion how I could bypass this problem?

I'm using the plugin "widget logic" as well, where I can set a widget to appear on certain pages. If I set a static page as homepage, the settings there also won't work anymore (either "is_home()" or "is_page('10')") - so i think it has to be quite the same "phenomenon"?

Thanks very much for you help
All the best
Roman

Last edited by juggledad; Mar 15, 2011 at 11:17 AM.
  #4  
Old Nov 13, 2009, 08:13 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Might not the Dynamic Headers plugin work as well along with giving you control of which page gets what image without digging into the code each time you want to make a change? I have not tried it with ATA but it worked quite well on a test site I built.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #5  
Old Nov 13, 2009, 08:27 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
lmilesw - good suggestion, I hope someome tries it and reports

gxxfy: try changing the selector to:
HTML Code:
body.home div#imagecontainer,
body.page-id-88 div#imagecontainer {
background-image: url(http://yourdomain.com/wordpress/wp-content/themes/atahualpa344/images/header/homepage.jpg) !important;}
background-image: url(http://yourdomain.com/wordpress/wp-content/themes/atahualpa344/images/header/homepage.jpg) !important;}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Mar 15, 2011 at 11:18 AM.
  #6  
Old Nov 14, 2009, 03:10 PM
Jezza33
 
1 posts · Nov 2009
I tried the Dynamic Header suggested by Imilesw on my Atahualpa site - the good news is that you can get the selected image to appear at the top of the target page - but the BAD news is that the Atahualpa header.php keeps rendering the standard rotation of images in the area immediately below!

Ideally it would be good if the Atahualpa header could be suppressed, leaving all headers to be managed by the Dynamic Header plug-in. Even better if this could be done without edits to the header.php (or any other file).

Ideas, anyone?
  #7  
Old Nov 14, 2009, 06:31 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
I did a search of these forums and found a quite simple solution.

Instead of messing with the php files you can insert Dynamic Headers by simply pasting the following in the Configure Header Area box
HTML Code:
<div id="dheader"><?php if(function_exists('show_media_header')){ show_media_header(); } ?></div>
Go to:

Style & edit HEADER AREA > Configure Header Area and paste
HTML Code:
<div id="dheader"><?php if(function_exists('show_media_header')){ show_media_header(); } ?></div>
in the position you want it to show. You most likely will want to remove %image and set Dynamic Headers to show random or default image if no image is selected for a page. The Configure Header Area box may look something like the following.

%logo %pages %bar1 <div id="dheader"><?php if(function_exists('show_media_header')){ show_media_header(); } ?></div> %bar2

The id is so you can style the container for the Dynamic Header image. The minimum CSS I would suggest adding to ATO>Add HTML/CSS Inserts>CSS Inserts would be the following.
HTML Code:
#dheader {
overflow: hidden;
}
Thanks to eyup for this solution.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.

Last edited by lmilesw; Mar 8, 2011 at 10:36 PM. Reason: New code for Dynamic Header plugin
  #8  
Old Nov 15, 2009, 02:26 PM
gxxfy
 
16 posts · Nov 2009
Hi there. Just set up a new blog (www.abenteuer.ch). Dynamic Header Plugin does not work without the modification mentioned above (replacing "%image" with "<?php show_media_header(); ?>"): I've set a different header image for page 2 http://www.abenteuer.ch/?page_id=2, but it just won't appear with %image still in place.

But also with this solution two problems remain:

- the transparencies in the header image (sidebars) are gone, I think there won't be a way to get them back as the standard header-function is being "overwritten" by the modification?! Of course I could get them back in photoshop.

- does not work on the homepage, because the homepage is set as "show latest posts". I can assign a header Image to the (single) post on the homepage with the plugin, but also in this case there won't be a header image.

So i think I have to either set the homepage as static page (and not as showing the latest posts) and go on with the missing transparencies, or with juggledad's suggestions (thanks again).

juggledad: I did not try your latest suggestion (changing the selector) yet. But with the first one I got a problem with the transparencies as well: the lower maybe 5 pixels of the transparency where missing (just above the sidebar).

I'll post the link with the modifications by tomorrow.

Thanks and cheers
Goofy
  #9  
Old Nov 17, 2009, 01:20 AM
gxxfy
 
16 posts · Nov 2009
Thanks for all your suggestions, finally did it with Dynamic Headers and manually added transparencies (still got the error in the transparency with the css-mods). All the best, Goofy
  #10  
Old Mar 31, 2010, 04:49 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
HOWTO: Set different header images clickable (linked) to a different location (http://forum.bytesforall.com/showthread.php?t=6538)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Tags
assign, header, image, random, specific

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Text and Images will not line up in posts/pages, all over the place. ngb222 Forum How-To 34 Sep 24, 2013 01:38 PM
Rotating Header Images link to Different pages instead of home page? WordPressZen.com Header configuration & styling 10 Oct 13, 2010 12:41 PM
Fixed HeaderImage for Home Page & then Rotating Header Images for other pages? kippiper Header configuration & styling 6 Jun 29, 2009 06:47 AM
Background images in pages ErikU Atahualpa 3 Wordpress theme 10 Apr 16, 2009 07:36 PM
Images in my category and archive pages? middlemountain Atahualpa 3 Wordpress theme 1 Apr 11, 2009 10:28 PM


All times are GMT -6. The time now is 05:56 PM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.