compass image urls

[chrisdrackett]

when using the following in a compass file (and django 1.3)

background-image: image-url("interface/arrow_back.png")

I get the following URL output in the css:

background-image: url('/images/interface/arrow_back.png');

i.e. its missing the STATIC_URL before /images

[miracle2k]

Fixed Compass filter for using helpers like image-url(). Closed by fcf697833b9f833a3a5f51cf9df4cada60643c9d.

[miracle2k]

Boy, the compass filter really is a hard one.

I have committed a fix for this, though some notes:

First, I'm using a very new Compass version here (0.11.beta.5), your results with older versions may vary.

Second, I'm setting the images base url to MEDIA_URL/STATIC_URL. That means, you need to use:

background-image: image-url("images/interface/arrow_back.png")

to reference the image. This is for two reasons. Number one, this is consistent with using the inline-image filter, which also needs a path relative to MEDIA_ROOT:

    background-image: inline-image("images/interface/arrow_back.png")

Number two, webassets has no concept of an "images" directory. That all images files are in the same directory is something Compass-specific. webassets could call Compass with the assumption that all images are in {MEDIA_ROOT}/images, but that would be arbitrary.

However, I am open to making this an option. Specifically, now that the filter has to write a configuration file anyway, one could image a COMPASS_CONFIG option that takes a dict and allows you to customize freely:

 COMPASS_CONFIG = {
     'http_images_dir': "/img",
     'images_dir': "img"
 }

[chrisdrackett]

Awesome! This is actually inline with the way I currently use compass so no qualms from me ;)

[chrisdrackett]

ok, so I've just updated to 0.6 and I'm running into an issue that I can't sort out (yet)

Not sure if its related, but I'm getting the following error:

compass: subprocess had error: stderr=WARNING: 'loading.png' was not found (or cannot be read) in /private/var/folders/0p/tr2njscx6159lf63fp7b8lc40000gn/T/tmpWqhkCx/images/images/bookends

where I have

image-url('images/bookends/loading.png')

seems like somehow images is getting in the path twice. I'm going to keep digging, but I thought I would post here just in case.

[chrisdrackett]

based on this:

['compass',
 'compile',
 '--sass-dir',
 u'/Users/cwd/Dropbox/src/warner/src/warner/media/static/sass',
 '--css-dir',
 '/var/folders/0p/tr2njscx6159lf63fp7b8lc40000gn/T/tmpWqhkCx',
 '--image-dir',
 '/Users/cwd/Dropbox/src/warner/src/warner/../warner/media/static/',
 '--config',
 '/var/folders/0p/tr2njscx6159lf63fp7b8lc40000gn/T/tmpWqhkCx/.config.rb',
 '--quiet',
 '--boring',
 '--output-style',
 'expanded',
 u'/Users/cwd/Dropbox/src/warner/src/warner/media/static/sass/main.sass']

it seems almost like the --image-dir option is being ignored? The path it is searching on is the same one defined for css :\

I updated some other projects to 0.6 and have not had this same problem. I'm probably missing something small in this one project...

[chrisdrackett]

ok, sorry for all the posts here. I fixed my issue. I think the images part of the error above was just a red haring. It seems I was missing a .sass file, which showed up at the very end of a long error message (which mostly just talked about broken images)