A theme's content directory

Jan 18, 2011 at 10:47 PM

What's the correct way to address images in the contect directory of a theme?

I'm trying:

<img src="@Html.ContentFolderUrl("Images/banner.jpg")" alt="Noggin Box" width="1000" height="227" />

But the extension method Html.ContentFoldUrl doesn't seem to exist.

I found this in the docs here:

http://www.orchardproject.net/docs/themes-includes.ashx#HtmlContentFolderUrl_1

The closest thing I could find in the source was Html.ThemePath but this method is marked as obsolete.

Coordinator
Jan 18, 2011 at 11:33 PM

As a matter of curiosity, where did you find that ContentForlderUrl? I did not find that anywhere in the source.

There is a GenerateContentUrl in MVC on the Url helper but I think within Orchard you should use Html.Image that takes src, alt and a dictionary of attributes.

Coordinator
Jan 18, 2011 at 11:34 PM

Sorry I missed your link :|

Yeah, that document is an old, old spec document.

Jan 19, 2011 at 9:55 PM
Edited Jan 19, 2011 at 9:59 PM

I'm now using this:

 

@Html.Image("/Themes/NogginBox/Content/Images/banner.jpg", "Noggin Box", new { Height = 227, Width = 1000 })

 

It works, but I'm not sure about putting in the full theme path. It's fine for me here but it seems a little fragile for other things.

Mar 10, 2011 at 9:29 PM

I add the image to the media folder and use that as my directory...

 

Regards,

TJ Havens

Mar 30, 2011 at 8:40 AM

Did you notice that this: "<img src='/Themes/NogginBox/Content/banner.jpg' alt='Noggin Box' />"

Works great for the list or the page, but when you came to see detail that image is no longer avaible?

In List or Page the url of image should be "/Themes/NogginBox/Content/banner.jpg"

In the Detail (Content Item) the url of image should be "../Themes/NogginBox/Content/banner.jpg"

 

How to fix this? Other relative path doesent work so... it's have to be after Themes Folder...

Mar 30, 2011 at 9:04 PM
Edited Mar 30, 2011 at 9:14 PM

@Html.Image("~/Themes/NogginBox/Content/Images/banner.jpg", "Noggin Box", new { Height = 227, Width = 1000 })
Might work for you better, especially if you want to maintain the validity of the link relative to the actual root of the orchard 
web application and not the root of the website. Imagine the case where you host this as a Virtual Directory. 
Try running Orchard.Web from the solution in Visual Studio: you'll get a root path somewhat like this:

http://localhost:30320/OrchardLocal/

And your 'relative' paths will not work because they will be mapped to:

http://localhost:3032/Themes/NogginBox/Content/Images/banner.jpg

Mar 31, 2011 at 8:13 AM

Hmmm you're right...

This way works : @Html.Image("~/Themes/NogginBox/Content/Images/banner.jpg", "Noggin Box", new { Height = 227, Width = 1000 })

But this way doens't : <img src='~/Themes/NogginBox/Content/Images/banner.jpg' alt='Noggin Box' />

Why is that? The path's are the same.. :\


Mar 31, 2011 at 2:35 PM
Edited Mar 31, 2011 at 2:35 PM

Try this instead:

 
<img src='@Url.Content("~/Themes/NogginBox/Content/Images/banner.jpg")' alt='Noggin Box' />

It's a .NET thing, not an Html thing:

To overcome these disadvantages, ASP.NET includes the Web application root operator (~), which you can use when specifying a path in server controls. ASP.NET resolves the ~ operator to the root of the current application. You can use the ~ operator in conjunction with folders to specify a path that is based on the current root.

http://msdn.microsoft.com/en-us/library/ms178116.aspx

 

Mar 31, 2011 at 8:38 PM

Ohh i see, Thank you!