Different Header Images for Different Nodes
Last modified: January 24, 2008 - 15:17
Note that there is now also a module solution for this in Header image module.
Drupal provides same header for the whole site and if we want to theme all the nodes individually then it’s a bit complicated process. While looking for alternatives to this, the following snippet work fine, this has been implemented in www.vinrcorp.com you can see the example before using it. The usage of the snippet is also quit simple just put this code into the header part or where ever you want, of page.tpl.php file of your theme.
<table>
<tr>
<td><img src="[path to image folder]/images/<?php
if ($node->nid == 1) {
print 'image-1.jpg" />';
}elseif ($node->nid == 2){
print 'image-2.jpg" />';
}elseif ($node->nid == 3){
print 'image-3.jpg" />';
}elseif ($node->nid == 4){
print 'image-4.jpg" />';
}elseif ($node->nid == 5){
print 'image-5.jpg" />';
}elseif ($node->nid == 6){
print 'image-6.jpg" />';
}elseif ($node->nid == 7){
print 'image-7.jpg" />';
}elseif ($node->nid == 8) {
print 'image-8.jpg" />';
}elseif (($node->nid == 9) | ($node->nid == 10)){
print 'image-9.jpg" />';
}elseif ($node->nid == 11) {
print 'image-11.jpg" />';
}else {
print 'default-image.jpg" />';
}?>
</td>
</tr>
</table>To use it just put images in the image folder and mention the path in the code and also replace the names of images as per the node ids. This will help you to display different banner images for different nodes.
I think you can use it and this works for you too. You can reply to this post for further help.
Vivek Dubey
Header images are mostly
Header images are mostly background-images, so then you need something similar in loading stylesheets:
...
<?php$style_sheet = "style_node_" .$node_id;
drupal_add_css(..,..,$stylesheet);
print $styles;
?>
...
then ofcourse in in style_node_1.css it says:
#header{...
background:transparent url(project_zoo.gif); fixed no-repeat;
...
}
or something similar like this.
CSS background image based Header image
I have used Vivek's code snippet above to change header images that are set in CSS fils as background-images.
First I changed the logic in the page.tpl.php file so that I used the 'If Then' logic to modify the name of the CSS selector to choose from header-middle, header-middle2, header-middle3 and header-middle4. Then, In my CSS file I then copied my original '.header-middle' style 3 times and created .header-middle, .header-middle2, .header-middle3, .header-middle4 and referred to the image I wanted in the background-image selector of each one.
Here is what I did
In my page.tpl.php file I found the particular DIV that referred to my Header Image, in my case it was
<div class="header-middle">I pasted in Vivek's code and modified the output of the ifthen's to change the CSS selector - like this:
<div class="<?phpif ($node->nid == 1) {
print 'header-middle">';
}elseif ($node->nid == 8){
print 'header-middle2">';
}elseif ($node->nid == 6){
print 'header-middle3">';
}elseif ($node->nid == 4){
print 'header-middle4">';
}else {
print 'header-middle">';
}?>
Then in my CSS file I found the particular .header-image tag which in my case was as follows:
.header-middle {width:900px; height:150px; background:rgb(230,230,230) url(../img/bg_head_middle.jpg); overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}and copied it to create new ones pointing to each background image I wanted - as follows:
.header-middle {width:900px; height:150px; background:rgb(230,230,230) url(../img/bg_head_middle.jpg); overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
.header-middle2 {width:900px; height:150px; background:rgb(230,230,230) url(../img/bg_head_middle2.jpg); overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
.header-middle3 {width:900px; height:150px; background:rgb(230,230,230) url(../img/bg_head_middle3.jpg); overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
.header-middle4 {width:900px; height:150px; background:rgb(230,230,230) url(../img/bg_head_middle4.jpg); overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
And this works like a charm!
http://www.harostreetmedia.com
minor improvements (maybe)
Hi,
I am new to drupal, and was looking for a solution of the same problem.
I just used this piece of code in my template, to do the same work:
<?php$mydir = "YOURPATHTOIMGDIR";
$num = $node->nid;
$myimg = "h_".$num.".jpg"; // my header images begin all with the prefix "h_".
$def_header = "h_default.jpg"; // this is your default image name
foreach(scandir($mydir) as $header) { // warning: php5 only!
if ($header == $myimg) {
$def_header = $myimg;
}
}
?>
So if I create a new node, I don't have to edit the template. I only need to put the new header image in the right directory.
Only, I don't know all that stuff about server loads when scanning a dir on each page request. maybe this thing could be cached somewhere.
--
:: massimo colella
background-image for $term
Hello,
this code just works perfectly for nodes. But is there any way to get it working for terms?
Like this?
class="<?phpif ($term->tid == 1) {
print 'header-middle">';
}
I´m not so much into it, but thought this might be good to have? I saw the taxonomy term image module, but I need to keep the background image in the css.
Thank you very much.
a better way to do this would be...
this approach assumes you name your header images as such...
header-NODE_ID.jpg
example...
header-4.jpg
header-6.jpg
The benefit to using this approach is you simply need to add images to the directory using the naming convention above and the code will display them without further effort. You don't need to modify the php code every time you add a new header image.
<?php
$image_dir = '/path/to/images/';
$filename = $image_dir.'header-'.$node->nid.'.jpg';
if (file_exists($filename)) {
echo '<img src="$filename" alt="" />';
} else {
echo '<img src="'.$image_dir.'default.jpg" alt="" />';
}
?>
Ok I took the modifications
Using Drupal 5.7
Ok I took the modifications and moved the code to the template.php file
<?php function header_images() {
$image_dir = $base_path . $directory .'/images/header/';
$images = array(
6 => "at_a_glance.jpg",
7 => "someother.jpg",
8 => "another.jpg");
if (array_key_exists($node->nid, $images))
{
return "<img src='". $image_dir. $images[$node->nid] . "' />";
}
}
?>
nothing is showing up when I print the function on the page.tpl
What am I missing? http://www.resqdebt.com/site/node/6
Neither $base_path or
Neither $base_path or $directory is set so that will cause a problem. I am guessing you want something like
$image_dir = base_path() . path_to_theme() . '/images/header/';node id
didn't work
<?php function header_images() {
global $nid;
$image_dir = base_path() . path_to_theme() . '/images/header/';
$images = array(
6 => "at_a_glance.jpg",
7 => "someother.jpg",
8 => "another.jpg");
if (array_key_exists($nid, $images))
{
return "<img src='". $image_dir. $images[$nid] . "' />";
}
else {return "test";}
}
?>
It looks as though the function isn't getting the node id. How do I get the node id from template.php?
image header
Got it working thanks to: http://drupal.org/node/88834
<?php function resqdebt_header_images() {
if ( arg(0) == 'node' && is_numeric(arg(1)) && ! arg(2) ) {
$node = node_load(arg(1));
$image_dir = base_path() . path_to_theme() . '/images/header/';
$images = array(
6 => "at_a_glance.jpg",
7 => "someother.jpg",
8 => "another.jpg");
if (array_key_exists($node->nid, $images))
{
return "<img src='". $image_dir . $images[$node->nid] . "' />";
}
else {return "test";}
}
}
?>