How to orgainise CSS, JS and images.

Hi,

I’ve been having a read around, but I’m still unsure of how to handle CSS and JS from the manager. I’m confused about creating the files from the manager vs creating folders with "assets" and uploading files via FTP. Of course it is easy enough for me to continue to just upload files to the server, and provide the path to the CSS and JS files in the template, and not use Modx at all, but it would be nice to be able to manage them from the manager.

Your replies cannot be too simplified and condescending!

Thanks.

All files can be stored in the appropriate folders in "/assets"; js files in /assets/js, css files in assets/templates/templatename. For example, you will find the files for the default template in /assets/templates/default. I always keep images specific to the template, such as background images, in the template folder, while images used in the content are kept in the /assets/images folder.

If you want to be able to manage these files with the MODx file manager, the folders must be "world-writable" (unless your server uses some form of phpsuexec). This is because a PHP script usually runs as the Apache web server’s user, while the folders belong to your ftp user. So either your folders have to be writable by everybody, so the Apache web server user can write the files you are using the MODx scripts to upload, or phpsuexec has to be used to switch the script to your ftp user.

While having other folders world-writable is optional, the /assets/cache and /assets/images folders must be writable for MODx to work properly. But you will most likely not be able to use the MODx file manager scripts to manage files in other folders if they are not also world-writable.

Just be careful to make sure that the config.inc.php file, created on installation in the /manager/includes folder, is not left world-writable after its creation.

Hi Susan,

Thanks for the heads-up about the config.inc.php file. It was still 777, but is now 644.

Just to be certain, making these files world rewritebale, will not mean that they are vulnerable to attack, will it?

Also, what about creating css files from the manager. I’m still confused about how I set the files up in the first place. If I set up the files with FTP, I think I’m write in saying that they will not appear in the Manager.

Thanks.

You can use a document as a css file; it should not use a Rich Text editor, it must be given the type "text/css" (second tab), and have no template. Then just specify [~xx~] as the @import or the href= instead of a usual path. (xx is the document ID of the css document). I always create an unpublished folder to store my css documents in just to keep things organized.

Hmmmm.

Much of this I had realised, but some is less onvious. I guess I’ll just play around with it.

What do you mean by "specify [~xx~] as the @import or the href= instead of a usual path". I get the ID stuff, and I’ve never used the "@import" method, but I assume it’s straight forward. However, I’m puzzled by "the href= instead of a usual path".

Oh, do you just mean use [~ID~] with wihich ever method you use?

Thanks.

Also,

Is there a way of handling images with the manager/IDs, or do I just use path/url, as usual?

I know that could just go ahead and try things, make things work, but I don’t want to find out later there are betters ways of using Modx.

Thanks.

Hi again.

Does this:

Path to CSS file:

Enter the path to your CSS file that you wish to use within the editor. The best way to enter the path is to enter the path from the root of your server, for example: /assets/site/style.css. If you do not wish to load a style sheet into the editor, leave this field blank.

. . . mean that you can only have one CSS file, or does refer to the conatining folder? This is what really confuses me. I cannot quite tie up the manager options, the admin system configuration, and creating olders and files via ftp. How do these thing relate? Which things are the same thing, but done a different way?

Sorry for all the newbie questions.

Hi Colin, thought I’d throw my thoughts at this thread for ya...

This is exactly where the flexibility of MODx becomes confusing for many, because there are so many possible ways to approach these issues. You just have to choose which approach is most appropriate for the task.

Including CSS and JS
You can choose to do this either by creating traditional css and js files and including them by URI in your templates as usual. This is probably the best method for doing this at this time, for several reasons. The first reason is that creating and storing CSS and JS as documents in MODx means that every request for these files will go through the MODx gateway before being rendered, which of course, means extra processing overhead on requests to these files. It also means that client-side browser caching of those files is going to be dependent on your document attributes (i.e. is it cacheable). Including the files as you would in any normal web page will avoid those issues.

This is not to say there is not a use for creating CSS or JS files as MODx documents to be stored in the database. In fact, you can use this technique to create dynamic CSS or JS files from snippets, chunks and other MODx tags. And future versions of MODx (1.0+ most likely) will be streamlined to handle these content types with reduced overhead when created as MODx documents. Then you can use the technique as below, where doc id 12 is your CSS file:



Also, you can specify as many links to CSS files or include as many in-line CSS style tags with inline style declarations as HTML will allow. MODx imposes no limitation on this.

Including Images
We are not handling binary content types of any sort at this time, as MODx documents. These will need to remain on the file system until binary content capabilities are supported in a future version of MODx.

Including external files
However, you can create MODx weblink documents to link to the URL of any file in your site, so you can still use the [~ID~] technique to reference any external files like this directly in your content, if you so choose.

Hope that clarifies a little more for you.

Thanks OpenGeek,

Yes, that clarifies things a lot.

I think that something might be included in the documentation about this. I know that this system is not aimed at non-coders and newbies, but I’m sure many would still benefit from the clarification.

I have now, already, switched to using the manager to handle the CSS. I didn’t consider the overhead, so I may change it back. As for caching: it did strike me as good thing that I had some control over that, as CSS changes are often the cause of sites breaking when the old CSS file is cached. I know there are ways around this, but however caching is managed by Modx, does save work. I know someone has posted some kind of hack here recently to force browsers to fetch new CSS files; I guess I will have another look at that.

I am going to create a blog area for members, and was going to look into the idea that they could manage their own CSS file (if that’s possible without admin privileges), but given what you have said about overhead, that might be a bad idea, even if it is possible.

One more thing, the server path for CSS in config area, how is that used? Is it for one file, or for the containing directory? I’m not even sure of it’s purpose!

Again, thanks.

Hey, Colin!

Okay, I’m another noob, so I hope someone chimes in if I misinform you.

Re your blog area for members, though they’d have to have admin to change stylesheets, there’s nothing saying they can’t use their own template. Each area of a ModX site can use its own assigned template. Don’t know if that helps.