The right way to add asset files to a template?

I wasn’t sure how to import a CSS file for a template. I got the Html template uploaded just fine. But I couldn’t find a module for CSS or images.

So I just FTP’d the files I needed (test-website is Modx’s root directory):
- I created a new directory /test-website/assets/templates/darkelve/
- I created subdirectories /test-website/assets/templates/darkelve/css
and /test-website/assets/templates/darkelve/images

In the xhtml Template I created in Modx interface, I put:
<link href="/test-website/assets/templates/darkelve/css/index.css" rel="stylesheet" media="screen" type="text/css" />

and for the images: /test-website/assets/templates/darkelve/images/

So basically I used relative links so the template can find my files.

Well... it works. But is this really a clean way to do it? I read the templating tutorial, but I’m still unclear as to how I should handle those "resource/asset" files (css files, images, flash, sounds, ...)

Edit: one thing I notice is that, if I want to make a link with the QuickEditor, and I pick "File Browser", then there’s only one document index.html there, but not the other documents I already created. Related perhaps?

You might try this post for working with template files.

The thing you’ll find about MODx is there’s generally not one ’right’ way of doing things. There’s a bunch of ways and they all work. You just need to decide which one best fits the way you work.

Not sure about the last part of your question, though.

this is a bit better i think :

<link href="[(base_url)]assets/templates/darkelve/css/index.css" rel="stylesheet" media="screen" type="text/css" />

and for making a link to other pages try the "LinkList" option instead ( i think you use the "Link URL"). The page are dynamic so you will never see them in a folder like a classic website...

Actually, you shouldn’t use base_url.

Add the following to your doc head, above any CSS or JS links:


Keep in mind that IE6 can have some bugs with that (go figure), but that can be hacked through. If you don’t want to mess with cluttering your stylesheet, you can use:

Thanks for that.

And as for the "Link URL", it seems that it only looks in the [(site_url)]/assets/files folder.
I found out once I uploaded a file there, and now it finds it. I agree the link list is nice,
but I had some trouble with when I started using search engine-friendly URL’s. I think I
forgot to name those, so the links broke.

I’m sure it’ll start making more sense once I play around with it some more...

So, are you saying it does not matter at all where I put my files?

Quote from: Darkelve at Mar 23, 2007, 04:35 AM

So, are you saying it does not matter at all where I put my files?

While there is no rule about where you put your files I would say a best practice would be to put them in the existing assets folder.

For example:

Template CSS: [tt]/assets/templates/template_name/css/file.css[/tt]
Template Images: [tt]/assets/templates/template_name/images/file.gif[/tt]
Files: [tt]/assets/files/file.pdf[/tt] (of course you could put sub-folders inside the files folder but you don’t usually need to have a folder for the template since a site usually only has one source of files regardless of the template used)
Content Images: [tt]/assets/images/file.gif[/tt] (Same goes for here; add subdirectories as needed)

Use the other folders (media, flash, etc.) as needed.

Note that only files that are directly related to a specific template (not the content) should be in the templates folder.

Then link to them in your HTML as suggested by rthrash in the post above...