[Solved]how to change background of a div based on page id ?

Hello,

I have a content div which has a background picture, I would like for this background picture to change when different site pages are opened. But I'm not sure how to do it.

There was a similar thread on forum but it involved php and some othe thing I hadn't heard of before. If possible please suggest a simple method. [ed. note: viltnieks last edited this post 15 years, 1 month ago.]

The easiest way to do this is using inline CSS on your div and that allows you to use an image tv to specify your image for each page.

If you want to automate it, you can create a plugin to load the CSS for you. Something like this (attached to OnWebPagePrerender):



To get a little fancier, you could use a TV on each page to determine which CSS file is loaded. Something like this:

TV: Background
Input Option Values: red==red.css||blue==blue.css||green==green.css
Default: @INHERIT green.css

Then the plugin would look like this:

inline css is hard to maintain
BobRay's solution I'm sure works - but perhaps is more complicated than it needs to be.

How about adding a class to your content div:
and in your css:
.background1 { background-image: url(myimage1.jpg); }
.background3 { background-image: url(myimage3.jpg); }
etc
the css will style resources with ids of 1 and 3

Simple as it gets I think while being easy to maintain.

You could of course use an id instead of class but if i wrote it up that way it would be easy to get confused with id and id - the css one and the modx one, or is it the mySQL one?
[ed. note: whistlemaker last edited this post 15 years, 1 month ago.]

The solution Ben suggested is, in my opinion, the easiest one, and I wouldn't call it hard to maintain as it's done automagically

He (and me too) suggest using this in your template:

where a backgroundImageTV exists which is an image input type allowing you to select the image from the file system or uploading a new one, displaying a thumbnail as well. Output type should be default.

Of course, when things go beyond a different background image that can become a mess and it would be better to use a different solution. Either a TV choosing the css file or a plugin solution like Bob suggests. Or a body/div class referenced (hardcoded) in your css.

Thank you guys, when you explained this all seems so easy
I'm a bit sad that I didn't think of this myself.
It just amazes me how quite advanced (at least for me) things can be achieved so easy with modx.
In the end I chose adding , to div + css, works like a charm !

Just one little question, if I will start using Friendly URL will this still work or will I need to change to ?

You won't need to change anything. With FURLs on the id tag still returns the id number of the resource.

The solution you're using appears to work fine for you, but it might be difficult to scale to a large number of pages and/or background images.

However, resources can also be CSS files, not just HTML. To scale this approach, you could put the background image for each resource in a TV and then dynamically generate your CSS file using a GetResources call. I set this up the other day for dynamically generating a bunch of CSS sprites, it works well.

That would scale up somewhat, but with a very large number of pages the CSS file would get huge. To circumvent that, you could write a snippet that accepts the page ID as a GET parameter and auto-generates CSS that's specific to that one page. I'd probably write a snippet just to acquire the GET parameter and set it in a placeholder, then use getResourceField to pull in the appropriate TV, that way at least some of the data would be cached to maximize performance. This approach adds an extra HTTP request to each page, however, and an uncached one at that, which might slow your load time significantly.

So in the end, maybe the best and most scalable approach really is to just use inline CSS, unless you have strong objections to that for some reason.

The inline CSS solution has a lot of advantages:

• It's very simple and easy to implement.
• It scales automatically to any number of resources without adding significant overhead.
• It is completely cacheable, and doesn't make any snippet calls so it will perform very fast even uncached.

Speed optimization tools will always tell you to put your CSS in external files for better performance, and that is usually true, but in this case I think it will actually perform quite a bit better inline, at least at a large scale. [ed. note: esnyder last edited this post 15 years, 1 month ago.]

Thank you for explaining this in detail!

I will definitely keep this in mind, but I just needed this background change for few site pages and most likely it will remain this way.

I must admit that

To circumvent that, you could write a snippet that accepts the page ID as a GET parameter and auto-generates CSS that's specific to that one page. I'd probably write a snippet just to acquire the GET parameter and set it in a placeholder, then use getResourceField to pull in the appropriate TV, that way at least some of the data would be cached to maximize performance. This approach adds an extra HTTP request to each page, however, and an uncached one at that, which might slow your load time significantly.

Seems something out of my league, at least for for the moment :p

That's OK, I talked myself out of thinking it was a good idea anyway!