Hi Gayathri

You have to parse JSON and render html of your carousel.

Thanks,

Alex

hi Alex how can i do that in template ?

am using the script like this

<div class="internal-wrapper">
    @Html.Partial("MainMenu")
    <div class="page-header" style="background-image:url('@Model.Content.GetCropUrl("pageHeader", "PageBanner")');">
        <h1>@Umbraco.Field("pageName")</h1>
    </div>
    @Html.Partial("breadcrumbs")
    @RenderBody()
</div>
<div class="internal-wrapper">
  @Umbraco.Field("car")
</div>

from this @Umbraco.Field("car") its returning like that

You have to parse json, and render it as html

Read more how to do it: http://www.newtonsoft.com/json/help/html/QueryJsonDynamic.htm

Example:

@using Newtonsoft.Json.Linq

@{
    var jObject = JObject.Parse(Umbraco.AssignedContentItem.GetPropertyValue<string>("car"));

    @jObject.GetValue("editor")
}

hi @alex

i know Parsing but i dont know the Syntax and how to use in Umbraco i am new to this CMS :(

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@using Newtonsoft.Json.Linq
@{
    Layout = "Master1.cshtml";
}

@{
    var jObject = JObject.Parse(Umbraco.AssignedContentItem.GetPropertyValue<string>("car"));

    @jObject.GetValue("editor")
}

<div class="internal-wrapper">
  @Umbraco.Field("car")
</div>

i am new to umbraco is it correct the way i did ? .

but still its showing same like this

it will be really helpful for me sorry :)

I used the arctype for carousel and follow these steps:-

1. Create a new data type lets say "Image Carousel" of type Arctype editor.
2. and take the following fields in Arctype editor

Carousel Image (carouselImage) - Media Picker

Text Over Image (textOverImage) - Richtext editor

Carousel Image Alt Text (carouselImageAltText) - Textstring

1. It will look like something in CMS

1. Now at the coding part

   @foreach (var item in carouselModel) { var carouselImage = item.GetValue("carouselImage"); var carouselImageAlttext = item.GetValue("carouselImageAlttext") != null ? item.GetValue("carouselImageAlttext").ToString() : string.Empty;

2. @if (carouselImage != null) { }

                           <figcaption class="orbit-caption c-carousel__caption">
                               <div class="container">
                                   @Html.Raw(item.GetValue("textOverImage"))
                               </div>
                           </figcaption>
                       </li>
                   }
   

 <ul class="orbit-container c-carousel__container">
                        @foreach (var item in carouselModel)
                        {
                            var carouselImage = item.GetValue("carouselImage");
                            var carouselImageAlttext = item.GetValue("carouselImageAlttext") != null ? item.GetValue("carouselImageAlttext").ToString() : string.Empty;
                            <li class="@isActive orbit-slide c-carousel__slide">
                                @if (carouselImage != null)
                                {
                                    <img class="orbit-image c-carousel__image" src="@Umbraco.Media(carouselImage).Url.ToString()" alt="@carouselImageAlttext">
                                }

                                <figcaption class="orbit-caption c-carousel__caption">
                                    <div class="container">
                                        @Html.Raw(item.GetValue("textOverImage"))
                                    </div>
                                </figcaption>
                            </li>
                        }
                    </ul>

Hi Manish,

Nice tutorial how to use Archetype, I would recommend using Archetype also.

Thanks,

Alex

is working on a reply...