By Steady on

Hi,

I don't know if this is possible - it probably is in Drupal ;-)

Basically, my theme uses a background image in the CSS file to add a background picture to the site. It only appears if there is some content in the particular region in the theme which is nice.

Let's say the current background image is of a Fire Engine.

Here's what I want to do:

If someone adds content about Police Cars, I would like the background image to be a police car instead of a Fire Engine.

If someone adds content about helicopters, I would like the background image to be a helicopter instead of a Fire Engine.

As I said, in the style.css file there is only the one background image file of a fire engine that appears if there is content. Is there a way to have Drupal display different background images via CSS based on the content type?

Maybe it can be done based on the url file name or by tagging the content somehow. Is this even something that would be done via CSS or is there another way?

The only long winded way I can think of is to create hundreds of different versions of the page.tpl.php template or block.tpl.php and manually edit the content after it has been created. Obviously not the way to go.

Has anyone got any bright (but simple) ideas for this. I am not a php developer. I only know enough php to make things appear on the page.

Perhaps there is a "simple" solution, where the background image in the css file is dynamically altered depending on the content topic. Is this possible?

Thanks,

Sam

Comments

nonprofit’s picture

nonprofit commented

Sam, here is how I would do this.

In your .css create classes each with a unique background image;

.firetruck {
background-image:firetruck.jpg;
}

.policecar {
background-image:policecar.jpg;
}

Create templates which the machine readable name of your content type appended to the name of the file.
node-firetruck.tpl.php, node-policecare.tpl.php, etc.

In your new templates, add the appropriate classes.

<div="foo" class="firetruck">

Hope this helps!

-NP

Steady’s picture

Steady commented

Hello NP,

Many thanks for your reply.

I think this makes sense to me, but I was wondering how do I ensure that the relevant content page uses the relevant .tpl.php template file.

In other words, if a contributer is writing about police cars, how do I ensure that the node-policecare.tpl.php gets used?

Is it by content type or something else? I have vaguely read this done but can't recall the details.

I may be wrong, but it seems to me that this solution is workable if there are up to a few dozen different background image "categories".

What if there are a few hundred different background images / categories?

Thanks,

Sam

nonprofit’s picture

nonprofit commented

Hey Sam, the node-[content type].tpl.php will always supercede node.tpl.php. No additional settings are necessary and, yes, it is based on content type. Sorry, I don't know how to handle hundreds of categories efficiently. -NP

Steady’s picture

Steady commented

Thank you.

Your suggestion will help in somw way - i.e. on a content type basis.

I am still looking to find a way to go deeper than this, i.e. on a page by page basis.

Cheers.
Sam