Geek Answers Handbook

Resource Pipeline for Custom Theme

I have a custom theme for my rails application. This theme consists of 8 folders with a complex structure (subfolders, many files). One of these folders is the bootstrap, which consists of css, js and img subdirectories. Some other folders and subfolder also contain css, js and imgages.

How can I use the pipeline to precompile these files and how to access them from the code?

+4
source share
2 answers

I recently acquired a large HTML5 theme and did some work to launch it in a rails project and use the asset pipeline. There was some extensive search / replace that I had to do to enjoy the graphic URLs. Here is the general approach I used:

  • Put all the provided "image" files and directories in / Seller / assets / images.
  • Place all attached stylesheets / Supplier / assets / stylesheets
  • Put all of the supplied javascript under / Provider / Assets / JavaScripts

Using the above approach, all relative paths should be maintained as the provider desired them. For example, my theme author had all the images in the "img" directory, so I just copied this directory to be / vendor / assets / images / img / ...

Now we need our application.css and application.js files to load the necessary files correctly:

  • in /app/assets/javascripts/application.js add lines to add all the javascript that you think the theme provider offers you.
  • in /app/assets/stylesheets/application.css add the lines needed to add all stylesheets

Now the tricky part depends on whether your javascripts and style sheets are included in other elements. For any files that did this, I recommend that you rename them to .erb (add .erb to the file name), which allows you to use rail assistants, such as the resource path and folder_image

.i24_arrow-180{ background-image: url(<%= asset_path 'img/icons/packs/fugue/24x24/arrow-180.png' %>); }

Or, in your javascript:

 '<%= asset_path('js/mylibs/charts/jquery.flot.orderBars') %>':

After you've fixed any image paths, you should be ready to move on to the new theme, and it will work with the Asset pipeline!

Warning: I spent several hours debugging the problem of compiling assets with a theme, and it turned out that it was because one of the images had a bracket in the file name, and the sass compiler tied it up!

+4
source

For bootstrap, I recommend using self-tapping screws for recovery. If you put the rest of your resources in the app / assets / {javascripts | stylesheets}, they will be packaged into one application. {Js | css} because your manifest has a require_tree statement by default.

For images, just put them in the app / assets / images and they will be available just as if they were in your public directory

+1
source

More articles:


All Articles