Adding different background image to each page

Topics: Customizing Orchard, General, Writing themes
Apr 29, 2011 at 10:42 PM

Hi everyone,

I’m new to orchard and I would like to get some guidelines from the experts. I would like to apply different background image to each page added to the site. Potentially a way to enable the editor uploads an image when create a page or edit an existing page. This image should be used as background when the page is rendered. I found a way to add a custom image field to a page but not sure how to display it on the page. How can I do this? Please brief it in details.

Thank you in advance.

Apr 30, 2011 at 3:59 PM

Here's how I did it:

1. Install ImageField module from Orchard Gallery

2. Add a Custom Field called BackgroundImage to the Page content type (you can do this thru the Content > Content Types screen in Dashboard)

3. Create a new Content.cshtml file in the ~/Views folder of your theme. The original file to copy from is Orchard.Core/Contents/Views/Content.cshtml. To access your field and set the background image do the following:

@{
    // ... Other code...

    // Get BG field from item
    var bgfield = ((Contrib.ImageField.Fields.ImageField)Model.ContentItem.PagePart.BackgroundImage);
    string backgroundImageFileUrl = bgfield==null?"": bgfield.FileName;
}
<article class="channel content-item @contentTypeClassName" @if(!String.IsNullOrWhiteSpace(backgroundImageFileUrl)){<text>style="background-image:url(@backgroundImageFileUrl)"</text>}>
...

Hope that helps!

 

Coordinator
Apr 30, 2011 at 4:21 PM

Great, but I would have suggested to override Content-Page.cshtml instead, not to mess up with other content types. But great one, nice.

Apr 30, 2011 at 4:29 PM

Good point; I was already doing it like that in my theme but forgot to mention.

May 1, 2011 at 11:32 AM

Hi,

Thank you for the reply. I try to do exactly as mention above. But I have couple of issues.

  1. I manage to add image field to the page but the image is not saving. I can browse and select the image but when I click publish the field become empty.
  2. Before I added the Content.cshtml to my template, I try to view the page and this is the result of the page. The “Background Image: “ text appear in the content.
  3. When I add the Content.cshtml and modify as mention, I’m getting the following error.

Server Error in '/' Application.
--------------------------------------------------------------------------------

'Orchard.ContentManagement.ContentItem' does not contain a definition for 'PagePart' 
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. 

Exception Details: Microsoft.CSharp.RuntimeBinder.RuntimeBinderException: 'Orchard.ContentManagement.ContentItem' does not contain a definition for 'PagePart'

Source Error: 


[No relevant source lines]
 

Source File: ContentItemBehavior.cs    Line: 18 

Stack Trace: 


