Html Widget Surrounding Tags

Topics: General
May 24, 2011 at 7:13 PM

Is there a way with the HTML widget to suppress the generation of the surrounding tags?  ie, I get generated:

<div class="zone zone-before-content-slider-images"><article class="widget-html-widget widget"><p>
... my content ...
</p></article></div>

When I add "... my content..." I get the extra <div>, <p>, and <article> tags rendered.  I don't want them, yet I still want to use tinyMCE to load content like images :)

Thanks,   Brent

 

Coordinator
May 24, 2011 at 7:15 PM

Override Widget.Wrapper.cshtml in your theme.

May 24, 2011 at 7:23 PM

Thanks, of course!

Sometimes one can't see the trees for the forest (or orchard??? ) :)

May 25, 2011 at 10:17 PM

Your suggestion is great if I wanted the wrapper to change for all widgets.  Unfortunately, I only want a different wrapper for a specific Zone.

So, I can override Widget.Wrapper.cshtml and put some conditional code based on a Zone name, but I'm having a challenge determining what Zone I'm in from the Model available in Widget.Wrapper.cshtml.  Any idea where I can determine the Zone name?

Coordinator
May 25, 2011 at 10:27 PM

Well, in that case you could consider taking over the rendering of the whole zone (by creating a Zone-WhateverIsTheNameOfYourZone.cshtml override in your theme) using a technique similar to what I've been doing here: http://weblogs.asp.net/bleroy/archive/2011/05/23/orchard-list-customization-first-item-template.aspx. Not as easy as I'd like but that will work for sure.

Coordinator
May 25, 2011 at 10:30 PM

If you don't how to do that I may find some time later today to prototype it.

May 25, 2011 at 11:40 PM

The <article> tag is actually coming from Widget.cshtml; not the wrapper. That file has an alternate template name that uses the zone; so by adding a Widget-AsideSecond.cshtml you'll target any widgets in the AsideSecond zone and you can remove the article tags.

The <p> tag however is coming from TinyMCE which automatically inserts text into p tags because it's semantically correct; you should leave them in there if you want your pages to be valid.

Coordinator
May 25, 2011 at 11:49 PM

Ah, good catch.

May 26, 2011 at 12:05 AM

Hmmm... well the content of Widget.chstml is only

@Display(Model.Content)

 

while Widget.Wrapper.cshtml includes: 

@tag.StartElement

@tag.EndElement

Which generates the article tag...  I could surround these @tag with @if if I could determine from the model what zone I'm in. (trying to get this done simply :0  didn't really wan to go down the path bertrandleroy implied.

In the end, I'm probably doing the wrong thing anyway... I'm using the HtmlWidget in a custom theme to allow the user to load images, and surround those images with href for an image slider we like... and it requires bare <a><img></a> with no extra markup.  The rest of the markup divs for the slider are in the theme itself so we don't have to have the user see the javascript and raw html as well as allow the user to upload their own images as opposed to the method Contoso uses to get the slider working.

Thanks for both or your responses... I'm really amazed by the speed of the responses on the forum!

Coordinator
May 26, 2011 at 12:46 AM

OK, so here's something that you can do. I tested it it works great.

First, create a zone override for the specific zone: zone-asidesecond.cshtml for example:

<aside class="zone zone-asidesecond" id="zone-asidesecond">
    @foreach (var item in @Model) {
        item.Zone = "asidesecond";
        @Display(item)
    }
</aside>

Now you have an additional Zone property on each widget rendered in this zone.

Second, override Widget.Wrapper.cshtml. For example, you can do this:

@using Orchard.ContentManagement;
@using Orchard.Widgets.Models;
@{
    var title = ((IContent)Model.ContentItem).As<WidgetPart>().Title;
    var tag = Tag(Model, "article");
}
@tag.StartElement
    @if (HasText(title) || Model.Header != null) {
    <header>
        @if (HasText(title)) {
        <h1>@title</h1>
        }
        @Display(Model.Header)
    </header>
    }
    @if (Model.Zone != null) {
        <text>This is zone @Model.Zone.</text>
    }
    @Display(Model.Child)
    @if(Model.Footer != null) {
    <footer>
        @Display(Model.Footer)
    </footer>
    }
@tag.EndElement

Success!

May 26, 2011 at 6:28 AM

That worked perfectly, Thanks a pile!!!