CODEWITHSUNDEEP
htmlorchardcms
B Sharp
B Sharp

Reputation: 477

Adding an element to page <head> in Orchard CMS

I am adding a new page to an Orchard site that I recently inherited from a co-worker. The page's purpose is to provide inline installation for our Google Chrome extension.

Supporting this functionality requires adding a link in the page's head element to the Google webstore page e.g. 

<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/apdfllckaahabafndbhieahigkjlhalf">

How can I add an element to a page's head? I know we have some Orchard modules that do similar things, does this require a module?

Upvotes: 2

Views: 3052

Answers (2)

Henry C
Henry C

Reputation: 4801

You can also insert script, css, etc directly into the <head> element via a custom theme. The default shape for document.cshtml has a zone named Head for which you can render various shapes in.

note the @Display(Model.Head) call in document.cshtml:

<head> 
    <meta charset="utf-8" />
    <title>@Html.Title(title, siteName)</title> 
    @Display(Model.Head)
    <script>(function(d){d.className="dyn"+d.className.substring(6,d.className.length);})(document.documentElement);</script> 
</head> 
<body>
@* Layout (template) is in the Body zone @ the default position (nothing, zero, zilch) *@
@Display(Model.Body)
@Display(Model.Tail)
</body>
</html>

Which means that if you want to add things into the element, you can do the following, for example, from layout.cshtml in your custom theme:

@{
    WorkContext.Layout.Head.Add(New.Analytics(), "10");
}

and in your theme, have Analytics.cshtml in the Views folder:

<script>
    (function (i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
            (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date(); a = s.createElement(o),
        m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-XXXXXXX-X', 'auto');
    ga('send', 'pageview');

</script>

Upvotes: 6

Piedone
Piedone

Reputation: 2888

I don't know of any module capable of adding arbitrary link tags to the head, so you have two options:

  1. Add it from a theme by registering the link from a shape template; this means you need to have a template in your theme that is used when building the layout of the site. For this you could e.g. override an existing template, like Document.cshtml from your theme and add the registration there. There is the Pretty Good Base Theme developer theme specifically designed to aid such scenarios by having extension points so you don't have to completely override (and does first copy-paste) an existing shape to include your own.
  2. Add it from a module through the ResourceManager.

Ad 1:

RegisterLink(new Orchard.UI.Resources.LinkEntry
{
    Rel = "chrome-webstore-item",
    Href = "https://chrome.google.com/webstore/detail/apdfllckaahabafndbhieahigkjlhalf"
});

Ad 2: Inject an IResourceManager in your code (that should run on every request where this link entry is needed; so maybe an IResultFilter) and use it in the same way as in the previous point.

Upvotes: 3

Related Questions