IF Snippet Question

Hello everyone, I am new to Modx and I was hoping I could get some help figuring out this of code.

Here is the background, I am trying to make my website that has a different background image depending on which page it displayed. I have my css setup as a document in my resources and in my mind the easiest way to make this work would be to use the IF snippet and create an If statement that calls up the chunk of code with the background in it depending on what the page ID was.

Long story short is that it works... unfortunatly it is only reading the id of the css document. Can anyone help me get the if statement to us the id of the page being displayed instead of the css document that is being used?

Template Code (About Page is id#3)


CSS Code (If statement only works if operand=`4`)


AboutBg chunk


Thanks in advance for your help

Looks ok to me. Try adding an else statement and see what happens. You can also use the debug param to test the values

Quote from: cipa at Jan 29, 2011, 04:37 PM

Looks ok to me. Try adding an else statement and see what happens. You can also use the debug param to test the values

It does work, but only if the id is 4, which is the css document. I have the one template and the one css document. Currently the id will always be equal to 4 because it is pulling the id from the css document not from the page being viewed.

Hi,

i had some similar needs and tried to "pass" some parameter to the css resource with no luck.
Hope someone might enlight us

The best solution for this is to put the style in the template.
Anyway why would you want your css to not be cached by the browsers?

There is nothing wrong with css in a html file.

Alternatively you can use the http://rtfm.modx.com/display/revolution20/modX.regClientCSS

It was my plan to embed that css in the template unless there was a way to get the code I had to work in the css document. I just like keeping everything tidy lol.

Thanks for your help

Why not put the background image in a TV, and fetch its contents in the css resource with getResourceField?

Sounds a lot easier to maintain then a different if snippet for every resource?



The [[*id]] returns the id of the resource being called, obviously. You could append a GET param to the css doc from your template with [[~4? &id=`[[*id]]`]] and use a snippet to get the GET value, but that seems overly complicated.

I’m also wondering if it is convenient to put the background in a different resource, if it’s different per page. The main reason I consider when putting css in a file rather than inline (besides best practice, splitting content and styling etc etc) is the fact it can be cached by the browser, and will speed up future page loads. If that cache file changes every time a page is loaded that advantage is destroyed..


To get to a conclusion, I would probably use a TV in which you decide the image (heck - could even upload new ones through that, then! Or make a dropdown select which decides which one to use if you have a set amount), and put the style inline.

Alternatively you could put a class on your body element based on the current page’s alias, then put a style rule for each page in your css. That way the css content is the same on every page and only needs to be cached once per visitor. The css document with the backgrounds could still be a modx resource also, so you would still be able to make it a bit more dynamic, and easy to edit.

IMHO

Css files and Js files to be cached by the browser. You should not use dynamic CSS or Dynamic JS in the files that browsers should cache.
If you need custom CSS and Custom JS the best solution is to put the css and js in the template/html.

Even if you put the dynamic code in another file, and call it using parameters, you are still requesting another file from the server, which is slower that embedding the code in the template.