Image Carousel using Twitter Bootstrap and Orchard CMS Projections

Topics: Writing modules, Writing themes
Mar 7, 2014 at 8:48 AM
Dear Team,

I am trying to add the Carousel slider on my project, and i am following the article, i had done everything as the article, but i can not able to view image,

i get everything on view page but there is not image on html page as well,

    public void Carousel(dynamic Display, TextWriter Output, HtmlHelper Html, string Id, IEnumerable<dynamic> Items,
                        IEnumerable<string> OuterClasses, IDictionary<string, string> OuterAttributes,
                        IEnumerable<string> InnerClasses, IDictionary<string, string> InnerAttributes,
                        IEnumerable<string> FirstItemClasses, IDictionary<string, string> FirstItemAttributes, IEnumerable<string> ItemClasses, IDictionary<string, string> ItemAttributes)
        if (Items == null) return;

        var items = Items.ToList();
        var itemsCount = items.Count;

        if (itemsCount < 1) return;

        var outerDivTag = GetTagBuilder("div", Id, OuterClasses, OuterAttributes);
        var innerDivTag = GetTagBuilder("div", string.Empty, InnerClasses, InnerAttributes);
        var firstItemTag = GetTagBuilder("div", string.Empty, FirstItemClasses, FirstItemAttributes);
        var itemTag = GetTagBuilder("div", string.Empty, ItemClasses, ItemAttributes);


        int i = 0;

        foreach (var item in items)
            if (i == 0)



        Output.Write("<a href=\"#{0}\" class=\"carousel-control left\" data-slide=\"prev\">&lsaquo;</a>", Id);
        Output.Write("<a href=\"#{0}\" class=\"carousel-control right\" data-slide=\"next\">&rsaquo;</a>", Id);


        Output.Write("<script>$(function () {$('" + Id + "').carousel();}); </script>");

is there any thing that i missed? please advice me.
Mar 7, 2014 at 8:56 AM
My Html is:

<div id="myCarousel" class="carousel slide" shape-id="40"><div class="inner-carousel" shape-id="40"><div class="active item" shape-id="40">
</div><div class="item" shape-id="40">
</div><div class="item" shape-id="40">
</div><div class="item" shape-id="40">
</div></div><a data-slide="prev" class="carousel-control left" href="#myCarousel" shape-id="40">‹</a><a data-slide="next" class="carousel-control right" href="#myCarousel" shape-id="40">›</a></div>
Jun 5, 2014 at 2:58 PM
Did you find a solution? I am looking for an image carousel for my Orchard 1.8 site and wondered if you had success with this method.

Jul 29, 2014 at 2:30 PM
Has anyone figured this out in 1.8?

I think the problem is you can't select the image url in queries but just the id...

Any help is appreciated...

Aug 21, 2014 at 10:42 AM
I was able to solve the issue.
On the query layout, select properties as the display mode and add a property. The property should be a Image:Ids, on the rewrite results property select rewrite ouput and past: <img src="{Content.Fields.CarouselImage.Image.Url}"/>