Create separate side content for each page

Topics: Administration, General
Aug 22, 2011 at 3:08 AM

Hi,

I am using the Theme Machine theme for a website, but would like to be able to put content that could be different per page on the aside-second zone. At the moment though, it seems that I can only make this zone appear in an editable mode on the page, when I put an Html Widget in the side column. From that point on I can edit this text. However, of course it turns up in all page that have the layer in which I put it.

So I can make it so that the aside-second text on each page is different but only if I:

1. Create a layer for each page, with a layer rule that selects this page

2. For each of these layers add an Html Widget to the aside-second zone

Although that works, it seems a difficult way to do it, with the website being about 20 - 25 pages. It also makes it quite hard for my (less computer literate) client, to be able to update her own website easily.

I just wonder whether I am missing something (I am quite new to Orchard), and there is a better way to achieve this goal.

Thanks for any help.

Gerard

Coordinator
Aug 22, 2011 at 4:54 AM

Ther is a simpler solution.

Create a new Content Type, which has the same parts as Page, but with another field, maybe of type Html Field (on the gallery) if you want full rich text, or a simple Text Field if you just want content.

Then override the alternate named Content-YOURTYPE.cshtml, and inside, add a line containing Layout.AsideSecode.Add(Model.ContentItem.YOURTYPE.YOURFIELD.Value). It will add the current content item's new property to the specific zone.

Aug 22, 2011 at 12:09 PM

Hi Sebastien,

Thanks for this. I think I understand what you are suggesting and I have got it to work more or less. I have created a new type SideElement, with an additional Hmtl Field called SideContent. I can create new Content item of this type and I indeed get two editors where I can type in the main content and the side element content.

In the clone of the Theme Machine theme, in the Layout.cshmtl page, I have added the line:

Layout.AsideSecond.Add(Model.ContentItem.SideElement.SideContent.Value);

Just before the end of the top page code block.

But, I am probably doing something wrong somewhere, because the text I had typed in for the side content simply appears as an extra bit at the top of the main Content zone, instead of in the AsideContent zone. I had type a paragraph "Body content text block" in the Main content zone and "Side content text block" in the SideElement content, and what I now see is just these two paragraphs one after the other.

I have also tried

WorkContext.Layout.AsideSecond.Add(Model.ContentItem.SideElement.SideContent.Value);

but that does not help, unfortunately.

Any clues would be greatly appreciated.

Thanks, Gerard

Coordinator
Aug 22, 2011 at 5:12 PM

Don't change the Layout.cshtml file, create a Content-SideElement.cshtml file by using the Shape Tracing module. It will make a copy of Content.cshtml (in Core/Shapes), then change this file only, by adding the suggested line of code.

From the rendering of a content, you can change other zones. That's the suggested method here.

Aug 22, 2011 at 10:01 PM

Hi Sebastien,

