Calling Dynamic CSS File - My Forums

Calling Dynamic CSS File

ceramicmonster — Nov 17, 2018, 09:07 PM

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:


                    
                        [[+parallaxTitle]]

Re: Calling Dynamic CSS File

theuros — Nov 18, 2018, 08:34 AM

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;
}


...

.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(...);}

...
...
...

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.

Re: Calling Dynamic CSS File

BobRay — Nov 18, 2018, 03:59 AM

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:

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');