CODEWITHSUNDEEP
asp.netsitefinity
Maria Gosur
Maria Gosur

Reputation: 101

Custom Content Block in Sitefinity

I want to create a custom content block in Sitefinity so I can wrap an tag around it and pick up my CSS.

I created a custom widget, but I'm not sure how to make it a content block. I cannot find documentation on this, but I'm sure it is a common occurrence. Basically, I want a drag out content block that does this:

<aside>
[code for content block]
</aside>

I don't know how to generate the [content block] code in .net. I am new to .net development. I am using VB but can use C#.

Any help would be greatly appreciated. Thank you.

Maria

Upvotes: 0

Views: 1908

Answers (2)

Steve Mallory
Steve Mallory

Reputation: 4283

You can create a custom Layout Control which can be used in conjunction with other controls, such as Content Blocks.

To create a Layout control, open your project in Visual Studio and create a new control (.ascx) file in the WebApp project. I normally put mine in a ~/LayoutControls folder which I create. In that control file, enter something like:

<div runat="server" class="sf_cols">
    <aside>
        <div id="Div1" runat="server" class="sf_colsIn"></div>
    </aside>
</div>

You'll notice that besides the markup you want, the aside tag, I have two other divs with some specifics. These are needed so Sitefinity can treat this as a control, and be able to dynamically inject content into it.

A div with class sf_cols is common to all controls and the div with class sf_colsIn (id="Div1") is where control you drop onto the layout control will go. So there is an outer wrapper div, your markup, and an inner div. It's the inner div where your content will go.

Save your file, compile the project, then register the control in Sitefinity.

To do that, login to the backend then navigate to Administration | Settings | Advanced Settings | Toolboxes | Toolboxes | PageLayouts | Sections. I normally add a new section with these properties:

name=Custom,Title=Custom,Description=Custom Layouts,Global resourceClassId=PageResources

Then select your new section, select Tools, then Create New. The Name, Title, Description are whatever makes sense for you control. The Control CLR Type should be Telerik.Sitefinity.Web.UI.LayoutControl, Telerik.Sitefinity and the Layout Template should be the path to your ascx file, i.e. ~/LayoutControls/AsideBlock.ascx. The other properties can have the default values (most are just blank). Then Save.

Now when you are editing a page, click the 'Layout' button in the right hand column and you will see a 'Custom' Section which contains your control. Drag it onto the page, then go back to 'Content' editing (using the button in the right hand column). You will see your layout control and drop a content block onto it.

Add content normally. When the page renders, the content will be wrapped in the aside tag.

Upvotes: 1

SelAromDotNet
SelAromDotNet

Reputation: 4815

the easiest way to do this is with an external template for the content block. The template you want is ContentBlock.ascx and is in the SDK.

Copy this file to your project then add the wrapping tags around the contentHtml literal control (which renders the actual content of the control).

Then open the Advanced settings of the content block widget you want to use this template and specifiy the LayoutTemplatePath. It should have a default value of something like "~/SFRes/Telerik.Sitefinity.Resources.Templates.Backend.GenericContent.ContentBlock.ascx".

Simply change this to the virtual path to the template you created, then save and publish the page.

The content block will render with your template instead of the default one, with any markup you add.

I hope this is helpful!

I'm going to create a more detailed blog post that walks through this process and will link it here when I'm done. thank you for the inspiration!

Upvotes: 0

Related Questions