Fork me on GitHub
2sxc 9.4 for DNN 7 to 9
Website Builder, Content Manager, App-System: open-source and amazing
You are here: Home  >  Blog

Inner Content Blocks allow Details-Page Design (new in 8.4) - like Modules inside Modules

Since 2sxc 8.4 you can create content-blocks inside other content blocks. This allows you to create list/details scenarios and still use designed 2sxc-content block or even gallery apps inside the details-page.

Content Blocks Inside Content Items

Basically Content Blocks are 2sxc-modules...inside a normal Content-Item.

So you can insert content-blocks or app-blocks inside another 2sxc content-item and create complex pages. 

 

Why we need Inner Content Blocks (like modules in modules)

The reason we need content-blocks is that 2sxc has so far allowed us to do very complex stuff like

  1. design / create awesome, responsive content pages which were built using 2sxc modules (app and content) to create great solutions - in this case, the editor kept on adding content-blocks using dnn-modules and created a perfect content-page
  2. create awesome, responsive list/details systems like blogs, news and more - where the details page was automatically rendered based on information in the content-item

When people created list/details scenarios, then the details-page usually had to make do with a WYSIWYG content. This was great, thanks to the new WYSIWYG in 2sxc 8, but it wasn't good enough for us. What we wanted to do better was streamline the user experience (not on way to create pages, another way to create articles) and also allow using apps (like galleries) inside an automatically rendered details page. 

The Designer Keeps Full Control

If you've been working with 2sxc a lot, you know that we believe that designer should determine the look of a solution, and content-editors should take care of the content inself. So here too we wanted to make sure that the designer keeps control and helps the editor not shoot himself in the foot.  

So our solution is not an insert-into-wysiwyg, which would introduce many follow up issues and wrapping problems in responsive situations. That would also have led to users adding content-blocks in tiny items (like tiles) where they simply shouldn't go. 

Our solution allows the user to define areas in the details-view - similar to panes - and then allow the editor to add content-blocks as he/she wants them. In most cases we expect that there will be only 1 such area - typically after an introduction text - but the solution is flexible enough to allow multiple such areas, allowing some freedom in arranging blocks side-by-side or having some blocks before some kind of splitter (like advertising) and continue below. 

Full AJAX Editing Experience (1 Second Vision)

We've focused on keeping editor interactions short and light. So the content blocks also support 2sxc-ajax, allowing most content-items to be created, edited, saved without ever reloading a page. 

Steps to Set Up Inner Content

  1. In your content-type (like Blog-PostNews or Article) create a new Content-Item (Entity) field and give it the input-type content-blocks. This will give the system a data-container to manage all these inner-content-items.
  2. Note that the content-blocks input type will show up in the Edit-UI but be very unobtrusive - it only allows move/delete as needed (see pic). If you want it to be invisible, just change that setting in the field-configuration. 
  3. In your template, place some code to render the inner content, and around that, place a special DIV-tag to help the edit-UI generate all the necessary buttons

Template / View Code to Use Inner Content Blocks

<!-- blog content blocks -->
<div class="app-blog-text sc-content-block-list" @Edit.ContextAttributes(post, "DesignedContent")>
	@foreach(var cb in @post.DesignedContent) {
		@cb.Render();
	}
</div>

The Code Explained

This is what the code is all about

  1. A wrapper div - important so that the quick-insert knows into what container it should add new content-blocks. The special line @Content.DesignedContent.EditContext() will add some JSON when an editor is logged on to enable the in-page editing experience
  2. A loop, going through every every inner item
  3. ...and a Render() which then renders this item

Sherlock Helpers to write Code

To assist you in writing this code, we also provide Sherlock-Helpers in the code editor to generate this code for you. So basically if you have any entity-field which has the input-type content-block then the code editor will provide you with such helpers. 

tl;dr

We believe that this new functionality will greatly enhance your ability to create awesome solutions, which really make life for the editor easier, and create even better output. 

Love from Switzerland,
Daniel


Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 800 DNN projects since 1999. He is also chief architect of 2sxc (see forge), an open source module for creating attractive content and DNN Apps.

Read more posts by Daniel Mettler
2serve . 2invent . 2create is 2be.