tell me more about file structure

I’m a total MODX noob. I just finished my first install and already have a site built and am wondering where and how to do a few things within the MODX file structure.

Here’s what I need to know. .

1) I have several Javascript files that to find a home. Is there an existing directory I need to put these in, or simply create a new file and put them in there?

2) Same thing for images (several background images, content images, etc). Is there any way to upload multiple images instead of one at a time?

3) Same thing for all my CSS files - can I simply put them in the CSS Directory?

*EDIT: sorry, I’m using REVO 2.0.6-pl2 (traditional)

Any help would be greatly appreciated,

K

You can put them wherever you want, but generally, stuff that needs to be accessed by URL, like JS and CSS files, goes under the assets directory. They will be available by URL even if you move other directories and MODx will leave them alone during upgrades.

assets/js and assets/css are common locations, but you’re free to organize them any way you want, so you can put them in separate directories if you like.

In this case, you can refer to them in code with something like this:



If they are tied to a specific snippet or plugin, the convention is to put them in.



Then, you refer to them like this:



Note that the MODx path and url constants always end with a slash so your part of the string shouldn’t start with one.

For files that don’t need to be accessed by URL (e.g. text, php, or data files), the convention is the same except that if they are tied to a snippet or plugin, they should go under MODX_CORE_PATH . ’components/mycomponent/ along with any component files (e.g., class files, readme.txt, changelog.txt, lexicon files, etc.). See the installed directories of the FormIt or Login packages for a typical structure for those files.

Bob,

Thanks for your help. Just to clarify, I’m going to add my css/js and images in the assets file, so when I reference them in the header it should look like this:

<script type="text/javascript" src="$url = MODX_ASSETS_PATH . ’js/cufon.yui.js’;"></script>

or for the CSS:

<link rel="stylesheet" type="text/css" media="all" href="$url = MODX_ASSETS_PATH . ’css/style-green.css’;" />

or is there another way to write it?

Would it be the same path for the images then? I’m guessing just one more level if I added a separate images folder to the assets folder?

I just want to make sure I’m doing this right.

Thanks for your help, I really appreciate it.

K

Sorry, I should have mentioned that that will only work in PHP code in an asset or snippet. In HTML code, the URL it needs to be an actual path:



or for the CSS:

Would it be the same path for the images then? I’m guessing just one more level if I added a separate images folder to the assets folder?

Yes:



And yes, you can add any directories you want below the ones listed above and just add them to the path.

BTW, if you need a CSS or JS file to go along with a snippet, in the snippet code, you can do this:



or



And again, these aren’t rules, just good practice.

Bob,

Thanks again for your help, I really appreciate it. I’ll give this a go and let you know if I need more help.

K

I just thought about this and remembered I already have a PHP contact form set up, where should I put the contact.php form?

Thanks again,

K

If it contains PHP code, the code (or the whole thing) will have to go in a snippet or a snippet + a chunk, both of which are stored in the DB, so you won’t have a file any more.

An alternative is to use one of the MODx form add-on snippets: SPForm for a simple contact form, FormIt (or eForm in Evolution) for a more complex form.

I did see there was a webformmailer.php file. Could I just take my contact.php file and cut and paste it in there?

It’s a pretty standard contact.php file.

I know this is a long shot, but I thought I might ask. Otherwise, I’ll just try and go the snippet route.

thanks again for all your help.


K

I don’t think so.

FWIW, this is what you’ll get with SPForm with very little effort: http://www.bobsguides.com/contact-form.html

It will also give you a drop-down list of recipients with paired email addresses.

Ok so tonight I thought I would give this a go and I ran into a major problem.

I can’t seem to get the file paths to my CSS stylesheets or to the JS correct. I think I’ve got the right file paths, but for some reason, it doesn’t want to work.

Here’s a photo of my file structure:



As you can see, I added the CSS, JS and Image folders in the Assets directory.

And here’s the header in my site:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv=“X-UA-Compatible” content=“IE=7” />
<title>DC Enterprises</title>
<link rel="shortcut icon" href="/favicon.png" type="image/png" />
<link rel="stylesheet" type="text/css" media="all" href="assets/style.css" />
<link rel="stylesheet" type="text/css" media="all" href="assets/css/style-green.css" />
<script type=’text/javascript’ src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js?ver=1.4.4"></script>
<script type="text/javascript" src="assets/js/cufon.yui.js"></script>
<script type="text/javascript" src="assets/js/jquery.Fancybox.js"></script>
<script type="text/javascript" src="assets/js/jquery.Portfolio.js"></script>
<script type="text/javascript" src="assets/js/jquery.Accordion.js"></script>
<script type="text/javascript" src="assets/js/jquery.Scripts.js"></script>
<script type="text/javascript">
Cufon.replace(’.Header h3’, {
textShadow: ’1px 1px 1px #357b0e’
});
Cufon.replace(’.Header span’, {
textShadow: ’1px 1px 1px #9ef36f’
});
</script>
</head>

I put several of my stylesheets into one main sheet, which is the "style.css" file, which then references the rest of the style sheets in the assets/css folder. This is how the file paths for this is set up:

Importing the CSS:

/* Global Reset */
@import "assets/css/reset.css";

/* Typography */
@import "assets/css/typography.css";

/* Layout */
@import "assets/css/layout.css";

/* Accordion Styles */
@import "assets/css/accordion.css";

/* Portfolio (Slider) Styles */
@import "assets/css/portfolio.css";

/* Fancybox */
@import "assets/css/fancybox.css";

/* Color Demo - You can remove this */
@import "assets/css/colors.css";

I feel like I have the file paths set up correctly, I’m just wondering why it isn’t working.

Thanks again for all your help,

K