Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   [SOLVED] How to assign different header-images to different pages? (http://forum.bytesforall.com/showthread.php?t=4389)

gxxfy Nov 11, 2009 02:41 PM

[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

juggledad Nov 11, 2009 06:56 PM

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)

gxxfy Nov 13, 2009 07:58 AM

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

lmilesw Nov 13, 2009 08:13 AM

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.

juggledad Nov 13, 2009 08:27 AM

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;}


Jezza33 Nov 14, 2009 03:10 PM

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?

lmilesw Nov 14, 2009 06:31 PM

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.

gxxfy Nov 15, 2009 02:26 PM

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

gxxfy Nov 17, 2009 01:20 AM

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

juggledad Mar 31, 2010 04:49 AM

HOWTO: Set different header images clickable (linked) to a different location (http://forum.bytesforall.com/showthread.php?t=6538)


All times are GMT -6. The time now is 02:01 PM.

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