[RuntimeBinderException: 'Orchard.ContentManagement.ContentItem' does not contain a definition for 'PagePart']
   lambda_method(Closure ) +62
   ClaySharp.ClayBehavior.GetMemberMissing(Func`1 proceed, Object self, String name) +11
   Orchard.ContentManagement.ContentItemBehavior.GetMemberMissing(Func`1 proceed, Object self, String name) in ContentItemBehavior.cs:18
   ClaySharp.<>c__DisplayClass34.b__31() +43
   ClaySharp.ClayBehaviorCollection.Execute(Func`1 proceed, Func`3 linker) +32
   ClaySharp.ClayBehavior.GetMember(Func`1 proceed, Object self, String name) +11
   ClaySharp.<>c__DisplayClass4.b__1() +43
   ClaySharp.ClayBehaviorCollection.Execute(Func`1 proceed, Func`3 linker) +32
   System.Dynamic.UpdateDelegates.UpdateAndExecute1(CallSite site, T0 arg0) +940
   ASP._Page_Themes_AOCTheme_Views_Content_cshtml.Execute() in f:\Orchard project\Orchard.AOC\src\Orchard.Web\Themes\AOCTheme\Views\Content.cshtml:10
   System.Web.WebPages.WebPageBase.ExecutePageHierarchy() +280
   System.Web.Mvc.WebViewPage.ExecutePageHierarchy() +104
   System.Web.WebPages.WebPageBase.ExecutePageHierarchy(WebPageContext pageContext, TextWriter writer, WebPageRenderingBase startPage) +173
   System.Web.Mvc.Html.PartialExtensions.Partial(HtmlHelper htmlHelper, String partialViewName, Object model, ViewDataDictionary viewData) +158
   Orchard.DisplayManagement.Descriptors.ShapeTemplateStrategy.ShapeTemplateBindingStrategy.Render(ShapeDescriptor shapeDescriptor, DisplayContext displayContext, HarvestShapeInfo harvestShapeInfo, HarvestShapeHit harvestShapeHit) in ShapeTemplateBindingStrategy.cs:121
   Orchard.DisplayManagement.Descriptors.ShapeTemplateStrategy.<>c__DisplayClass26.b__14(DisplayContext displayContext) in ShapeTemplateBindingStrategy.cs:109
   Orchard.DisplayManagement.Descriptors.<>c__DisplayClass5.b__2(DisplayContext displayContext) in ShapeAlterationBuilder.cs:55
   Orchard.DisplayManagement.Implementation.DefaultDisplayManager.Process(ShapeBinding shapeBinding, IShape shape, DisplayContext context) in DefaultDisplayManager.cs:173
   Orchard.DisplayManagement.Implementation.DefaultDisplayManager.Execute(DisplayContext context) in DefaultDisplayManager.cs:82
   Orchard.DisplayManagement.Implementation.DisplayHelper.ShapeExecute(Object shape) in DisplayHelper.cs:71
   Orchard.DisplayManagement.Implementation.DisplayHelper.Invoke(String name, INamedEnumerable`1 parameters) in DisplayHelper.cs:38
   Orchard.DisplayManagement.Implementation.DisplayHelperBehavior.InvokeMember(Func`1 proceed, Object target, String name, INamedEnumerable`1 args) in DisplayHelperFactory.cs:27
   ClaySharp.<>c__DisplayClass10.b__d() +52
   ClaySharp.ClayBehaviorCollection.Execute(Func`1 proceed, Func`3 linker) +32
   ASP._Page_Core_Shapes_Views_ShapeResult_Display_cshtml.Execute() in f:\Orchard project\Orchard.AOC\src\Orchard.Web\Core\Shapes\Views\ShapeResult\Display.cshtml:1
   System.Web.WebPages.WebPageBase.ExecutePageHierarchy() +280
   System.Web.Mvc.WebViewPage.ExecutePageHierarchy() +104
   System.Web.WebPages.WebPageBase.ExecutePageHierarchy(WebPageContext pageContext, TextWriter writer, WebPageRenderingBase startPage) +173
   Orchard.Mvc.ViewEngines.ThemeAwareness.<>c__DisplayClass7.b__5(ViewContext viewContext, TextWriter writer, IViewDataContainer viewDataContainer) in LayoutAwareViewEngine.cs:53
   Orchard.Mvc.ViewEngines.ThemeAwareness.LayoutView.Render(ViewContext viewContext, TextWriter writer) in LayoutAwareViewEngine.cs:83
   System.Web.Mvc.ViewResultBase.ExecuteResult(ControllerContext context) +384
   System.Web.Mvc.<>c__DisplayClass1c.b__19() +33
   System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +785284
   System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +785284
   System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +785284
   System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +785284
   System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +785284
   System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +785284
   System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +785284
   System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +785284
   System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +785284
   System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +785284
   System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +785284
   System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +785284
   System.Web.Mvc.ControllerActionInvoker.InvokeActionResultWithFilters(ControllerContext controllerContext, IList`1 filters, ActionResult actionResult) +265
   System.Web.Mvc.ControllerActionInvoker.InvokeAction(ControllerContext controllerContext, String actionName) +785360
   System.Web.Mvc.Controller.ExecuteCore() +159
   System.Web.Mvc.ControllerBase.Execute(RequestContext requestContext) +335
   System.Web.Mvc.<>c__DisplayClassb.b__5() +62
   System.Web.Mvc.Async.<>c__DisplayClass1.b__0() +20
   System.Web.Mvc.<>c__DisplayClasse.b__d() +54
   System.Web.Mvc.<>c__DisplayClass4.b__3() +15
   System.Web.Mvc.ServerExecuteHttpHandlerWrapper.Wrap(Func`1 func) +41
   System.Web.HttpServerUtility.ExecuteInternal(IHttpHandler handler, TextWriter writer, Boolean preserveForm, Boolean setPreviousPage, VirtualPath path, VirtualPath filePath, String physPath, Exception error, String queryStringOverride) +1363

