Branding.cshtml question

Topics: General, Writing themes
Oct 23, 2011 at 12:15 AM

I use the jQuery cycle script to fade through a number of images in my header which I place in the branding.cshtml view in my theme. I derive my theme from TheThemeMachine. It works fine except when I go to sign in. At that point it cannot find the images; it is looking in http://www.starlight.co/Users/Account/Media/Hac-Banner.jpg but this file does not exist there.

I use this as my branding.cshtml file:

<div id="HacHeader">
    <img src="Media/HAC-banner-030611-1000x200.jpg" alt="HAC Main Banner" />
    <div id="slideshow" class="pics">
        <img src="Media/BannerPix01-450x150.jpg" />
        <img src="Media/bannerPix05-450x150.jpg" alt="Hac scrolling banner" />
        <img src="Media/bannerPix06-450x150.jpg" alt="Hac scrolling banner" />
        <img src="Media/bannerPix07-450x150.jpg" alt="Hac scrolling banner" />
        <img src="Media/bannerPix08-450x150.jpg" alt="Hac scrolling banner" />
        <img src="Media/bannerPix01-450x150.jpg" alt="Hac scrolling banner" />
        <img src="Media/bannerPix02-450x150.jpg" alt="Hac scrolling banner" />
        <img src="Media/bannerPix03-450x150.jpg" alt="Hac scrolling banner" />
        <img src="Media/bannerPix04-450x150.jpg" alt="Hac scrolling banner" />
    </div>
</div>

and I have this java script file named bobsLogos.js in my theme's scripts folder:

$(document).ready(function () {
    $('#slideshow').cycle('fade');
});  

 And I have these global includes for my theme:

    Style.Include("HacStyles.css");
    Script.Require("jQuery");
    Script.Include("bobsLogos.js");
    Script.Include("jquery.cycle.min.js");

I tried changing the path from src="Media...." to src="~/Media..." and also tried changing to src="../../Media" but niether of those would work either - in fact those would not even work for the normal pages.

If I put an absolute path in there such as http://www.starlight.co/Media/BannerPix01-450x150.jpg then it will work in all cases.

I was trying to avoid making any changes to the core modules but cannot figure out how to or what to override. The absolute path names work ok, but seems like there must be a better way.

Thanks in advance!

Oct 23, 2011 at 11:47 AM

Hello,

I will be watching this thread - I too have struggled with not being able to utilize the ASP.NET notation of"~/" to have the URL based off the root URL.  As far as I know, there is no equivalent in Orchard - hopefully someone else will tell us differently and give a better response.  I ran into this problem when implementing hyperlinks in widgets as the widgets could appear on many pages and many levels of the site.  Same as you, I do not wnat to use absolute path as then it is not consistent when testing on a separate server/domain name.  What I went ahead and did is wrap my body part with my own code (and this should work for you here).

Here is what my "Parts.Common.Body.cshtml" looked like when I started:

<div id="bodypart">
@Model.Html
</div>

 And here is what I did to override/wrap it:

@using MyTheme.Helpers;
@{   
    var currentURL = HttpContext.Current.Request.ServerVariables["SERVER_NAME"] + HttpContext.Current.Request.ServerVariables["URL"];
}

<div id="bodypart">
@EMS.AbsoluteURL(Model.Html, currentURL)
</div>

In short, I collect the currentURL and use this, along with the Model.Html information, to pass into a Helper method I created.  Here is that Helper method (note that I have two flavors, one to handle string and one to handle HtmlString):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MyTheme.Helpers
{
    public class EMS
    {
        public static string AbsoluteURL(string html, string currentURL) {
            int rawSlashCount = 1;
            string replaceVal = "";
            int slashCount = currentURL.Split('/').Length -1;
            
            slashCount = slashCount - rawSlashCount;

            for (int i = 0; i < slashCount; i++) {
                replaceVal += "../";
            }
                        
            html = html.Replace("~/", replaceVal);

            return html;
        }

        public static HtmlString AbsoluteURL(HtmlString html, string currentURL) {
            int rawSlashCount = 1;
            string replaceVal = "";
            int slashCount = currentURL.Split('/').Length - 1;

            slashCount = slashCount - rawSlashCount;

            for (int i = 0; i < slashCount; i++) {
                replaceVal += "../";
            }

            html = new HtmlString(html.ToString().Replace("~/", replaceVal));

            return html;
        }
    }
}

I am sure there is a better way, but what I am doing is using the current page url to determine how many "../" I need to append to the url.  Using the example you provided, your "src=" would be passed in as "~/Media...".  I hope this helps.

 

 

 

 

 

 

Oct 24, 2011 at 12:44 AM

Was a busy day today but now just getting back to my computer - only to have to get ready to go off and do more errands. But I wanted to let you know that I'll look at this as soon as I get a chance. It definitely looks like it will work for me. Thanks for the suggestion and solution - even though as you say there might be a cleaner way out there. That's the nice thing about software - at least there are multiple solutions!

Thanks,
Bob