Calling Dynamic CSS File

20 Posts

Ben M Reply #1, 7 years, 10 months ago

I have a homepage with several parallax sections, each with a background populated from inline CSS styling. I use MIGX TV to manage the sections. However, inline CSS is not best practice and I would like to create a resource as a CSS file, that when included by a resource, populates the CSS with the MIGX table for that resource. Or whatever is best practice for MODX. I hope I'm being clear, his is what I have.

Draft Site:
https://c0092.paas1.tx.modxcloud.com/

Current inline styling:

.parallax {
        section.module.parallax-[[+idx]] {
          background-image: url("[[+parallaxImage]]");
          background-position: 50% 0;
          background-repeat: repeat;
          background-attachment: fixed;
          background-size: cover;
          /* background-color: rgba(0,123,255,0.4); */
          background-blend-mode: screen;
          }

HTML:

<section class="module parallax parallax-[[+idx]]" data-type="background" data-speed="10">
                    <div class="parallax-container">
                        <h2 class="mx-auto d-flex justify-content-center"><span>[[+parallaxTitle]]</span></h2></span>
                    </div>
                </section>

24,544 Posts

BobRay Reply #2, 7 years, 10 months ago

If I'm understanding you (and I'm probably not), it might make sense to put the CSS into Multiple files, and the filenames or paths to those files into the MIGX TV (or a regular TV).

Then in the head section of the template, you can do this:

<link rel="stylesheet" type="text/css" href="[[!*TvName]]">

Another common way to go is to write a custom snippet that evaluates the current conditions (for example, checking the current resource ID), and injects the appropriate CSS file this way:

$modx->regClientCSS('path/to/css/file');

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

91 Posts

theuros Reply #3, 7 years, 10 months ago

From your code I can assume that only background and class name changes.

I would do it like that:

.parallax {
        section.module.parallax {
        background-position: 50% 0;
        background-repeat: repeat;
        background-attachment: fixed;
        background-size: cover;
        background-blend-mode: screen;
}

<section class="module parallax parallax" style="background-image: url(...);" data-type="background" data-speed="10">
...
</section>

Or

.parallax {
        section.module.parallax {
        background-position: 50% 0;
        background-repeat: repeat;
        background-attachment: fixed;
        background-size: cover;
        background-blend-mode: screen;
}

.p-1 {background-image: url(...);}
.p-2 {background-image: url(...);}
.p-3 {background-image: url(...);}

<section class="module parallax parallax p-1" data-type="background" data-speed="10">...</section>
<section class="module parallax parallax p-2" data-type="background" data-speed="10">...</section>
<section class="module parallax parallax p-3" data-type="background" data-speed="10">...</section>

A good option is also to use javascript to load the right image when parallax comes to viewport. I think that inline CSS for background-image is a good option

If you realy want a separate CSS then create a resource with type CSS and generate all backgrunds there. I don't see a point to create a separate CSS for each parallax.

Basically this is not a modx problem

Figure it out what is the best way for you and we can give you advice how to do it in modx.