Hi Tom

You need to seperate things - Razor can't make the slider stuff - You'll need to hook the markup up with a JavaScript slider like http://kenwheeler.github.io/slick/ - It's easy to configure and it's responsive etc.

So I suppose you want to be able to reuse the code so you can create different banners for use on different pages in a rich text editor? Or do you plan on making use of the grid editor? If so Antoine Giraud wrote a piece about how to use macros in the grid editor where he is setting up a slider actually so perhaps this could be useful to you? http://24days.in/umbraco/2014/grid-macros/

Let me know what you're thinking and I'll try to cook up an example for you :)

/Jan

Jan:

 

Thanks so much for responding.

Yes, being new to Umbraco and JQuery, I could use a boost.

i just need a simple example (nothing is simple right) as follows:

My users create a media folder called ImgRotate.  They upload 10 images to it.
Then want me to edit the home page and insert an image rotator that will show the images randomly and cycle through all 10, changing each image every 3 seconds.
I am told from my users that they will be changing out the 10 images monthly to give the site a new look.
In addtion, they would like slider controls (<< <    >  >>) on each side so  the users can navigate through the images at their own pace.

I looked at the link you sent and macros are very powerful.  I will certainly use this for reusable content. But since my users are just going to upload 10 images monthly, there is no editing involved.

Can you help?

 

Thanks

Tom

Hi Tom

I had some time this evening to look at how to create a slider. I based it upon the partial view macro, which is predefined when choosing from the "dropdown" when one creates a new partial view macro in the "Developer" section. So I chose "List Images From Media Folder" - Then I added the parameters to the macro as described in the comments in the file. This lists all the images from within my folder. The macro can be inserted into the rich text editor.

If you don't like the macro approach you can just edit the macro to look at a media picker, which you can define on the homepage node instead for instance.

The macro looks like this

@inherits Umbraco.Web.Macros.PartialViewMacroPage


@*
    Macro Parameters To Create, for this macro to work:
    Alias:mediaId     Name:Media Folder ID    Type:Single Media Picker
*@
    @Model.MacroParameters["mediaId"]
@if (Model.MacroParameters["mediaId"] != null)
{
     @* Get the media folder as a dynamic node *@
    var mediaFolder = Umbraco.Media(Model.MacroParameters["mediaId"]);

    if (mediaFolder.Children.Any())
    {
        <div class="slides">
            @* for each item in children of the selected media folder *@
            @foreach (var mediaItem in mediaFolder.Children)
            {
                <div><img src="@mediaItem.umbracoFile" alt="@mediaItem.Name" /></div>
            }
            </div>
    }
}

Now in your content section place the macro in a rich text editor and choose a folder where the images should be listed from.

Ok, so now that the macro is in place we need to setup and configure "Slick". So go to http://kenwheeler.github.io/slick/ and hit the "Download now" button. Extract the files and copy over the "slick.min.js" to your prefered folder for storing JavaScript and do the same with the "slick.css" and "slick-theme.css" files.

Reference the css files in the part, starting with the "slick.css" first and then "slick-theme.css" second (You can also merge the two files if you would like) of your master.cshtml file and include the JavaScript before the tag.

Now you can hook up the slider with your list of images by adding the following javascript. In my example it's just added internally before but preferably you should put it into an external file.

<script>
     $(document).ready(function(){
        $('.slides').slick();
     });
  </script>

This will trigger the slider using the defaults - if you want to change those you can click the "Settings" link and see, which settings you can modify. I have enabled autoplay and switched of the pauseonhover function.

<script>
     $(document).ready(function(){
        $('.slides').slick({
            autoplay:true,
            pauseOnHover:false
        });
     });
  </script>

My master.cshtml file looks like this

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = null;
    var home = @CurrentPage.Site();
}

<!DOCTYPE html>
<html lang="en">
  <head>

    <!-- Meta tags -->
    <!--<meta charset="utf-8">-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">

    <title>Some title</title>

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="/css/slick.css">
    <link rel="stylesheet" type="text/css" href="/css/slick-theme.css">
  </head>

  <body>

    //This is just what I have called my rich text editor reference
    @CurrentPage.sitetest

    @RenderBody()

    <!-- Javascripts -->
    <script src="/js/jquery.min.js"></script>
    <script src="/js/slick.min.js"></script>
      <script>
         $(document).ready(function(){
            $('.slides').slick({
                autoplay:true,
                pauseOnHover:true
            });
         });
      </script>
  </body>
</html>

If you have a look in the rendered dom using your dom inspector in Chrome you can see that two buttons for "prev" and "next" have been injected. You can style those two and use them for switching between slides.

I hope that this makes sense and helps :)

Oh yeah, make sure to reference jQuery as well since slick depends on it.

Have fun!

/Jan

Jan, this is great!

I was half-way through creating my own slider based on the template PartialViewMacroPage, which is pretty much what you have above (although mine can accept multiple images and/or folders). The only thing left for me to do was to add the slider javascript, but I got sidetracked on another project haha. Your post helped me to quickly finish it off :)

An issue I encountered was that I couldn't see the arrows on my page so I thought something was broken. But it's actually because my page is white and the arrows are white too!

There are 2 solutions to this:

1) Move the arrows on top of the images by adding in some extra CSS (or modifying the provided CSS files)

.slick-prev { margin-left: 40px; } .slick-next { margin-right: 40px; }

2) Change the arrow colour so it is visible on a white background

.slick-prev:before, .slick-next:before { color:red; }

Thanks alot Jan.  Very very helpful.

schlubadub  - What changes to Jan's code did you do to accept multiple images?

 

Tom

Hi Tom

Happy to hear it helps - As I think I wrote somewhere in my post you can choose to change the parameter type on the macro so you can use a multiple image picker instead.

Can't remember if you need to change anything in the logic in regards to how you loop over the collection. Perhaps you don't need to change anything.

My example is just listing the contents of a folder.

Hope this helps.

/Jan

Hi Tom,

It looks like I modified my version from the standard templates located in [BASE DIRECTORY]\umbracro\PartialViewMacros\Templates\Gallery.cshtml

You can select a single image, multiple images, and directories (single or multiple)

@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)
*@

@{ var mediaIds = Model.MacroParameters["mediaIds"]; }
@if (mediaIds != null)
{
    <div class="slides">
        @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)
{
    <div>
    <img src="@item.umbracoFile" alt="@item.Name" />
    </div>
}

Thank You very much!

Jan:

If I chose NOT to use a macro and just made it a partial view, how would I change the code so that I could make it strongly typed?  As there is no Imges object off the Model.Content object.

 

Tom

Hi Tom

Sorry for the late reply - Just had a glance. Unfortunately the solution where I made this demo crashed because I tried installing a package, which made it all explode :D

But you should be able to change the code to something like this - I have not tested it though

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

 @* Get the media folder as a dynamic node *@
var mediaFolder = Umbraco.Media(1234); //Use a hardcoded media id here

if (mediaFolder.Children.Any())
{
    <div class="slides">
        @* for each item in children of the selected media folder *@
        @foreach (var mediaItem in mediaFolder.Children)
        {
            <div><img src="@mediaItem.umbracoFile" alt="@mediaItem.Name" /></div>
        }
        </div>
}

Does this work? But you should be aware that it's a bit fragile depending on a hardcoded id since the code will break if the id is for some reason deleted.

/Jan

Jan:

Thanks for responding.

I used this code to get my carousel to work with Bootstrap.

 

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@using umbraco.MacroEngines;

 

 

<div id="FHLBCarousel" class="carousel slide" data-ride="carousel">

    <!-- Indicators -->

    <ol class="carousel-indicators">

        <li data-target="#FHLBCarousel" data-slide-to="0" class="active"></li>

        <li data-target="#FHLBCarousel" data-slide-to="1"></li>

        <li data-target="#FHLBCarousel" data-slide-to="2"></li>

    </ol>

 

 

    <!-- Wrapper for slides -->

    <div class="carousel-inner" role="listbox">

        @{

 

            var mediaFolderId = Umbraco.TypedMedia(7304);

            var folder = Umbraco.TypedMediaAtRoot().DescendantsOrSelf("Folder").Where(x => x.Name == "RotateImages").FirstOrDefault();

            var images = folder.Children(x => x.DocumentTypeAlias == "Image");

            int i = 0;

            foreach (var item in images)

            {

                if (i ==0)

                {

                    <div class="item active">

                        <img src="@item.Url.ToString()" />

                        <div class="carousel-caption">

                            <h3>@item.Name</h3>

                        </div>

                    </div>

                }

                else

                {

                    <div class="item">

                        <img src="@item.Url.ToString()" />

                        <div class="carousel-caption">

                            <h3>@item.Name</h3>

                        </div>

                    </div>

               }

               i++;

            }

}

    </div>

    <!-- Controls -->

    <a class="left carousel-control" href="#FHLBCarousel" role="button" data-slide="prev">

        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

        <span class="sr-only">Previous</span>

    </a>

    <a class="right carousel-control" href="#FHLBCarousel" role="button" data-slide="next">

        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

        <span class="sr-only">Next</span>

    </a>

</div>

Thanks

 

 

 

 

Has anyone managed to add links using bootstrap and link picker. I put a property on my media item called link picker. the type is link picker but I can't get it to work. All i get is a null exception error. any help would be much appreciated. A snippet of my code is below. Thanks

<div class="carousel-caption">
                @if(@imageItem.GetPropertyValue("text")!=null){
                  <p style="padding:10px; background-color:rgba(73,68,68,.5);display:block; height:auto;max-width:220px;">@imageItem.GetPropertyValue("text")</p>
                    }
        @{var link = Umbraco.TypedContent(@imageItem.GetPropertyValue<int>("linkPicker"));}

            <a href="link.Url">Find out more</a>

Hi,

I haven't been able to get this to work...

I keep getting the error: "Error loading Partial View script (file: ~/Views/MacroPartials/Gallery.cshtml)" when I try to load it in my rich text editor.

I've copied the code, created a partial view macro file, left the "create macro" option checked, saved the file, and then tried to load it in the RTE.

Any ideas of what I could have done wrong?

Thanks so much.

Was having the same problem as Amanda until I added the necessary parameter to the macro as stipulated in the Gallery.cshtml template:

"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)"

is working on a reply...