Best way to include styles and scripts on specific pages

Topics: General, Writing themes
Apr 3, 2011 at 5:21 PM
Edited Apr 3, 2011 at 5:21 PM

We have a number of jQuery widgets we want to use on different pages within the site (content rotators, photo display enhancements, ...)

What's the best way to include the necessary package of scripts and styles for each only on the pages that need it?

Some options we are considering:

1. Create a new page type and add the styles and scripts only when that page type is used. 

2. Create a module with a widget for each package of scripts/styles, so you just add, say, the 'PrettyPhoto' widget to a page if you need it

3. Create a general purpose widget that has fields for CSS and Script references so you customize it for each layer you put it on with the references you want

4. Turn every third party jQuery widget our designer wants to use into is own Orchard widget complete with UI for setting all the values and content needs

5. Other?

Apr 4, 2011 at 12:19 AM

Have you looked at how the script and style includes work for existing modules?

You create a ResourceManifest (inheriting from IResourceManifestProvider) and define all the files that your module includes.

Orchard already comes with most of jQuery (including all the various UI components) available for Require.

So you can write (for example) Script.Require("jQuery") in your dependent view. This ensures the script will be included but only once, and only if your view is used. Dependent scripts will also get included.
   

Apr 4, 2011 at 1:11 AM

Yeah, used all that in modules and that's what we'd use for option 2 and 4 above, but we can't use it in a view alone because there is no view file for a specific page on a site and they can't put Razor view syntax into the body of a content item (page) can they?  So they need a different way to specify what bundle of script and css needs to be loaded for a given page on the site.

Another option to add to the list above is to put code in Layout.cshtml that checks Request.Path.StartsWith(...) and then does Script.Require() ... etc.  but that's not a great technique since it doesn't survive an url change for a page.

So what's the best way to handle all these jQuery packages our designers will want to use on specific pages in the site?

 

 

 

Apr 4, 2011 at 8:48 AM

Presumably you have Razor views for the widgets?

Apr 4, 2011 at 9:47 PM

Not for the jQuery widgets, no.  Not unless we do #2, #3 or #4.

Oct 18, 2011 at 3:44 PM
hightechrider wrote:

We have a number of jQuery widgets we want to use on different pages within the site (content rotators, photo display enhancements, ...)

What's the best way to include the necessary package of scripts and styles for each only on the pages that need it?

Some options we are considering:

1. Create a new page type and add the styles and scripts only when that page type is used. 

2. Create a module with a widget for each package of scripts/styles, so you just add, say, the 'PrettyPhoto' widget to a page if you need it

3. Create a general purpose widget that has fields for CSS and Script references so you customize it for each layer you put it on with the references you want

4. Turn every third party jQuery widget our designer wants to use into is own Orchard widget complete with UI for setting all the values and content needs

5. Other?


What did you end up doing about this?  I would like to have a content rotator that would allow me to specify a number of content elements and have the rotator rotate through these content elements.

Thanks for any update.