By mod_phx on

hi everyone,
our layout (based on the yahoo grids.css system) looks like this:

header
navSidebar mainContent
footer

the mainContent div tag needs to have a background-image that can be changed depending on the page. i'd like to have the image specified using the theme, so that our content manager can decide which background-image to use without me having to change any code. the theme i'm using was derived from the standard bluemarine theme. basically i stripped out everything excpept the print $content; section and replaced it with my own code, but the admin side is still bluemarine.

i know i can hard-code some php code to dynamically generate the background-image portion of the css file, but i'd rather avoid this, because every time we want to add a new image i'd have to change the php code.

thanks so much!!!

⋅ Categories: Drupal 4.7.x

Comments

mod_phx’s picture

mod_phx commented

would i be able to accomplish this using some sort of taxonomy?
like i can label a page "image1" and have a script automatically make any page that has "image1" as a label use image1.jpg as the background-image in the

tag?

i'm super new to drupal, so the whole taxonomy, blocks, modules, books, pages, etc thing is still kinda hazy.

davemybes’s picture

davemybes commented

I use the following that I found somewhere in these forums:

// give <body> tag a unique id depending on PAGE PATH
$uri_path = trim($_SERVER['REQUEST_URI'], '/');
$uri_bits = explode('/', $uri_path);
if ($uri_bits[0] == '') {
  $body_id = 'front';
} else {
  $body_id = str_replace('/','-', $uri_path); // use dashes to replace slashes in the URI
}
$body_id = 'page-'.$body_id; // add 'page-' to the front of the id

Put this code in page.tpl.php before your doctype definition i.e. this must appear first on the page. Then modify your body tag:

<body id="<?php print $body_id ?>">

Now each page will have an id based on its path. This allows you to then define unique styles on a per page basis. So, in your example, you could do something like this in your css file:

body#page-about #container {background: url("about.jpg")
body#page-contact #container {background: url("contact.jpg")

All you have to do to change the image at a later stage is replace about.jpg or contact.jpg with a new image. If you don't want an image, delete the file - if the css can't find the image, it ignores it.

______________________________________________________________________________________________________
Recent Drupal websites: http://mbacasecomp.com and http://hudsonhistoricalsociety.ca

______________________________________________________________________________________________________

mod_phx’s picture

mod_phx commented

very interesting...do you think this would work using the page's taxonomy term instead of the path?
that way any page that's tagged "page-contact" by the content manager would have contact.jpg as the image.

this would allow the content managers to decide which image they want on a given page, just by changing the taxonomy term.
this way, they can go to town changing images without having to involve me = less work for me!!!
am i on the right path?

davemybes’s picture

davemybes commented

You could try something like this:

<body id="<?php print $terms ?>">

and leave out that first bit of code I posted earlier. However, if you have more than one term for a page, you're probably going to have problems. I haven't tried this myself, but its worth a go I guess.
______________________________________________________________________________________________________
Recent Drupal websites: http://mbacasecomp.com and http://hudsonhistoricalsociety.ca

______________________________________________________________________________________________________

toma’s picture

toma commented

Than you for this

---
Daily webmaster news and directory (digg style)
http://www.dwebmaster.com

gosomewhere.eu’s picture

gosomewhere.eu commented

Sorry if I am asking in the wrong place, but this was the closest topic related to what I need.
The thing is I need that my banner image changes depending on the page I am browsing, like for example, my blog page has a photo of me, and my girlfriends blog has a picture of her. I am talking about a "top picture" element that I know where it is in the style.css file.

Thanks for your help and ask more info if I was unclear.

jlmeredith’s picture

jlmeredith
Location Denver, CO
commented

themacgeek
It Ain't Easy Being A Geek
http://themacgeek.com

--
Jamie Meredith