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.

Pardue

Answer 1

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

Abducent

Thank you very much! That is the solution! Can you recommend me additional documentation besides the official one for theming Orchard CMS? – Pardue

There are couple of blogs which focus on Orchard development and filling the missing docs parts:) I'd recommend reading those. – Abducent

Forgot to list them:) Bertrand Le Roy's - weblogs.asp.net/bleroy, mine - szmyd.com.pl, Nick Mayne's - themayneissue.com HTH – Abducent

Answer 2

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.

Neuropathy

What about paths in CSS? – Roentgenotherapy

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" />

Ziwot

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"))" />

Goto

I add this web.config, and my image works now but I have multiple 500 error on my css files like: localhost:30321/Themes/ImmoWhat/Styles/site.css (GET Error 500) – Arak

On the contrary, I actually had to remove the web.config file from my /Styles/Images folder for it to work. – Gadolinite

Answer 5

if you examine the source, it should show you where it's trying to find that image and failing. It's most likely the relative path it's having issue with, try an absolute path in the css to see if that's the issue. without the actual site, I can't know for sure.

Yonne