Sitecore Branch Templates / slides show

Branch Template – instead of invoking only one item at a time, branch template provides you with an option to create multiple items.

Create two data templates, one is for slides show and other for its slide show step.

Add the following fields as need to slide show step

  • Image – Image
  • Title – Rich Text
  • Body – Rich Text

Let say I want it to be under the article

Structure is going to be Article

  •  Slide show
    • Slide show step.

Click on the standard values of Article for insert options.

Go to configure tab on the ribbon,

  • Assign
  • Search for the template slide show and select it.

Click on the standard values of slide show data template for insert options.

Go to configure tab on the ribbon,

  • Assign
  • Search for the template slide show step and select it.

Then go to the standard values of Article and

Click on the standard values of the template that you are wishing to put the slide show under.

And click on the  assign and then search for the slide show data template and then select it.

Go to the Branch Template and then insert the New Branch Template – Name it slide show temp

Now insert the template Slide Show under the Branch Template – slide show temp.

Now insert the slide show step under slide show/ slide show temp.

Insert number of images how many ever you want.

Go to the item of article and then click on insert you will be able to see Slide show. Insert Slide show

And then attach the images for each slide show step.

Go back to your solution and then create a controller and view and a model

Slide Show View:

<div class="article_cont">  
    <div class="flexslidersteps">
           <ul class="slides">
                           @foreach (var stepItem in Model.SlideShowStepItems)
            {
                               <li data-thumb="@Html.Sitecore().GetImageUrl(stepItem.Image,"")">
                                   <img class="img-center" src="@Html.Sitecore().GetImageUrl(stepItem.Image,"")">
                                   <p class="flex-caption">@stepItem.Text</p>
                                   <p class="section-text">@stepItem.Body</p>
               </li>

            }
        </ul>

    </div>
</div>

Flex slider js for sliding images different text and image for each slide.

<script>
$(‘.flexslidersteps’).flexslider({
startAt: 0,
nextText: ” “,
prevText: ” “,
animation: “slide”,
controlNav: “thumbnails”,
start: function (slider) {
$(‘body’).removeClass(‘loading’);
},
after: function (slider) {
window.location.hash = slider.currentSlide + 1;
},
});
</script>

Create a Model – SlideshowModel

  public class SlideShowModel

    {

        public class SlideShowStep

        {

            public Item SlideShowItem { get; set; }

            public string Image { get; set; }

            public string Text { get; set; }

            public string Body { get; set; }

        }



        public Item Item { get; set; }

        public IEnumerable<SlideShowStep> SlideShowStepItems { get; set; }

    }

}

Create a controller method

public ActionResult GetSlideShowSteps()
        {
            var articleItem = Sitecore.Context.Item;
            if (!articleItem.Template.IsDerivedFrom(Constants.TemplateIDs.Article))
                throw new Exception("Article Steps rendering used on non-article page.");

            // Get the slide show steps child item.
            var slideshowStepsItem =
                articleItem.Axes.SelectSingleItem("*[@@templateid='{0}']".FormatWith(Constants.TemplateIDs.SlideShow));

            // If there is no slide show steps child item, we don't display anything.
            if (slideshowStepsItem == null)
                return new EmptyResult();

            // Get the slide show steps beneath.
            var slideshowItem =
                slideshowStepsItem.Axes.SelectItems("*[@@templateid='{0}']".FormatWith(Constants.TemplateIDs.SlideShowSteps));

            var steps = new List<Models.SlideShowModel.SlideShowStep>();
            foreach (var item in slideshowItem)
            {
                // Create a new slide show step.
                var step = new Models.SlideShowModel.SlideShowStep();
                step.SlideShowItem = item;

                // Get the related product.
                ImageField imageField = item.Fields[Constants.FieldIDs.SlideShowSteps.Image];
                MultilistField textField = item.Fields[Constants.FieldIDs.SlideShowSteps.Text];
                MultilistField bodyField = item.Fields[Constants.FieldIDs.SlideShowSteps.Body];
                step.Image = imageField.MediaID.ToString();
                step.Text = textField.ToString();
                step.Body = bodyField.ToString();
                steps.Add(step);
            }

            // Build the view model.
            var model = new Models.SlideShowModel()
            {
                Item = slideshowStepsItem,
                SlideShowStepItems = steps
            };


            return PartialView("~/Articles/SlideShowSteps.cshtml", model);
        }

Create a constants.cs to get the item id’s

public static class TemplateIDs
        {
            public static readonly ID Article = ID.Parse("{XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX}");
            public static readonly ID SlideShowSteps = ID.Parse("{XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX}");
            public static readonly ID SlideShow = ID.Parse("{XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX}");
 }

public static class FieldIDs
        {
public static class SlideShowSteps
            {
                public static readonly ID Image = ID.Parse("{XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX}");
                public static readonly ID Text = ID.Parse("{XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX}");
                public static readonly ID Body = ID.Parse("{XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX}");
            }
}

Create a controller rendering in sitecore

  • Layouts/Renderings.
  • Give the controller name and action method name.
  • Go back to your item and click on the presentation/Details
  • Go to Final layout
  • Click on edit
  • Click on add
  • Select the controller rendering and add a place holder.
  • Publish.

This should create a slide show images on any article page if the slide show is added under article item.

 

Sitecore Branch Templates / slides show

Leave a Reply

Your email address will not be published. Required fields are marked *