Support for multiple image and font directories

[chriseppstein]

Currently, if you have images from multiple locations you have to copy them to some known location under the images directory in order to reference them with image-url. Similarly for fonts. I'm toying with the idea of adding multiple search paths for images and fonts. The syntax for the config.rb file would be:

add_image_location "path/to/images/locally", "path/to/http/location"
add_font_location "path/to/images/locally", "path/to/http/location"

This would also enable finding sprite source files in multiple locations. It's not clear whether this would mean that all images matching the glob in all paths would get merged together or whether the first path for which the glob matches would be used. If you have a preference please let me know which and why.

This adds a fair bit of complexity, so my preference is to not add it unless there's a demand for it beyond the few use cases I've heard of. Specifically, if you'd like this, please let me know why it is preferable to copying files into a location that shares a common root directory with another images directory.

[zeelot]

This would be great for me because I use a PHP framework that separates functionality into modules which can each contain their own assets (css/img/js). I want my main compass application to be able to pull images from any of my enabled modules without having to write some custom script to copy all of the assets out of the modules.

I currently have an import path for the scss files in every module but cannot do the same for the other needed file types.

[stephenway]

In my team's setup we have each site setup as a compass project with it's own image directory but we also have a parent directory for common assets.

add_image_location "images", "/_assets/images"

.foo {
  background-image: image-url('image.png');
}

This would provide more portability and caching for our ad-hoc compass extension instead of doing something like

$default-asset-path: "/_assets";

.foo {
  background-image: url('#{$default-asset-path}/images/image.png');
}

[ChristianPeters]

I haven't needed that feature yet. But thinking of composing things – does the Rails asset pipeline already allow us to put images in the app/images / vendor/images folder of engines and does it then provide all those images transparently in the "virtual images path" to Compass?

[petervanderdoes]

I can see a want for this, like @Zeelot stated, but like you said, what to do when multiple files exists with the same name.

Instead of searching all added image locations, how about this: add_image_location "ID", "path/to/images/locally", "path/to/http/location"

And then add a parameter to image-url: image-url($path, [$only-path], [$cache-buster],[$location-id]) The location-id would correspond with the ID in the add_image_location function, if no ID is given use the image_dir setting from config.rb

[zeelot]

@petervanderdoes I don't think that would work in my case. I want my locations to be searched in the order I add them and the first image to match is used. This is similar to having multiple include paths in PHP. The point of the modules in my code is that I never need to know which module a file is in. You simply enable the module and the files are made available.

[petervanderdoes]

@Zeelot Doesn't PHP throw an error when a function is defined in multiple included files?

[chriseppstein]

@ChristianPeters Yes. Rails does this for engines, but it has a server-side component that compass does not, which greatly simplifies things. The url helpers in rails already do the right thing in this respect when in that environment.

@petervanderdoes @Zeelot The goal of this feature would be to insulate the sass code from knowing where the images are at in a particular project. In my particular use case, the images are actually in the default location in one project, but in an external location in another.

[marcvangend]

Yes, I could definitely use this. Currently I'm working on a Drupal theme (a so-called "sub theme") which is supposed to inherit some images from the "parent theme". I'd like to use the images from the parent theme's images dir, while being able to add (or override) images in the sub theme's images dir.

[evanweible-wf]

I could use this as well. Currently working on a project that pulls in an external repo for styling, and the application "extends" these stylings by importing a manifest file with constants and variables. This external resource's static assets live in a different place than the application's static assets. So if the application wants to use its own assets, I would need to be able to add multiple images and fonts directories.

[aaronlademann-wf]

+1

[michaelcarter-wf]

+1

[evanweible-wf]

Is there any update on this? Any idea if you're going to pursue this feature?

[piouPiouM]

:+1: Arg, I just need this feature today to avoid duplicate images of a theme in a Drupal sub-theme.

[scottdavis]

Pull requests accepted :)

Sent from my iPhone

On Aug 23, 2013, at 9:16 AM, Mehdi Kabab notifications@github.com wrote:

Arg, I just need this feature today to avoid duplicate images of a theme in a sub-theme Drupal.

— Reply to this email directly or view it on GitHub.

[Spittal]

Would be great!

[nathasha]

Latest compass (0.12.2) supports "sprite_load_path", which lets you add additional image paths. sprite_load_path << 'other-images-dir' http://stackoverflow.com/questions/17197655/how-to-point-to-a-sprites-folder-outside-the-project-directory

[piouPiouM]

@nathasha This does not work like you think. With this option, Compass will actually search sprite images across multiple folders (a/img/, b/img/, c/img/) but when it found one (b/img/icons/help.png), it will remember his base directory (b/img/) to work only with him and ignore others (a/img/, and c/img/).

That is to say if you have an image star.png in a/img/icons/ but not in b/img/icons/, Compass will throw an error because it only searches of sprite images in the directory b/img/.

[grayghostvisuals]

I gotta be that guy and ask what the status is on this feature?

[chriseppstein]

I've had a moratorium on new features in Compass until 1.0 ships. This is slated for 1.1

[werbfred]

This is 7 years old, but still up to date.

If you specify multiple locations the first matching one for a file should be selected. This way if you provide correctly your path structure, first path would be the specialization compared to the last one being the generic one.

The sprite solution won't work in the following use case:

1. Main theme folder with references to images in scss files

Consider following simplified structure

main_theme/sccs-files/form.scss main_theme/images/button.png

form.scss contains a line as : .button { background-image : image-url('button.png'); }

2. Child theme folder wich uses standard

Consider following simplified structure

child_theme/sccs-files/nice-form.scss child_theme/images/nice-button.png

nice-form.scss contains : @import forms; .button { background-image : image-url('nice-button.png'); }

This will fail as the per configuration the forms.sccs import will try to find file at child_theme/images/button.png and not at main_theme/images/button.png.

In practice, both themes are in different locations of the website. In my case a Drupal multisite which has a global theme and sub-domains having each their own customization, but using the main theme's design.