Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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
[SOLVED] How to assign different header-images to different pages?

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,765 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,176 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,765 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,176 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

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 11:15 AM.


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