Any way round hard coding image paths in my CSS file?

10 Posts

cr0wn3r Reply #1, 19 years, 4 months ago

I have created my template, my css, and the relavent image files, in

assets/templates/mytemplate/template.html
assets/templates/mytemplate/css/styles.css
assets/templates/mytemplate/img/lotsofimages.gif

and have got everything working.

I have atached a css file to my template, with

<style type="text/css" media="screen,print">@import "[(rb_base_url)]templates/mytemplate/css/styles.css";</style>

The problem is I cant help thinknig there must be a way to avoid hard coding the image paths for the template in the css file similar to the use of the [(rb_base_url)] above. Is there a way to get modx to parse the css so that I can avoid hard coded references like "http:// mysite.com/assets/templates/mytemplate/img/background.jpg" in the CSS file?

[edit]
i know this isnt a problem as such, and even relative paths are an adequate solution - the question is largely out of curiosity
[/edit]

MODX Staff
12,272 Posts

Ryan Thrash Reply #2, 19 years, 4 months ago

I’d submit that it’s a bad practice that will be fraught with potential upgradability problems when using the rb_base_url in your template, but you’re definitely on the right track! (good job

) When building sites, I add the following to my document heads above ANYTHING that requires a path (such as CSS, JS, etc.), including linked/imported CSS files. As such, you example above would look like:

<head>
  ... possibly some meta info and page title here ...
    <base href="[(site_url)]" />
  ... possibly other stuff here ...
    <style type="text/css" media="screen,print">@import "assets/templates/mytemplate/css/styles.css";</style>
</head>

Ryan Thrash, MODX Co-Founder
Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me

576 Posts

sirlancelot Reply #3, 19 years, 4 months ago

Image paths do not need to be hardcoded in the CSS file. If you do not supply the ’http://’ or the ’/’ at the beggining, the path will be relative to the location of the CSS file.

So you could have your CSS file in a folder (we’ll call it ’templates’). and inside the folder you have another folder (called ’images’). Inside your css file, all you need is this:

#header {
	background: url(images/header.png) repeat-x left top;
}