Best way to include scripts/styles for single page

Topics: General
Feb 15, 2011 at 1:45 PM

I am creating a photogallery with the intention that I reuse as much Orchard functionality as possible (may also be gained by installing modules from the gallery). The idea is that I create one custom content type in the admin ui that will be containable and shown in a list which will be the album.

The custom content type has the following structure:

ImageGalleryItem (ContentType)

Parts:

  • Common
  • Containable

Fields:

  • Image (ImageField, width = 1024px)
  • Thumbnail (ImageField. width = 150px)

I am able to customize the look of ImageGalleryItem contentitems by adding the following view in my layout: Content-ImageGalleryItem.Summary.cshtml. I have created a List called "ImageGallery" and i'm adding ImageGalleryItems to this list to populate the gallery. The only thing that is missing is a nice way to include some scripts and styles that the gallery needs. How can I accomplish this? An additional question: is it possible to cache items of a List?

Thanks!

Coordinator
Feb 15, 2011 at 8:01 PM

Script.Include is what you're looking for. As for caching, sure, but you'd probably need to write your own controller for that.

Feb 16, 2011 at 11:59 AM

I'm aware of the existence of Script.Include, but is it save to put in the "Content-ImageGalleryItem.Summary.cshtml" view? Because that view will be rendered for each item in the list. The JS that I want to use on the page is some $(function(){}) Jquery initialization stuff. It should be included once for the page where the list is rendered. How can I override a view for a List?

Coordinator
Feb 16, 2011 at 5:34 PM

Sure, the whole point of that API is to remove duplicate scripts.

For your second question, can you create a separate thread with some more details about what exactly you're trying to do?

Feb 23, 2011 at 1:54 PM
Edited Feb 23, 2011 at 1:57 PM

Actually the second question is part of the first one. I've done the following to get it working but there should be a better way of doing this:

  • Created the content type "ImageGalleryItem" from within the backend UI
  • Created a List called ImageGallery
  • Created a template named Content-ImageGalleryItem.Summary.cshtml in which I structured the html for the images so I can apply the "ligthbox" functionality easily.
  • Created a page ImageGallery with url "imagegallery" (contentid = 51)
  • Created a layer for url ~/imagegallery with a container widget on it to show the ImageGallery list.
  • Created a template for the ImageGallery page called "Content-51.cshtml", in which I added the style and script references that I need for the "ligthbox" functionality.

This way it works but isn't there a better way? I needed to add a template for the page because I don't know how I can provide a template for a list. A nice addition would be a module that enables the possibility to cache the items of a list/container.

Additional question: Would the creation of an IShapeTableProvider (like in your http://weblogs.asp.net/bleroy/archive/2011/01/10/orchard-shapeshifting.aspx post) be an outcome if I want to prevent adding a template which contains a contentid? I prefer to add a template named "Content-ImageGallery" instead of "Content-51". 

Coordinator
Feb 23, 2011 at 7:39 PM

Well, that sounds about right, except for the hard-coding of the content id. The good news is that in 1.1 you'll be able to name your template Content-url-ImageGallery.cshtml without having to write code that creates the alternate.

Feb 23, 2011 at 9:42 PM
bertrandleroy wrote:

Well, that sounds about right, except for the hard-coding of the content id. The good news is that in 1.1 you'll be able to name your template Content-url-ImageGallery.cshtml without having to write code that creates the alternate.

Great addition, good job!