Try our conversational search powered by Generative AI!

Alloy MVC N00b question



Could someone please explain how the teaserblocks on the startpage gets their span4 css class on them? Where in the chain is this css class added?


Feb 17, 2014 10:40

Are you using EPiServer 7 or 7.5?

Feb 17, 2014 11:02

Ah sorry, 7.5.

Feb 17, 2014 11:09

In Alloy Templates MVC for EPiServer 7.5 you can find the DependencyResolverInitialization. Here you can see that the ContentAreaRenderer is replaced with AlloyContentAreaRenderer.

The AlloyContentAreaRenderer overrides the method GetContentAreaItemCssClass and adds the Tag given when rendering the block.

On the start page, the tag comes from "Display Options" which is a new feature in 7.5 where you can let the Editor set the Tag in the same way as you use the Tag when rendering Content with Partial Views.

If you open Global.asax.cs you can see that three Display Options are added: Full, Wide and Narrow that are represented by the three Tags "span12", "span8" and "span4".

The Teaser Blocks on the start page are added to the Content Area with the Narrow Display Option, hence they are rendered with the span4 tag (the tag name is also used as css class in this implementation).

Edited, Feb 17, 2014 11:25

Thank you Alf for a great explanation! I will look in to the code and try to understand it! :)

Feb 17, 2014 11:29

Do so, you can read more on Display Options in the Documentation Section.

Feb 17, 2014 11:31

One more question, where would i add the code shown in the link?

What i want is to be able to add three blocks in a row like on the alloy start page.

Feb 17, 2014 13:04

In Alloy it is added in Global.asax.cs in Application_Start, but I would recommend that you try to add it in an initialization module

Feb 17, 2014 13:06

If you will eventually upgrade to Bootstrap v3 - this may come handy :)

Feb 17, 2014 13:20

I must say i find it quit hard knowing which of all classes i need to implement my self, and what in those classes, in order to be able to put block next to each other. DependencyResolverInitialization, AlloyContentAreaRenderer, ContentAreaRenderer and so on...

Feb 17, 2014 14:39

ContentAreaRenderer comes from the EPiServer API.

AlloyContentAreaRenderer inherits ContentAreaRenderer but contains some special features.

DependencyResolverInitialization is responsible to replace the ordinary ContentAreaRenderer with the Alloy Template AlloyContentAreaRenderer.

You need to create your own ContentArea Renderer that inherits from ContentAreaRender. And similar to the AlloyContentAreaRenderer, you override the GetContentAreaItemCssClass method and make sure that it returns a css class of your choice.

You also need to create an InitializableModule that also implements the IConfigurableModule Interface (similar to DependencyResolverInitialization) that performs container.For<ContentAreaRenderer>().Use<NAME-OF-YOUR-OWN-CONTENTAREARENDERER>();

Feb 17, 2014 14:51

Nobody said life would be easy :)

Feb 17, 2014 15:18

In AlloyContentAreaRenderer, in the GetCssClassForTag method, why is there no span4?

I thought there would be a case "span4" return Narrow?

switch (tagName.ToLower())
                case "span12":
                    return "full";
                case "span8":
                    return "wide";
                case "span6":
                    return "half";
                    return string.Empty;

Feb 17, 2014 15:56

In Alloy Template, the Tag itself is span#, where # represents a number.

If you look in GetContentAreaItemCssClass you will see the following string.format

string.Format("block {0} {1} {2}", GetTypeSpecificCssClasses(contentAreaItem, ContentRepository), GetCssClassForTag(tag), tag)

Say that your Tag has the value span12, the output of the string format might be something like this:
"block NothingInteresting full span12"

Say that your Tag has the value span4, the output of the string format might be something like this:
"block NothingInteresting  span4"

The word block is part of the string,
{0} is replaced with the value from GetTypeSpecificCssClasses and is not really interesting in this case,
{1} is replaced with GetCssClassForTag will return a word if Tag is span12, span8 or span6 - otherwise it will return an empty string.
The last part, {2}, is your Tag. And again, the Tags in Alloy are span#

Feb 17, 2014 16:06

It's working now. I will do some debugging so that i really understand the code. Thank you for your patiens Alf, it really mean a lot to me!

Feb 17, 2014 16:33
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.