Your best bet is making use of Nested Content which allows the use of repeatable elements. As of Umbraco 7.7, Nested Content is shipped with Umbraco, if you're using an old version, you'll need to install it.
I'm not sure about your ability level, so shout up if you need more help but here's an overview of the steps I'd take to set up a slider:
Login to Umbraco
Go to Settings
Create a new folder in the Document Types section called Nested Content (this is optional but it's a nice way to keep things organised).
Create a new document type in that folder called Slide. This acts like a normal document type, just add the fields that you need. In my example, I'm adding an Image field, and a Text field. The first allows you to choose an image, the second is a rich text editor.
When you've added your fields, head over to the Developer section. Now add a new Data Type called Slides. Use Nested Content as the Property editor type.
In the Doc Types section, choose your newly created Slide as the document type. You'll need to choose the tab you created as well.
As I said, that's a bit of an overview of the steps, you'd need to create your desired markup in the template but this would be totally dependent on which slider you use. If you need more help either shout up, or I'll try to cobble together a more in depth tutorial for you.
I was able to create nested content using your tutorial and add the content to them, and I look through both links you provided, I just cannot wrapped my head around adding the carousel to a partial view.
Do you have a full tutorial somewhere or an example of adding nested content to the page ?
I created a macro from partial view macros files by selected a snippet called gallery and edited it little bit m here is how it look:
@inherits Umbraco.Web.Macros.PartialViewMacroPage
@* Macro to display a gallery of images from media the media section.
Works with either a 'Single Media Picker' or a 'Multiple Media Picker' macro parameter (see below).
How it works:
- Confirm the macro parameter has been passed in with a value
- Loop through all the media Id's passed in (might be a single item, might be many)
- Display any individual images, as well as any folders of images
Macro Parameters To Create, for this macro to work:
Alias:mediaIds Name:Select folders and/or images Type: Multiple Media Picker
Type: (note: you can use a Single Media Picker if that's more appropriate to your needs)
@foreach (var mediaId in mediaIds.ToString().Split(','))
{
var media = Umbraco.Media(mediaId);
@* a single image *@
if (media.DocumentTypeAlias == "Image")
{
@Render(media);
}
@* a folder with images under it *@
if (media.Children("Image").Any())
{
foreach (var image in media.Children("Image"))
{
@Render(image);
}
}
}
</div>
}
@helper Render(dynamic item)
{
}
In macro, I added those parameters Alias: mediaIds Name: Select files and /or Images, type: Multi-Media Picker
I rendered my partial view macro on my home page as follows:
@Umbraco.RenderMacro("Gallery", new {mediaIds="1120,1118,1119"})
Now when I previe my home page i get list of Images instaed of a slider as I want , can you help to figure out why it returns list of images istead of slider?
The basic unit is a docType called "Slide" which has a TextOverlay textarea and a SliderImages media picker. This is then added as a Nested Content item to another docType (called "Slider") which can be added using the "Compositions" dialogue to any other docType that needs a carousel.
The code below is the flexSlider.cshtml partial for the Carousel.
@img.GetCropUrl("Slider") refers to a crop set up in the ImageCropper dataType. If you're not using it then you can just do @img.Url.
@inherits Umbraco.Web.Mvc.UmbracoViewPage<IPublishedContent>
@{
if(Model.HasValue("sliderImages")) {
var slides = Model.GetPropertyValue<IEnumerable<IPublishedContent>>("sliderImages");
<div class="col-xxs-12 flexslider">
<ul class="slides">
@{
foreach(IPublishedContent sliderItem in slides) {
var img = sliderItem.GetPropertyValue<Image>("slideImage");
if (img != null) {
var alt = sliderItem.GetPropertyValue("TextOverlay").ToString() != "" ? sliderItem.GetPropertyValue("TextOverlay") : img.Name;
<li>
<img src="@img.GetCropUrl("Slider")"
alt="@alt">
<div class="sliderCaption">@sliderItem.GetPropertyValue("TextOverlay")</div>
</li>
}
}
}
</ul>
</div>
}
I'm trying to install the starter kit package in my application, its throw an error and collapse the code, i'm using umbraco 8.3.0 and the framework. 4.7.2 MS studio 2017, please help to solve this issue.
How can I setup the Database for this starter kit? When I run the code I doesn't point me to the DB setup for connection string. Hope you can help me on this because I want to know how the carousel propetry control setup in Setting -> Document Types.
I'm trying to upload the kit in admin panel->package section. already i have "The Starter Kit", which default from Umbraco version. i'm trying to install codeshare kit also, its throw an error, whether i have to uninstall the default package and install this package alone? or ?
Creating Carousel Slider in Umbraco
Hii.
I am a newbie in Umbraco, can someone provide tutorial or guidance on how to create carousel slider in Umbraco? google didn't help, please help
Hi Geofrey,
Your best bet is making use of Nested Content which allows the use of repeatable elements. As of Umbraco 7.7, Nested Content is shipped with Umbraco, if you're using an old version, you'll need to install it.
I'm not sure about your ability level, so shout up if you need more help but here's an overview of the steps I'd take to set up a slider:
Settings
Document Types
section calledNested Content
(this is optional but it's a nice way to keep things organised).Slide
. This acts like a normal document type, just add the fields that you need. In my example, I'm adding anImage
field, and aText
field. The first allows you to choose an image, the second is a rich text editor.Developer
section. Now add a newData Type
calledSlides
. UseNested Content
as theProperty editor
type.Doc Types
section, choose your newly createdSlide
as the document type. You'll need to choose the tab you created as well.Now you can use this new data type in any of your other document types. To actually display the slider elements, check out the Nested Content Documentation, especially the Rendering Nested Content part.
As I said, that's a bit of an overview of the steps, you'd need to create your desired markup in the template but this would be totally dependent on which slider you use. If you need more help either shout up, or I'll try to cobble together a more in depth tutorial for you.
Good luck!
I was able to create nested content using your tutorial and add the content to them, and I look through both links you provided, I just cannot wrapped my head around adding the carousel to a partial view.
Do you have a full tutorial somewhere or an example of adding nested content to the page ?
I am using Umbraco 8
thanks for any help :)
Hi Pierre There is an example in my v8 starter kit. Here is the code for the partial view on GitHub. https://github.com/prjseal/CodeShare-Umbraco-Starter-Kit-for-v8/blob/master/src/CSUSK.Web/Views/Partials/Content/_MainCarousel.cshtml
Paul
Hi Paul. What is in Doctument Type and Compositions please. Where do I store the images.
Thanks. this is not so easy when this is your first intro to Umbraco.
Just need a helping hand.
Hii Ben,
I managed to create a simple slider using slick slider but it just displays a list of images, not a slider, here is what I have done:
added javascript for calling the slider at the end of my page.
I created a macro from partial view macros files by selected a snippet called gallery and edited it little bit m here is how it look:
@inherits Umbraco.Web.Macros.PartialViewMacroPage @* Macro to display a gallery of images from media the media section. Works with either a 'Single Media Picker' or a 'Multiple Media Picker' macro parameter (see below).
*@
@{ var mediaIds = Model.MacroParameters["mediaIds"]; } @if (mediaIds != null) {
}
@helper Render(dynamic item) {
In macro, I added those parameters Alias: mediaIds Name: Select files and /or Images, type: Multi-Media Picker
I rendered my partial view macro on my home page as follows: @Umbraco.RenderMacro("Gallery", new {mediaIds="1120,1118,1119"})
Now when I previe my home page i get list of Images instaed of a slider as I want , can you help to figure out why it returns list of images istead of slider?
Hi Geofrey,
This is for FlexSlider (
http://flexslider.woothemes.com/
), using nested content as Ben described.The basic unit is a docType called "Slide" which has a TextOverlay textarea and a SliderImages media picker. This is then added as a Nested Content item to another docType (called "Slider") which can be added using the "Compositions" dialogue to any other docType that needs a carousel.
The code below is the flexSlider.cshtml partial for the Carousel.
@img.GetCropUrl("Slider")
refers to a crop set up in the ImageCropper dataType. If you're not using it then you can just do@img.Url
.In a JQuery pad you can get it going with:-
There's a load of stuff you can add to pretty it up in CSS.
Hope this helps ;)
Hi Geoffrey I've made a carousel using Nested Content. It is in my new Umbraco Starter Kit package which I released today.
Here is the link to the Umbraco Package https://our.umbraco.org/projects/starter-kits/codeshare-starter-kit/
Here is the link to the Demo site http://codesharestarterkit.azurewebsites.net/
Here is the link to the project in GitHub https://github.com/prjseal/CodeShareUmbracoStarterKit
Cheers
Paul
Thank you bro , keep it up :)
May be you know how to add image caption via media picker in umbraco.?
Please, can you make your starter kit multi-language platform?
Hi Paul,
I'm trying to install the starter kit package in my application, its throw an error and collapse the code, i'm using umbraco 8.3.0 and the framework. 4.7.2 MS studio 2017, please help to solve this issue.
Thanks Vennila M
I I'm just testing this out myself now.
How can I setup the Database for this starter kit? When I run the code I doesn't point me to the DB setup for connection string. Hope you can help me on this because I want to know how the carousel propetry control setup in Setting -> Document Types.
I'm trying to upload the kit in admin panel->package section. already i have "The Starter Kit", which default from Umbraco version. i'm trying to install codeshare kit also, its throw an error, whether i have to uninstall the default package and install this package alone? or ?
Thanks
Hi Paul,
Thanks and got the solution, i just removed the default starter kit and installed the codeshare kit, its working fine for me thanks.
is working on a reply...