Images not displaying from theme layout (Orchard CMS)

Question

I'm trying to create theme for Orchard CMS. The template I have wasn't made for it so I have some troubles displaying images from Layout.cshtml.

This is the current folder structure on my web server (theme folder structure only):

Theme/Content/Images/Image.jpg Theme/Views/Layout.cshtml Theme/Styles/Site.css

The following line doesn't display image (located in Layout.cshtml):

<img src="../Content/Images/bgBig.jpg" alt="Big background image" />

However, this line does display the image (located in Site.css):

background-image:url('../Content/Images/bgLines.png');

I believe the problem is that Layout.cshtml doesn't display the image from Theme/Views/Layout.cshtml, but from the other location. If someone knows what would be that location or how to override it I would be thankful.

Answer 1

I might be a little late, but this may be of help to others.

To get the current theme and then build an dynamic path (as opposed to an absolute path) use this:

WorkContext.CurrentTheme: Gets the current working theme ExtensionDescriptor.

Then give it to the Html.ThemePath URL builder: Ex.

Html.ThemePath(WorkContext.CurrentTheme, "/Content/Images/SomeImage.png")

Have fun!

Best regards, Tiago.

Answer 2

When adding images in Layout.cshtml you should use the full path to your theme (eg. /Themes/My.Theme/Content/Images/MyImage.jpg). Remember that the paths you provide in [img] tag are relative to the URL in browser, not the path on the server. In MVC those are almost never equal.

Layout.cshtml view file gets loaded as a part of every single request, so relative paths placed inside will almost always break.

Imagine you have two Orchard pages: site.com/mypage and site.com/something/mypage. Layout.cshtml gets rendered in both of them. Relative URLs working for the first will surely break when you access second one.

CSS stylesheets are loaded directly by specifying absolute path to the physical files in /Themes/YourTheme/Styles folder (default), so in this case relative URLs will work.

HTH

Answer 3

Thx Tiago for your solution. I think this is in fact the correct solution, as opposed to linking the full path which I think would require the Orchard site to be on the root of the domain.

The full image reference of the original question would look like this:

<img src="@Url.Content(Html.ThemePath(WorkContext.CurrentTheme, "/Content/Images/bgBig.jpg"))" alt="Big background image" />

Answer 4

I'm surprised that nobody's mentioned that you need the following web.config in the folder in which your images/scripts/styles reside (see the orchard docs)

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.web>
    <httpHandlers>
      <!-- iis6 - for any request in this location,
           return via managed static file handler -->
      <add path="*" verb="*" type="System.Web.StaticFileHandler" />
    </httpHandlers>
  </system.web>
  <system.webServer>
    <handlers accessPolicy="Script,Read">
      <!-- iis7 - for any request to a file exists on disk,
           return it via native http module.
           accessPolicy 'Script' is to allow for a managed 404 page. -->
      <add name="StaticFile" path="*" verb="*" modules="StaticFileModule"
           preCondition="integratedMode" resourceType="File"
           requireAccess="Read" />
    </handlers>
  </system.webServer>
</configuration>

Additionally, as others have pointed out, this is the most reliable way of locating an image:

<img src="@Url.Content(Html.ThemePath(WorkContext.CurrentTheme, "/Content/Header.png"))" />