Image Carousel using Twitter Bootstrap and Orchard CMS Projections

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

I am trying to add the Carousel slider on my project, and i am following the http://www.stevetaylor.me.uk/image-carousel-using-twitter-bootstrap-and-orchard-cms-projections 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,

LayoutShape.cs
[Shape]
    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);

        Output.Write(outerDivTag.ToString(TagRenderMode.StartTag));
        Output.Write(innerDivTag.ToString(TagRenderMode.StartTag));

        int i = 0;

        foreach (var item in items)
        {
            if (i == 0)
                Output.Write(firstItemTag.ToString(TagRenderMode.StartTag));
            else
                Output.Write(itemTag.ToString(TagRenderMode.StartTag));

            Output.Write(Display(item));
            Output.Write(itemTag.ToString(TagRenderMode.EndTag));
            i++;
        }

        Output.Write(innerDivTag.ToString(TagRenderMode.EndTag));

        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(outerDivTag.ToString(TagRenderMode.EndTag));

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

    }
is there any thing that i missed? please advice me.
Mar 7, 2014 at 9: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 3:58 PM
surazmalla,
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.

Thanks,
Brian
Jul 29, 2014 at 3: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...

Borrie
Aug 21, 2014 at 11: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}"/>