You probably think I am a total ignorant, but how do I use the Shape Tracing module to create this file? What I have done is the following:

  1. Create a SideElement content element and bound it to a main menu item
  2. Went back to the front end of the website and clicked on this menu item to display the page.
  3. Opened the Designer tools to show the Shape Tracing
  4. Selected the shape with the side element text in it. That showed me the "Fields_Contrib_Html" shape in the shape tracer
  5. I went up one level in the shape tree and selected "Content"
  6. I then went on expanded the "Alternate" element in the "Shape" tab on the right of the shape tracer tool
  7. There I selected ~/Themes/<my web side name>/Views/Content-SideElement.cshtml and clicked the "Create" button next to it
  8. That created the following "Content-SideElement.cshtml" file in my "Themes/<my web side name>/Views" folder, to which I added the line of code you suggested:  (I have changed all sharp brackets into square ones to allow the actual content of the file to go in.
    @using Orchard.Utility.Extensions;
    @{
        if (Model.Title != null) {
            Layout.Title = Model.Title;
        }
        
        var contentTypeClassName = ((string)Model.ContentItem.ContentType).HtmlClassify();
    
    		Layout.AsideSecond.Add(Model.ContentItem.SideElement.SideContent.Value);		
    }
    [article class="content-item @contentTypeClassName"]
        [header]
            @Display(Model.Header)
            @if (Model.Meta != null) {
            [div class="metadata"]
                @Display(Model.Meta)
            [/div]
            }
        [/header]
        @Display(Model.Content)
        @if(Model.Footer != null) {
        [footer]
            @Display(Model.Footer)
        [/footer]
        }
    [/article]

I then tried to re-display the page, using F5, which resulted in the following server error message (yellow page of death):

'Contrib.HtmlField.Fields.HtmlField' does not contain a definition for 'Value'

Obviously I am doing something wrong here. I hope you don't mind trying to point me in the right direction again. Is there any documentation on Orchard that explains what is going on here, and outlines this process?

Thanks a lot for your help.

Gerard

Coordinator
Aug 22, 2011 at 10:12 PM

You seem to be doing very little wrong. It's just that the Html field doesn't seem to have a Value property. It should just be a matter of peeking into the code for that module to find out what the right property to use is. Or use the Model tab of shape tracing to the same effect.

Aug 22, 2011 at 10:36 PM

We are making progress here. Apparently it is the "Text" property that we need here. But (again),

  • It displays the paragraph markers in the text as well. I probably need to disable HtmlEncoding somehow.
  • And the text still displays in the main content area as well. How do I get it to not display there?

Thanks,

Gerard

 

Aug 22, 2011 at 10:39 PM

Ah. Fixed the first bullet point. Change the code line to

Layout.AsideSecond.Add(@Html.Raw(Model.ContentItem.SideElement.SideContent.Text));
Coordinator
Aug 23, 2011 at 12:07 AM

You can suppress the display in the main area by using placement.

Aug 24, 2011 at 2:35 AM

Hi Bertrand,

Thanks for that. I sort of know what you mean, getting the basic idea of Placement, but I need a little bit of time to find out what exactly to put where to make this happen. But today MS TechEd started here in New Zealand, so I am going to have very little time for a few days. Hopefully you don't mind if I get back to this on Monday.

Thanks,

Gerard

Aug 26, 2011 at 6:55 AM

Hi Bertrand,

Using the designer tool, I have come up with the following placement statements in the template's placement.info file. Is this correct? It does the job, but just want to make sure I have also done it correctly. (all sharp brackets replaced again with square ones to get the code in the editor:

[Placement]
	[Place Fields_Contrib_Html_Edit="-"/]

	[Match DisplayType="SummaryAdmin"]
		[Place Fields_Contrib_Html="-"/]
		[Place Fields_Contrib_Html_Summary="-"/]
	[/Match]

	[Match DisplayType="Summary"]
		[Place Fields_Contrib_Html_Summary="-"/]
	[/Match]

	[Match DisplayType="Detail"]
		[Place Fields_Contrib_Html="-"/]
	[/Match]
[/Placement]

Thanks for the help again.
Gerard










Coordinator
Aug 26, 2011 at 7:25 PM

Looks fine to me.

From: gerardvandeven [email removed]
Sent: Thursday, August 25, 2011 10:56 PM
To: Bertrand Le Roy
Subject: Re: Create separate side content for each page [orchard:269887]

From: gerardvandeven

Hi Bertrand,

Using the designer tool, I have come up with the following placement statements in the template's placement.info file. Is this correct? It does the job, but just want to make sure I have also done it correctly. (all sharp brackets replaced again with square ones to get the code in the editor:

[Placement]
        [Place Fields_Contrib_Html_Edit="-"/]
 
        [Match DisplayType="SummaryAdmin"]
               [Place Fields_Contrib_Html="-"/]
               [Place Fields_Contrib_Html_Summary="-"/]
        [/Match]
 
        [Match DisplayType="Summary"]
               [Place Fields_Contrib_Html_Summary="-"/]
        [/Match]
 
        [Match DisplayType="Detail"]
               [Place Fields_Contrib_Html="-"/]
        [/Match]
[/Placement]
Thanks for the help again.
Gerard
 
 
 
 
 
 
 
 
 
 
Sep 12, 2011 at 5:19 AM

Hi Guys, 

Please excuse my ignorance also, I'm just starting on Orchard. I am also trying to do something like this and am a bit surprised it doesn't already exist. From what I can see, some of the original documentation shows that it was an expected feature - http://www.orchardproject.net/docs/pages.ashx see the third mockup from the bottom. The bit I'm after is the idea of two content zones on a page. With the power of the zones in the theme it seems very limiting to only be able to use them for widgets that appear to be global? Is this correct of have I missed something simple? Assuming I havent missed anything, Im trying to perform the 8 steps that Gerard has listed above, on step 3, what is the "Designer"? Is that Visual Studio or equivalent? And what is "Shape Tracing"? Are there any documents that I can read about these?


Thanks
Scott

Coordinator
Sep 12, 2011 at 5:26 AM

There is a module for that on the gallery: http://orchardproject.net/gallery/List/Modules/Orchard.Module.Downplay.Orchard.LayoutSelector

Shape tracing is a feature from the designer tools module, available from the gallery. http://orchardproject.net/docs/Customizing-Orchard-using-Designer-Helper-Tools.ashx

Sep 12, 2011 at 5:32 AM

Hi Scott,

Yes, it is a bit of a surprise that something that seems such a simple thing to want from a content editing perspective, is really quite complicated to achieve. Especially with the amount of detailed documentation out there.

But the "Designer" is the "Shape Tracing" tool that you can download/install as a module in Orchard. Go to Modules in the dashboard and then select Gallery. Search for "Shape Tracing". Download and install it and, in the "Features" tab, make sure it is enabled.

Then when you browse your pages, you will see a tiny little square sitting on the right in your browser window status bar. When you click that you get a 'firebug' / 'developer tools' window. Then when you click an element in your page you can see details of this element in the shape tracing tool. Because the model in Orchard is completely dynamic, there is no way to normally interrogate the model in the debugger or something like that, but the shape tracing tool is a big help there.

In the step where I created the cshtml file, you have to find the correct "Alternate" for you shape and then click "Create" for that one to create the cshtml file that Bertrand was talking about. You can then in there add the code statement to put you second content field in the zone you want it to sit in. The file is created in the "Views" folder of your active theme.

What you then still need to do is turn off the display of that content field in the normal content area. You can do this by editing your placement.info file in your theme.

I hope this helps a little bit.

Gerard

Coordinator
Sep 12, 2011 at 6:07 AM

This is a typical scenario, and here is my take.

I would add some fields to the Page content type, or even create a specific content type. Then you need to create a specific alternate for this new type, and it this template you can inject the content of the fields into specific zones of the layout, or even call another shape with this content.

This way, when the editor will create some content, it will be obvious to provide side data, and this data will be placed automatically in the correct zones.

Sep 12, 2011 at 6:56 AM

Thanks for your help. Im still getting my head around all the terminology being used and also which of my changes are "data" and need to be included in rolling out to prod, and which of my edits are "code" and need to be added to source control. My instinct is to treat changes I can make through the UI as "data" and changes I need to make to disk files as "code". Sebastian, your solution seems very simple but I cant see how I can make that field html, is there something I need to do to make this automatically recognised as html and display a wysiwyg editor? Gerard, thanks for your help, Ive got the shape tracing working and that is a great help in understanding how the system is built!

Sep 28, 2011 at 9:36 AM
Edited Sep 28, 2011 at 9:36 AM

Hey Scott, Not sure if you found it yet but there's a 'Html Field' in the module gallery that will give you a WYSIWYG editor for a custom content type. Just search for 'Html Field' and it'll pop right up.