[HttpException (0x80004005): Error executing child request for handler 'System.Web.Mvc.HttpHandlerUtil+ServerExecuteHttpHandlerAsyncWrapper'.]
   System.Web.HttpServerUtility.ExecuteInternal(IHttpHandler handler, TextWriter writer, Boolean preserveForm, Boolean setPreviousPage, VirtualPath path, VirtualPath filePath, String physPath, Exception error, String queryStringOverride) +2419
   System.Web.HttpServerUtility.Execute(IHttpHandler handler, TextWriter writer, Boolean preserveForm, Boolean setPreviousPage) +275
   System.Web.HttpServerUtilityWrapper.Execute(IHttpHandler handler, TextWriter writer, Boolean preserveForm) +94
   System.Web.Mvc.Html.ChildActionExtensions.ActionHelper(HtmlHelper htmlHelper, String actionName, String controllerName, RouteValueDictionary routeValues, TextWriter textWriter) +838
   System.Web.Mvc.Html.ChildActionExtensions.RenderAction(HtmlHelper htmlHelper, String actionName, String controllerName, RouteValueDictionary routeValues) +56
   ASP._Page_Core_Routable_Views_Routable_HomePage_cshtml.Execute() in f:\Orchard project\Orchard.AOC\src\Orchard.Web\Core\Routable\Views\Routable.HomePage.cshtml:3
   System.Web.WebPages.WebPageBase.ExecutePageHierarchy() +280
   System.Web.Mvc.WebViewPage.ExecutePageHierarchy() +104
   System.Web.WebPages.WebPageBase.ExecutePageHierarchy(WebPageContext pageContext, TextWriter writer, WebPageRenderingBase startPage) +173
   System.Web.Mvc.ViewResultBase.ExecuteResult(ControllerContext context) +384
   System.Web.Mvc.<>c__DisplayClass1c.b__19() +33
   System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +785284
   System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +785284
   System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +785284
   System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +785284
   System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +785284
   System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +785284
   System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +785284
   System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +785284
   System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +785284
   System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +785284
   System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +785284
   System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +785284
   System.Web.Mvc.ControllerActionInvoker.InvokeActionResultWithFilters(ControllerContext controllerContext, IList`1 filters, ActionResult actionResult) +265
   System.Web.Mvc.ControllerActionInvoker.InvokeAction(ControllerContext controllerContext, String actionName) +785360
   System.Web.Mvc.Controller.ExecuteCore() +159
   System.Web.Mvc.ControllerBase.Execute(RequestContext requestContext) +335
   System.Web.Mvc.<>c__DisplayClassb.b__5() +62
   System.Web.Mvc.Async.<>c__DisplayClass1.b__0() +20
   System.Web.Mvc.<>c__DisplayClasse.b__d() +54
   Orchard.Mvc.Routes.HttpAsyncHandler.EndProcessRequest(IAsyncResult result) in ShellRoute.cs:148
   System.Web.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() +453
   System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) +371

 


--------------------------------------------------------------------------------
Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.225 

Where did i do wrong?

Coordinator
May 1, 2011 at 4:08 PM

The page part's name is Page, not PagePart. You can see it by enabling the Designer Tools - Shape Tracing module, clicking on your content item, and browsing the Model.

c.f. http://orchardproject.net/docs/Customizing-Orchard-using-Designer-Helper-Tools.ashx?HL=shape,tracing for information on Shape Tracing

May 1, 2011 at 4:43 PM

Hi Sebastienros,

Thank you for the reply. Yes, i figure it out and I manage to fix it by changing the PagePath to Page.
But my problem now is the image field that i added to the page is not saving the uploaded image.
The image always empty, after publishing the page with selected image. What can i do to resolve this?

May 1, 2011 at 10:50 PM

Hi,

I manage to fix the image field issue by changing 'target = image;' to 'target = new Bitmap(image);' in line 149 and 163 (ImageFieldDriver.cs).

The “Background Image: “ text and the uploaded image appear in the content area. How can i remove this?

Thank you.

 

 

May 2, 2011 at 12:13 AM

Hi,

How can i move the below background image code

@{
    // ... Other code...

    // Get BG field from item
    var contentStyle = "";
    var contentItem = ((Orchard.ContentManagement.ContentItem)Model.ContentItem);
    if (contentItem != null)
    {
        var backgroundUrl = (Contrib.ImageField.Fields.ImageField)contentItem.Page.BackgroundImage;
        if (backgroundUrl != null)
        {
            contentStyle = "style=background-image:url(" + backgroundUrl.FileName + ");";
        } } <article class="channel content-item @contentTypeClassName" @contentStyle> ...

from content.cshtml to layout.cshtml? I try to mave it but the contentItem always empty.

May 2, 2011 at 9:59 AM

Hi,

Correction from the above post,

Actually i want to get the image from every page and apply it as background image to 'layout-wrapper' or body of the page.
So i try to access it in the layout.cshtml using the same code that i used on content.cshtml but the contentItem is always null.
How can i access this image and add it to the 'layout-wrapper' or body?

This is the code that i try to add to the layout.cshtml

@{
    // ... Other code...

    // Get BG field from item
    var contentStyle = "";
    var contentItem = ((Orchard.ContentManagement.ContentItem)Model.ContentItem);
    if (contentItem != null)
    {
        var backgroundUrl = (Contrib.ImageField.Fields.ImageField)contentItem.Page.BackgroundImage;
        if (backgroundUrl != null)
        {
            contentStyle = "background-image:url(" + backgroundUrl.FileName + ");";
        }
     }
}

Model.Id = "layout-wrapper";
Model.Attributes.Add("style", @contentStyle)
var tag = Tag(Model, "div"); // using Tag so the layout div gets the classes, id and other attributes added to the Model
...

Thank you.

May 3, 2011 at 6:29 PM

Hi,

I would like to get access to the image field data added to the page in layout.cshtml. How can i do this? Any help is appreciated.

Thank you.

Coordinator
May 3, 2011 at 6:33 PM

From the field, WorkContext.SetState("background-url", [yoururl])

And from the Layout, @WorkContext.GetState("background-url) somewhere

May 3, 2011 at 7:43 PM

Thank you, I manage to get it work with your help.

Thank you.