Carousel Projection - remove widget wrapper & display Content Item property

Topics: Writing themes
Jul 27, 2012 at 2:54 PM

From this great article

http://www.stevetaylor.me.uk/image-carousel-using-twitter-bootstrap-and-orchard-cms-projections

All working fine - just trying to:

 

  • Remove the widget wrapper code (displayed in Red) displayed by the Carousel projection/query widget 

<article class="widget-featured widget-projection-widget widget">
<div class="carousel slide carousel-fade" id="myCarousel">
<div class="carousel-inner">
<div class="item active">

<article class="content-item carousel-image">
<header></header>  
<img src="Media/Default/carousel-images/banner-img-1.jpg" alt="Image"/>  
</article>
 <div class="carousel-caption">
<h4>CAPTION HERE</h4>
</div>
</div></div></div>

</article> 

  • Secondly - replace CAPTION HERE with the property value (Caption - type textField) from the Content Type carousel image.

    The file /Providers/Layouts/LayoutShapes.cs needs a direct call to each caption field to do this.

     // display the current item                
    Output.Write(Display(item));

     // add caption               
    Output.Write("<div class=\"carousel-caption\"><h4>CAPTION HERE</h4></div>");


    Any ideas - Output.Write(Display(item.Caption)) doesnt work?
Coordinator
Jul 27, 2012 at 3:08 PM

#1 Not sure why you need to do that, but you can override the widget wrapper template.

#2 @item.Caption.Value should do the trick.

Jul 27, 2012 at 3:46 PM
Edited Jul 27, 2012 at 7:29 PM

#1 FIXED

 the extra <article> tags have padding used elsewhere that affects the carousel banners layout in CSS - creating white gaps etc

Widget-Featured.cshtml

@{    // clear widget wrappers   
Model.Metadata.Wrappers.Clear();}
@Display(Model.Content)

 

That clears the top level <article> from the widget and view below removes the other <article> markup.

Views/Items/Content-CarouselImage.cshtml

@*// remove default wrapper code <article></article>*@@Display(Model.Content) 



#2  FIXED WITH

// add caption               
var itemCaption = item.ContentItem.CarouselImage.Caption.Value;               
//Output.Write("<div class=\"carousel-caption\"><h4>" + Display(item.Caption.Value) + "</h4></div>");                Output.Write("<div class=\"carousel-caption\"><h4>" + itemCaption + "</h4></div>"); 

Coordinator
Jul 28, 2012 at 12:24 PM

#1 CSS may be a simpler way to make it look exactly how you want it without sacrificing useful markup.

#2 Do not use Output.Write. It's ugly, unnecessary and opens your code to subtle injection issues. Instead, do <div class="carousel-caption"><h4>@itemCaption</h4></div>