Including javascript and css in a plugin: how to do this correctly?

Added by Mário Carneiro almost 16 years ago

I'm developing a plugin for redmine, and I'm using custom css and javascript. For now, I have the css and js files in ./public/javascripts and ./public/stylesheets, and I'm including them using the following erb tags:

<% content_for :header_tags do %>
  <%= stylesheet_link_tag "plugin.css", :media => "screen" %>
  <%= javascript_include_tag "plugin.js" %>
<% end %>

This works fine, but isn't very practical if I want to make my plugin available publicly. I'd like to be able to include them from ./vendor/plugins/redmine_myplugin/assets/stylesheets. How do I do this?

Replies (5)

RE: Including javascript and css in a plugin: how to do this correctly? - Added by Pedro Araújo almost 16 years ago

<% content_for :header_tags do %>
    <%= stylesheet_link_tag 'your_stylesheet_name.css', :plugin => 'your_plugin_name' %>
<% end %>

You can find this information in the end of the plugin tutorial: http://www.redmine.org/wiki/redmine/Plugin_Tutorial#Improving-the-plugin-views

RE: Including javascript and css in a plugin: how to do this correctly? - Added by Mário Carneiro almost 16 years ago

Yes, and that's how I do it. However, the resulting <link> tag is:

<link href="/plugin_assets/redmine_calendar/stylesheets/plugin.css" media="screen" rel="stylesheet" type="text/css" />

Following the plugin tutorial I find that the correct place to include the css from is /vendor/plugins/redmine_calendar/assets/stylesheets. Is the tutorial outdated and plugin_assets is the correct place to place the css and javascript or am I doing something wrong?

I'm using this code to include them:

<% content_for :header_tags do %>
    <%= stylesheet_link_tag "plugin.css", :plugin => "redmine_calendar", :media => "screen" %>
<% end %>

RE: Including javascript and css in a plugin: how to do this correctly? - Added by Pedro Araújo almost 16 years ago

No, the tutorial is not outdated. Furthermore, the resulting link tag is what was expected: as you should know, static content in a RoR application is usually located within the public/ folder. That link tag is actually pointing at public/plugin_assets/redmine_calendar/stylesheets/plugin.css, the file which was copied by the Rails Engine from your plugin's assets directory. Therefore, everything is working as expected.

As a side note, and if you missed this, here's a quote from the tutorial:

" When starting the application, plugin assets are automatically copied to public/plugin_assets/redmine_polls/ by Rails Engines to make them available through your web server. So any change to your plugin stylesheets or javascripts needs an application restart. "

RE: Including javascript and css in a plugin: how to do this correctly? - Added by Denis Savitskiy almost 14 years ago

Nobody replied, how it would be correct to include javascript inside a plugin..

RE: Including javascript and css in a plugin: how to do this correctly? - Added by Michael Krupp about 8 years ago

You can define a ViewListener to append your assets to the HTML head:

module RedminePluginWithAssets
module Hooks

  class IncludeJavascriptsHook < Redmine::Hook::ViewListener
    include ActionView::Helpers::TagHelper

    def view_layouts_base_html_head(context)
      javascript_include_tag(:application, :plugin => 'redmine_plugin_with_assets')
    end
  end

end
end

You then place your assets in your plugin directory: plugins/redmine_plugin_with_assets/assets/javascripts/application.js

(1-5/5)

Project

General

Profile

Redmine