Wrapping html around fields in content part.

Topics: Customizing Orchard
May 5, 2011 at 11:53 PM

Hello,

I created a content part that consists of 3 html fields. I would like to be able to wrap the fields with html content.

For example -

I create a content part named 'Spotlight Wrapper' which would serve as a <ul>

the fields I create are named 'spotlights' which serve as <li>'s

 

The resulting mark-up would be

<ul>

<li>

content from field 1

</li>

<li>

content from field 2

</li>

<li>

content from field 3

</li>

</ul>

Is there a simple way to do this?

Many thanks,

Coordinator
May 6, 2011 at 12:01 AM

You could start by reading this: http://orchardproject.net/docs/Understanding-placement-info.ashx, especially the part about creating wrappers. There are a few examples of wrappers in the source code.

May 6, 2011 at 1:24 AM

Thanks bertrandleroy,

Using the advice on that post I was easily able to wrap the fields in my Spotlight Wrapper with <li>'s. However I am having a hard time wrapping the Spotlight Wrapper  with <ul>'s. (Possibly screwing up the naming convention).

My Content Part is named "Spotlight Wrapper" and I have the following structure in my Views folder.

Views\Parts\Spotlight Wrapper.cshtml

I also attempted to use the Placement.info technique to no avail - I added this line to my Placement.info file

<Place Parts_SpotlightWrapper="Content:before;Alternate=Parts_SpotlightWrapper" />

I added this corresponding view.

Views\Parts\Spotlight Wrapper.cshtml

Please bare with me, I'm a front-end guy trying to convince my firm to switch to Orchard from a proprietary CMS.

Coordinator
May 6, 2011 at 1:26 AM

Well, if you want to wrap your template in a UL, you'd have to use Wrapper instead of Alternate in the placement attribute's value.

May 6, 2011 at 2:01 AM

Also ... you shouldn't have any spaces in the filename.

May 6, 2011 at 2:04 AM

Still experiencing some problems, just clarify so we are on the same page:

Using the Orchard admin I created a new Content Part called 'Spotlight Wrapper' with 3 HTML fields. I then created a Content Type Called 'Template 1' and assigned 'Spotlight Wrapper' to it. I then created a new 'Template 1' Content type called 'Home Page'. I then created a file called Fileds_Contrib.Html-Spotlight Wrapper.cshtml to wrap each HTML field in the 'Spotlight Wrapper' with an <li /> and this is working. I have now added:

<Place Parts_SpotlightWrapper="Content:before;Wrapper=Parts_SpotlightWrapper" />

And created :

Views\Parts.SpotlightWrapper.cshtml

in an attempt to wrap the entire 'Spotlight Wrapper' Content Part in a <ul /> but cannot seem to get it to work? I know I am missing something simple here and greatly appreciate your time on this.

Coordinator
May 6, 2011 at 4:40 AM

Are you using shape tracing to debug your way forward?

May 6, 2011 at 5:02 AM

Yes, could not live without the shape tracing! I decided to just override the Content-HomePage.cshtml and with the shape tracing tool I was able to call the ConetntItems off the Model to construct the markup I needed. Because I am doing it this way, I am no longer calling Display(Model.Content), will I now be missing anything important I should know about? I assumed this was similar to EditorForModel() in MVC but just want to double check.

 

Thanks again.

Coordinator
May 6, 2011 at 5:15 AM

If you or someone else later adds new parts or fields, they won't get rendered unless you manually add them to your template. If you had done it with wrappers and stuff, it would have been resilient to that. May be no big deal depending on who is going to maintain it.

May 6, 2011 at 6:00 AM

Good point, this solution seems brittle. Do you have any idea why I was not able to get a wrapper to work with a custom part? Using the conventions from the documentation I am able to alter the display for any field, content or widget using views but cannot get a wrapper/view to change a 'part' created in the orchard CMS admin. If I were to create a custom part called FooPart with 3 text fields. then add the FooPart to the existing Page Content Type, what would I do exactly to create a wrapper/view to wrap the content of the FooType fields in a <ul/>?

