This project is read-only.

Carousel Projection - remove widget wrapper & display Content Item property

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

From this great article

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">
<img src="Media/Default/carousel-images/banner-img-1.jpg" alt="Image"/>  
 <div class="carousel-caption">


  • 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                

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

    Any ideas - Output.Write(Display(item.Caption)) doesnt work?
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


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


@{    // clear widget wrappers   


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


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


// 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>"); 

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>