6

I am working with the Sass fallback structure and couldn't find any documentation on whether image folder fallbacks are also supported. I have set up my dev site as follows with 2 custom packages and themes:

skin/frontend/custom_package1/custom_theme1 skin/frontend/custom_package2/custom_theme2

Here is the config.rb file for custom_package1/custom_theme1:

add_import_path "../../../rwd/default/scss"
http_path = "/skin/frontend/custom_package1/custom_theme1/"
css_dir = "../css"
sass_dir = "../scss"
images_dir = "../images"
javascripts_dir = "../js"
relative_assets = true
sourcemap = true

output_style = :expanded
environment = :development

Here is the config.rb file for custom_package2/custom_theme2:

add_import_path "../../../custom_package/custom_theme/scss"
http_path = "/skin/frontend/custom_package2/custom_theme2/"
css_dir = "../css"
sass_dir = "../scss"
images_dir = "../images"
javascripts_dir = "../js"
relative_assets = true
sourcemap = true

output_style = :expanded
environment = :development

The scss files are falling back correctly. If they are not found in custom_package2/custom_theme2.... it checks custom_package1/custom_theme1... if not there it checks rwd/default...

The images do not appear to be falling back. I have the following file structure:

custom_package2/custom_theme2/images/ contains...
logo.gif

custom_package1/custom_theme1/images/ contains...
icon_sprite.png

When trying to load icon_sprite.png on the page I get a 404 error because it's looking for the image at custom_package2/custom_theme2/images/icon_sprite.png, which doesn't exist.

Questions:

  1. Is image fallback supposed to work the same as scss fallback?
  2. If so, how should I correctly set this up?

So far I've tried adding another import path to each config.rb:

custom_package2/custom_theme2/config.rb:

add_import_path "../../../custom_package1/custom_theme1/images"

custom_package1/custom_theme1/config.rb:

add_import_path "../../../rwd/default/images"
3

It depends on how you reference the image.

If you reference the image in a template file via a call to $this->getSkinUrl('images/sth.jpg'), then the fallback should work as expected.

But if you reference the image in a SCSS file with e.g.

.sth {
    background: url("../images/sth.jpg");
}

Then there is no other chance than copying the respective image to the child theme. Unfortunately, there is no add_import_path for images. add_import_path can only be used for SASS files. And the image-url function does not check if the file exists. It simply returns a URL relative to the images path.

  • Thanks @Simon! Will this feature in Compass create a similar fallback for images? – lilbumblebear Apr 18 '15 at 20:04
  • @lilbumblebear this totally sounds like the right issue for me, yeah. – Simon Apr 18 '15 at 20:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.