Coordinator
May 6, 2011 at 6:04 AM

I don't know. I suppose one would have to fiddle with this a little more to find out.

Maybe Sébastien would have an idea?

May 6, 2011 at 9:52 AM
Edited May 6, 2011 at 9:52 AM

Ok looking at the code you posted:

<Place Parts_SpotlightWrapper="Content:before;Wrapper=Parts_SpotlightWrapper" />

What you're trying to do here is add a wrapper called "Parts_SpotlightWrapper" to the part called "Parts_SpotlightWrapper" ... do you see the problem here? You're adding a wrapper to itself.

I think all you need to do is in your Parts_SpotlightWrapper:

<ul>

@Display(Model.Content)

</ul>

And forget about actually using Orchard's wrapping functionality which is really for more complex scenarios. Or am I missing something?

May 6, 2011 at 3:49 PM

@randompete

 

I tried that solution first. It would not alter the rendering of the part. I originally added these 2 files attempting to get this to work:

 

Parts_SpotlightWrapper.cshtml

Parts_SpotlightWrapperPart.cshtml

 

Neither of them would alter the rendering of the part. I feel like I must be missing something simple?

May 6, 2011 at 3:55 PM

Ah - it should be Parts.SpotlightWrapper.cshtml. The underscore becomes a period for determining shape files.

The easy way to see this is use Shape Tracing. It tells you the file names of alternates (and will even create them server-side for you)

If this doesn't work can you show me your driver code?

BTW; the Alternate syntax in Placement works like this:

<Place Parts_SpotlightWrapper="Content:before;Alternate=Parts_SpotlightWrapper_Foo" />

And then you can add a Parts.SpotlightWrapper.Foo.cshtml to override the original.

May 6, 2011 at 5:13 PM
Edited May 6, 2011 at 5:14 PM

I think there is one key detail is being missed in my description of the problem. This is not a custom type I created a package for and then imported into Orchard. I simply used the admin tool in Orchard to create a new part and add simple text fields to it. So there is no driver or default views. Shape Tracing does not seem to be able to pick up on the part how it normally wold with a part/type that was installed from a package.

I will be in the office in about 20 min, will try what you suggested above to see if it resolves the problem.

May 6, 2011 at 5:33 PM

Right - I guess that's the problem there. You should probably just create a proper code part so you can fully customise the rendering with the driver. UI-built parts are pretty limited.

May 6, 2011 at 5:40 PM

Thanks for the info. Just seemed overkill to create a custom code part that only consisted on 3 HTML fields when it was so easy to create with the admin tool. Thank you and Bertrand for taking time on this.

May 6, 2011 at 5:50 PM

Yeah but that overkill is necessary to give you all the hooks you need to completely customise a rendering experience.

The best way to approach this feature would probably be either just using a HTML widget and writing a list each time, or perhaps making a part that allowed you to list as many items as you want.

I'm not sure of your entire requirements but there's this module I'm working on that gives you some much easier ways to make "related content" sort of lists and display them in zones (all without any code). You can then customise the templates in a vast array of ways. I've got it all pretty much working now, just fixing a couple of bugs and I should be able to put something on the gallery (finally). You could also do a "spotlight content" type of list and display it across the whole site; but that kind of workflow at the moment is slightly more effort. Still much easier than building any parts :)

Coordinator
May 6, 2011 at 6:13 PM

Wouldn't it be nice if you could start with building your type in the admin, and then run a command to build the equivalent code?

May 6, 2011 at 7:05 PM

@Bertrand

I am guessing I can export the type into a package or some equivalent, will look into it. Docs location?

 

@Pete

Sounds promising!

Coordinator
May 6, 2011 at 7:08 PM

Not that I know of. I was merely pointing out that this would make a great module...

May 6, 2011 at 7:17 PM

oh! I will ask one of the devs on our team to look into it. One of them is just finishing up extending the Menu control to do what we need for the site we are building. Thanks for the idea.