Skip to content

Asset Pipeline Theme Upgrade

Audrey Eschright edited this page Aug 10, 2014 · 4 revisions

If you're maintaining a Calagator theme or running a fork from before 369d1cb, you'll need to make a few updates to your theme files before deploying the new version.

For more details, take a look at the commits added in #44.

  1. Change following line in themes/*/views/layouts/application.html.erb:

     <%= javascript_include_tag  :defaults, :cache => true %>
    

    to look like:

     <%= javascript_include_tag 'application' %>
    
  2. Remove any additional ':cache => true' attributes used in your theme; most likely you won't find any beyond #1 above.

  3. The 'reset' stylesheet was merged with the 'core' styles, it is unlikely you would need or want to update this manually. 'common' and 'formtastic' core stylesheets have been merged into the 'application' stylesheet.

    Change the following lines in themes/*/views/layouts/application.html.erb:

     <%= theme_stylesheet_link_tag 'reset', :media => :all %>
     
     <%= stylesheet_link_tag 'common', 'formtastic', :media => :all %>
    

    to look like:

     <%= stylesheet_link_tag 'application', :media => :all %>
    
  4. Views work exactly as before. There is no longer a theme_ prefix for asset helpers (use stylesheet_link_tag instead of theme_stylesheet_link_tag).

    You will also want to rewrite your asset helper methods to take advantage of the asset pipeline.

    In themes/*/views/layouts/application.html.erb, change:

     <%= theme_stylesheet_link_tag 'typography', 'forms', 'layout', ... %>
    

to look like:

    <%= stylesheet_link_tag 'theme', :media => :all %>

and require your assets from themes/*/stylesheets/theme.css:

    /*
     *= require typography
     *= require theme-forms
     *= require layout
     * ...
    */
  1. Note that, just as with views, theme-specific assets now override any core application asset with the same name; it's best to avoid names already being used in app/assets/*/ (i.e. forms.js) unless you want to explicitly replace their behavior, not just augment it.

  2. You should also ensure any theme-specific javascript and stylesheet assets referenced by an asset helper method (by your views, not within the asset), are also defined in your theme/*/settings.yml file (see default theme):

     precompile_assets:
       - 'mobile.css'
       - 'print.css'
    
  3. If you want to take advantage of asset helpers in your stylesheets or SCSS templating in general (see http://sass-lang.com/), rename your theme's .css files to .scss.

  4. Image paths are now prefixed with /assets/ instead of /images/.

    You should update any hard-coded image paths in your views and assets to use image asset helpers.

    In your views, change elements like:

     <img src="/images/spinner.gif" alt="Spinner" ...>
    

    to look like:

     <%= image_tag "spinner.gif", :alt => "Spinner" ... %>
    

    In your stylesheets (provided you're using Sass or SCSS), change properties with url(...) from:

     background: url('/images/nav_marker.gif') ...
    

    to look like:

     background: image-url("nav_marker.gif")
    
  5. You can verify your theme will look correct on production by running:

     $> bundle exec rake clear assets:precompile
     $> RAILS_ENV=preview bundle exec rails s -blocalhost
    

    And walking through your application, keeping an eye for any 404 errors.

SUGGESTED DELETION