Images not displayed from the theme layout (Orchard CMS)

Question

I am trying to create a theme for Orchard CMS. The template I had was not created for this, so I have some problems displaying images from Layout.cshtml.

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

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

The following line does not display the image (located in Layout.cshtml):

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

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

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

I believe the problem is that Layout.cshtml does not display the image from the /Views/Layout.cshtml theme, but from a different place. If someone knows what will be in this place or how to redefine it, I would be grateful.

Answer 1

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

The Layout.cshtml view file is loaded as part of each individual request, so relative paths placed inside will almost always be interrupted.

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 accessing the second.

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

NTN

Answer 2

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

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

WorkContext.CurrentTheme : returns the current working theme of ExtensionDescriptor.

Then pass it to the Html.ThemePath URL builder: Example.

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

Good luck

Regards, Tiago.

Answer 3

Thanks Tiago for your solution. I think that this is actually the right solution, and not the binding of the full path, which, in my opinion, would require that the Orchard site be in the root of the domain.

A full link to 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 am surprised that no one mentioned that you need the following web.config in the folder in which your images / scripts / styles reside ( see gardener's documents )

 <?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> 

Also, as others have pointed out, this is the most reliable way to search for images:

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

Answer 5

if you research the source, it should show you where it is trying to find this image and fail. Most likely this is the relative path it is facing, try the absolute path in css to find out if this is a problem. without the actual site, I don’t know for sure.