How do I display the current resources parents TV value within a dynamical attached CSS file?

141 Posts

Glyn Reply #1, 13 years, 5 months ago

How do I display the current resources parents TV value within a dynamical attached CSS file?

Could I possibly use a placeholder of some sort?

My Scenario:

site is responsive based on media queries
Have a Resource with a number of attached css files (also a modx resource)
Within the resource is a ad TV (mainSideAdMobile) image. This image (a TV) could be accessed from the home page ad TV (mainSideAdMobile) or from the current pages parent ad TV (mainSideAdMobile)
When the Resource is called I want the css to test weather the current pages ad TV (mainSideAdMobile) is empty and if so display the home pages ad TV (mainSideAdMobile) content

The setup

Home page has ad TV (mainSideAdMobile) image, this must be filled in and will always be displayed on the home page
Each internal section (container) has its own option to have a ad TV (mainSideAdMobile) image
when an article (child of a section) is displayed the ad TV (mainSideAdMobile) image could optionally be defined by its parents ad TV (mainSideAdMobile) image and if empty will show the home page ad TV (mainSideAdMobile) image
all the above use the same page template and call on the same responsive css files

The Resource tree

-Home (id=`1`)
-Section (id=`3`)
---Article (id=`4`)
-CSS (id=`72`)
---CSS file1 (id=`73`)
---CSS file2 (id=`74`)

Each CSS file needs to check if displayed Article has a ad TV (mainSideAdMobile) image defined and if not needs to display the Home pages definition

Within the CSS I have the following:

div.advertising {
	display: block;
	text-align: center;
	background-image: url(/[[!getResourceField? &id=`1` &field=`mainSideAdMobile` &processTV=`1` &isTV=`1`]]);
	content:'';
	background-size: 100%;
	background-repeat:no-repeat;
}

The CSS is called within all Resources using the following within the Template:

<link rel="stylesheet" href="[[~73]]" type="text/css" media="all">
<link rel="stylesheet" href="[[~74]]" type="text/css" media="screen and (min-width: 720px)">

The above will work on any page and always display the home pages mainSideAdMobile TV. How do I get it to display the current parent's mainSideAdMobile TV?

Please ask if the above does not make sense.

This question has been answered by sottwell. See the first response.

Glyn Szasz
Sydney, Australia

Happy to help (when can) and happy to learn

If you are a Sydney based MODX developer would love to hear from you. Please contact me.

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 13 years, 5 months ago

The browser makes a completely separate request for the .css "file" (and for .js and image files as well). It is handled by the server, and thus processed by MODx, as a totally different "page". There is no connection between them at all on the server side. And as far as the server is concerned, it's all "files", every MODx page is just a request for the index.php file with some query string parameters added. The server rewrite rules establish that if an actual file is not found, then the index.php file is loaded.

There are a few ways you could carry information across these requests. $COOKIE, $SESSION, or (unreliable) $_SERVER['REFERER'] values. The REFERER is the URL of the page that contains the link from which the current request was made. If you enter a URL directly into the address bar of the browser, or use a bookmark, there is no REFERER. Coming in from a Google search result will have the Google page as the REFERER. So for this purpose, since pages may well be bookmarked and accessed from the bookmark or from Google, the REFERER is not really useful.

I would use the SESSION myself; probably with a snippet at the top of every template, to store the resource ID in the user's SESSION. Then the .css resource would get the ID from the SESSION and work with it.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

discuss.answer

☆ A M B ☆
24,524 Posts

sottwell Reply #3, 13 years, 5 months ago

This does, however, raise a question... does this particular bit of styling need to be in the separate .css file? Usually I use a small style block in my template to handle the few page-specific styling directives. If it's really dynamic, you can use a snippet with $modx->regClientCSS() to load specific CSS files or blocks.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

141 Posts

Glyn Reply #4, 13 years, 5 months ago

Thanks Susan. I think I will go with the "small style block in the template" path. It seems a safer path and the least amount of trouble.

Once again, thank you.

Glyn Szasz
Sydney, Australia

Happy to help (when can) and happy to learn

If you are a Sydney based MODX developer would love to hear from you. Please contact me.

141 Posts

Glyn Reply #5, 13 years, 5 months ago

Just got it working with the below in the Template thanks to the above suggestion by Susan.

<style type="text/css">

@media
	{
		div.advertising {
			background-image: url(/[[!If?
				&subject=`[[!getResourceField? &id=`[[*parent]]` &field=`mainSideAdMobile` &processTV=`1` &isTV=`1`]]`
				&operator=`isempty`
				&then = `[[!getResourceField? &id=`1` &field=`mainSideAdMobile` &processTV=`1` &isTV=`1`]]`
				&else =`[[!getResourceField? &id=`[[*parent]]` &field=`mainSideAdMobile` &processTV=`1` &isTV=`1`]]`
				]]);
		}

	}

@media screen and (min-width: 720px) {
		div.advertising {
			background-image: url(/[[!If?
				&subject=`[[!getResourceField? &id=`[[*parent]]` &field=`mainSideAd720` &processTV=`1` &isTV=`1`]]`
				&operator=`isempty`
				&then = `[[!getResourceField? &id=`1` &field=`mainSideAd720` &processTV=`1` &isTV=`1`]]`
				&else =`[[!getResourceField? &id=`[[*parent]]` &field=`mainSideAd720` &processTV=`1` &isTV=`1`]]`
			]]);
		}
	}
</style>

Glyn Szasz
Sydney, Australia

Happy to help (when can) and happy to learn

If you are a Sydney based MODX developer would love to hear from you. Please contact me.

Answered How do I display the current resources parents TV value within a dynamical attached CSS file?