How to locate resources in Orchard

I am writing an Orchard theme, and I’d like to be able to locate some of the resources packaged with the theme (images/swfs etc).

What is the best way of doing this?

I’ve had a look at ResourceManifest files, using builder.Add.DefineResource but I can’t seem to find it’s counterpart in the view.
Or do I just put the full path in?

Any hints?

Cheers
Carl

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

If you need to define the new resource (script or stylesheet):

  1. Create a class inheriting IResourceManifestProvider
  2. Provide the void BuildManifests(ResourceManifestBuilder builder) method and
  3. Add all necessary resources via builder.Add().DefineStyle(“”) or builder.Add().DefineScript(…), just as you noted in your question.

For example:

public class ResourceManifest : IResourceManifestProvider {
    public void BuildManifests(ResourceManifestBuilder builder) {
        var manifest = builder.Add();
        manifest.DefineStyle("MyStyle").SetUrl("mystyle.css");
        manifest.DefineScript("MyScript").SetUrl("myscript.js").SetDependencies("jQuery");
    }
}

This defines one style and script you can reuse in your views. Urls are relative to /Styles (or /Scripts) folders in your theme/module where the class is located.

If you want to reuse some of resources already defined (in all enabled modules and themes), it’s as easy as writing eg.:

...
@{
    Style.Require("MyStyle").AtHead();
    Script.Require("MyScript").AtFoot();
}
...

inside your .cshtml view file. Example above would inject mystyle.css and myscript.js at appropriate locations (header/footer of the final page).

Method 2

I slapped together an extension method for a similar problem:

public static string ResourceUrl(this HtmlHelper helper, string resourceType, string resourceName)
{
    var manager = helper.Resolve<IResourceManager>();
    var settings = new RequireSettings { Type = resourceType, Name = resourceName, BasePath = resourceType };
    var resource = manager.FindResource(settings);
    var context = new ResourceRequiredContext { Resource = resource, Settings = settings };

    var url = context.GetResourceUrl(settings, "/");

    return url;
}

Resource Manifest Definition:
manifest.DefineResource("Content", "MyImage").SetUrl("Content/myimage.png");

View Usage:
@Html.ResourceUrl("Content", "MyImage")

It’s not well tested, and could probably use some error handling, but its working for me.

Method 3

Just to be clear, there are a few methods depending on your situation. I’ll outline the most common I know.

First of all, there is the inclusion of an external script or stylesheet on your particular part or theme. The standard syntax within a Razor template is this:

@Style.Include("YourPartEdit")
@Script.Require("jQuery")
@Script.Include("YourPartEdit")

The include files will look for that particular resource in the corresponding Style or Scripts folder: for @Script.Include("YourPartEdit"), it will look in the scripts folder for YourPartEdit.js.

You might have noticed that with Script.Require you can register a library with Orchard (in this case the registered one is jQuery), and cause a module to require that particular script.

To do this you create your own implementation of the IResourceManifestProvider interface, and implement the BuildManifests(ResourceManifestBuilder builder) method and create a named resource. You can use .AtFoot() or .AtHead() to even target where it will go.

Now say you want to reference a particular image, and you want to use Razor to always point to the correct image Url. First of all I recommend placing the image in your Content folder for your theme (assuming this is a theme related image), and you’ll do something along these lines:

<img <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="691a1b0a54293c1b05472a06071d0c071d">[email protected]</a>(Html.ThemePath(WorkContext.CurrentTheme, "/Content/your-logo.png")) />

Now, say this is on your Layout.cshtml page – you’ll now successfully serve the image anywhere on the site.

These particular techniques should account for a multitude of situations.

Method 4

In stylesheets, relative paths (from the stylesheet path) should be used.

In views, you should use Url.Content.

Method 5

Just a side note:

the solution posted by Adam Anderson works only when the controller class serving the view has the attribute [Orchard.Themes.Themed(true)]


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x