Skip to content

Instantly share code, notes, and snippets.

@fredrikhaglund

fredrikhaglund/ Lab: Slide Show

Last active April 11, 2016 12:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fredrikhaglund/43ec25ddd1b39a77bf208dfa94ae0a67 to your computer and use it in GitHub Desktop.
Save fredrikhaglund/43ec25ddd1b39a77bf208dfa94ae0a67 to your computer and use it in GitHub Desktop.
Download ZIP
Lab: Slide Show block for Episerver CMS (using Bootstrap v2.0 like Alloy demo templates)
Raw
Lab: Slide Show
Intended for EPiServer Alloy MVC demo templates or lab instructions for Episerver Fundamentals Developer training.
Raw
_Root.cshtml
@using System.Web.Optimization
@using EPiServer.Framework.Web.Mvc.Html
@model IPageViewModel<SitePageData>
<!DOCTYPE html>
<html lang="@Model.CurrentPage.LanguageBranch">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@Model.CurrentPage.MetaTitle</title>
@Html.CanonicalLink()
@Html.AlternateLinks()
@Styles.Render("~/bundles/css")
@Scripts.Render("~/bundles/js")
@Html.RequiredClientResources("Header") @*Enable components to require resources. For an example, see the view for VideoBlock.*@
</head>
<body>
@Html.RenderEPiServerQuickNavigator()
@Html.FullRefreshPropertiesMetaData()
<div class="container">
@if(!Model.Layout.HideHeader)
{
Html.RenderPartial("Header", Model);
}
@RenderBody()
@if(!Model.Layout.HideHeader)
{
Html.RenderPartial("Footer", Model);
}
</div>
@Html.RequiredClientResources("Footer")
// Add script to start all slide shows.
// Required in Bootstrap v2.0 but with later versions you can use data-ride="carousel" on the tag instead
<script>
$(document).ready(function() {
$('.carousel').carousel({
interval: 6000
});
});
</script>
</body>
</html>
Raw
Index.cshtml
@using EPiServer.Editor
@model SlideShowViewModel
@{
// Create a unique ID for the div so you can have more than one Carousel on the page
var id = "carousel-"+ Guid.NewGuid().ToString("N");
var first = true;
}
@if (Model.Images != null)
{
<div id="@id" class="carousel slide" @Html.EditAttributes(m => m.CurrentBlock.ImageFolder)>
<div class="carousel-inner">
@foreach (var image in Model.Images)
{
<div class="item @(first ? "active" : "")">
<img src="@Url.ContentUrl(image.ContentLink)" alt="@image.Name">
@if (!Model.CurrentBlock.HideCaption)
{
<div class="carousel-caption">
<h4>@image.Name</h4>
<p>@image.Description</p>
</div>
}
</div>
first = false;
}
</div>
<a class="left carousel-control" href="#@id" data-slide="prev">‹</a>
<a class="right carousel-control" href="#@id" data-slide="next">›</a>
</div>
}
else if (PageEditing.PageIsInEditMode)
{
<div @Html.EditAttributes(m => m.CurrentBlock.ImageFolder)>
<em>Select folder with images to use in slide show.</em>
</div>
}
@* MOCKUP HTML:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item">
<img src="http://getbootstrap.com/2.3.2/assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
<div class="carousel-caption">
<h4>First Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item active">
<img src="http://getbootstrap.com/2.3.2/assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
<div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item">
<img src="http://getbootstrap.com/2.3.2/assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">
<div class="carousel-caption">
<h4>Third Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>*@
Raw
SlideShowBlock.cs
using System;
using System.ComponentModel.DataAnnotations;
using EPiServer.Core;
using EPiServer.DataAbstraction;
using EPiServer.DataAnnotations;
namespace AlloyTraining.Models.Blocks
{
[ContentType(DisplayName = "SlideShowBlock", GUID = "7784c1f1-5e16-4b3a-8b83-8c9b0f8efe5f", Description = "")]
public class SlideShowBlock : BlockData
{
[Display(Name="Image Folder",
Description = "Select folder with images to use in slide show.")]
[AllowedTypes(typeof(ContentFolder))]
public virtual ContentReference ImageFolder { get; set; }
public virtual bool HideCaption { get; set; }
}
}
Raw
SlideShowBlockController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using EPiServer;
using EPiServer.Core;
using EPiServer.ServiceLocation;
using EPiServer.Web;
using EPiServer.Web.Mvc;
using AlloyTraining.Models.Blocks;
using AlloyTraining.Models.Media;
using AlloyTraining.Models.ViewModels;
namespace AlloyTraining.Controllers
{
public class SlideShowBlockController : BlockController<SlideShowBlock>
{
public override ActionResult Index(SlideShowBlock currentBlock)
{
var model = new SlideShowViewModel();
model.CurrentBlock = currentBlock;
if (!ContentReference.IsNullOrEmpty(currentBlock.ImageFolder))
{
var contentLoader = ServiceLocator.Current.GetInstance<IContentLoader>();
var images = contentLoader.GetChildren<ImageFile>(currentBlock.ImageFolder).ToList();
model.Images = images;
}
//var editingHints = ViewData.GetEditHints<SlideShowViewModel, SlideShowBlock>();
//editingHints.AddFullRefreshFor(m => m.ImageFolder);
return PartialView(model);
}
}
}
Raw
SlideShowViewModel.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using EPiServer.Core;
using AlloyTraining.Models.Blocks;
using AlloyTraining.Models.Media;
namespace AlloyTraining.Models.ViewModels
{
public class SlideShowViewModel
{
public SlideShowBlock CurrentBlock { get; set; }
public List<ImageFile> Images { get; set; }
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment