Hi Tony,

There is many ways that you can solve this task on I would try to describe some of the approaches. First approach that I think you could use is add a media picker on the document types where it should be able to have a image slider. What you then need is to loop though all the images in that folder. For the slider functionally you could use the Slick slider http://kenwheeler.github.io/slick/

The Razor code for looping though images in a selected folder from the media section could look like this. Where the pictures is the alias of the property on the document type.

@inherits Umbraco.Web.Macros.PartialViewMacroPage

@{      

    if (CurrentPage.HasValue("pictures")){                                         

        var dynamicMediaFolder = Umbraco.Media(CurrentPage.pictures);

         <ul>

            @foreach (var picture in dynamicMediaFolder.Children)

            {

                <li>

                    <a href="@picture.Url">

                        <img src="@picture.umbracoFile" alt="@picture.Name" />

                    </a>

                </li>

            }

        </ul>

    }

}

Another way of doing this if you want to be able to add a captions or other stuff to each slides, could be setup an repository in the same level as your home page, and under this you can create a slider container item, and under this item you can create each slide, where you can pick an image from the media section, maybe write some text to each slide as well.

If you choose this option then you need to change the media picker on the document type to a content picker, but you can still use the slick framework.

The last thing I think you could do is using the uskyslider package to build your imager slider. https://our.umbraco.org/projects/backoffice-extensions/uskyslider

Hope this helps, and makes sense.

/Dennis

Hi Dennis

Thanks for your thoughts on this. I had a good look. The last option is out because you have to buy a jQuery plugin, I don't understand the second option at all, so I thought I would give the first option a go! I managed to get one image to display, from a folder of two, and it wouldn't slide. The image was huge too!! So I figured it might be because the Document type was a Media picker, so I changed it to a Multi Media Picker and now there's no image at all! It's time to walk away for a while and come back in a bit!

Thanks.

Tony

Hi Tony,

I have followed the same guide http://carlosmartinezt.com/2014/06/umbraco-7-and-mvc-practical-examples-part-2/ and it works fine. However, I remember that there was some reference errors in the example. Make sure that the carouFredSel script file is referenced correctly i.e. the name of the referenced file (packed version or not packed) is the same as the actual file in your script folder. Also dobble check the names of you folder/doc types/properties etc. I am sure you already have but sometimes it takes 3-4 times to see it, at least for me :-)

If you want, I could provide you with my code.

Good luck!

/martin

Hi Martin

Thanks for that. Yes me too, I have to look, look again and leave it, come back and then I might see something missing! Some code would be great please!

Thanks.

Tony

Hi Tony, here comes some come code. I hope you have some help from it. I keep it in partial view ("Slideshow.cshtml") and call it using @Html.Partial("Slideshow", @Model.Content) where I want it in my home-template.

Good luck! /martin

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@*inherits UmbracoTemplatePage *@

@{
var mediaFolderId = (int)CurrentPage.slideshowFolder;
}


@if (mediaFolderId > 0)
{
var mediaFolder = Umbraco.TypedMedia(mediaFolderId);
var banners = mediaFolder.Children(x => x.DocumentTypeAlias == "Slideshow").ToList();

<div id="pager"></div>  

<div id="Slider">
   @foreach (var banner in banners)
   {
   var link = Umbraco.TypedContent(banner.GetPropertyValue<int>("link"));
   <div class="slide">
      @if (link != null)
      {
      <img src="@(banner.GetPropertyValue<string>("image"))"/>


      }
      else
      {
      <img src="@(banner.GetPropertyValue<string>("image"))" />
      }

       <a href="@link.Url">
       <div class="slideText" style="background-color:@(banner.GetPropertyValue<string>("slideTextColor"));">
         <h1>
            @(banner.GetPropertyValue<string>("headline"))
         </h1>
         @Html.Raw(banner.GetPropertyValue("text"))
          <cite>
            @(banner.GetPropertyValue<string>("author"))
         </cite> 
      </div> 
          </a>
   </div>
   }
</div>
<script type="text/javascript" src="/Scripts/jquery.carouFredSel-6.2.1-packed.js"></script>
<script type="text/javascript">

$(window).load(function () {

$('#Slider').carouFredSel({
    responsive: true,
    pagination: "#pager",
    direction: 'up',
    scroll: {
        items: 1,
        fx : "crossfade",
        duration: 1400
        },
    auto: {
        progress: ".progress-bar"
    }
});
});
</script>

}

Hi Martin

Thanks for that. All I could get it to do was show me the pictures that should be in the slider!

I wrote it off and downloaded a new instance of Umbraco and started again with what appeared to be a simple step by step process http://24days.in/umbraco/2014/grid-macros/ This just gives me my three images displayed one on top of the other.

Anybody else tried this?

Thanks Tony

Congrats Tony :-)

The js can cause headache every now and then. I forgot a cookie js-file once and wondered why no cookie where created....

//martin

I have just discovered something strange. After the celebrations of getting the slider to work, I went home wagging my tail! I got back to the project a day or so later and re did the slider and.....it displays all the images in the Home Page Banners folder, one above the other. So I re read and checked and re checked still the same. So I decided to set up another test instance. This time I chose the Fanoe starter kit, and the same. So this morning I had a thought and tried the green coloured starter kit and - it worked perfectly first time no bother at all. Grant you the green kit already had a Banner tab on the home document type. The plot thickens.....though I have realised I'm not completely mad!! I'll post an update when I get to the bottom of this.....

Hi Tony, ive been dealing with the same issue for the past 2 days and cant seems to get it work.. ive been using fanoe stater kit that already included in umbraco 7.2.6 and trying image slider from here http://carlosmartinezt.com/2014/06/umbraco-7-and-mvc-practical-examples-part-2/

and ive been checking the banner folder name and get it called using

@{ Html.RenderPartial("homepageManyBanners"); }

or this

@Html.Partial("Slideshow", @Model.Content)

i dunno..im still confusing to how this slider gonna work??? i even cant get the image out in the homepage...

Hi Ismail

I feel your pain! I couldn't get it to work in the Fanoe kit either. It did work for me in one of the other kits, and only that one! I have no idea why?! The kit I used was the one Carlos Martinez used, I picked it judging from the greenish colours in his example. I tried it in a clean empty project I was working on, and couldn't get it to work there either.

Hope that kind of helps. It was all I could do.... I just gave up on the Fanoe and other kit example too and my project. I was trying to get it sorted for an intrantet I'm working on and I felt like I was being a nuisance! Luckily the slider wasn't an issue as I didn't get anywhere. Sorry I can't be more help.

Tony

thank you Tony for your reply...im starting to stuck in here, maybe i'll try different kit for this slider.. By the way, what kit did you use for the Martinez slider???

im still 2 week old using umbraco, and i dont get the greenish colour you mention before...

Hi Ismail

In my 'Downloads' folder I have an unzipped instance of Umbraco, so I unzipped it and started again. When it was unzipped I opened the website as a website with WebMatrix. Then run it in a browser. Fill in the form and Customize. Then Continue. The next page has the three examples of the Umbraco kits. I used the one in the middle. When you publish it, the homepage looks like this:

If you do the Carlos Martinez way it should work, just don't forge the javascript - I did! Hope this helps. Tony

Dear Tony, oh i get it, im just using basic installation this whole time and not noticing the costumize button.... i already done it all and put the jquery.carouFredSel-6.2.1.js intead of jquery.carouFredSel-6.2.1-packed.js on the homepageManyBanners.cshtml and put this code @{ Html.RenderPartial("homepageManyBanners"); } on the homepage template...but still i cant get my image out.. did i do something wrong???

im still optimistic to get this slider work...and thanks again for your patient..

Hi Ismail

I found my old project and got around the password! I had forgotton it!

My images live in a folder called Home Page Banners in the Media section. I also used jquery.carouFredSel-6.2.1-packed.js which lives in the Scripts folder. I have a Partial View called homepageManyBanners:

`@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{ var mediaFolderId = (int)CurrentPage.BannersMediaFolder; }

@if (mediaFolderId > 0) { var mediaFolder = Umbraco.TypedMedia(mediaFolderId); var banners = mediaFolder.Children(x => x.DocumentTypeAlias == "Banner").ToList();

<div id="banner-wrapper">
    <div id="banners">
        @foreach (var banner in banners)
        {
            var link = Umbraco.TypedContent(banner.GetPropertyValue<int>("link"));

            <div class="banner">
                @if (link != null)
                {
                    <a href="@link.Url">
                        <img src="@(banner.GetPropertyValue<string>("image"))"/>
                    </a>
                } 
                else
                {
                    <img src="@(banner.GetPropertyValue<string>("image"))"  />
                }

                <div class="banner-text">
                    <h2>@(banner.GetPropertyValue<string>("headline"))</h2>
                    @Html.Raw(banner.GetPropertyValue("bannertext"))
                        <cite>@(banner.GetPropertyValue<string>("author"))</cite>
                </div>
            </div>
        }
    </div>
</div>
<div class="progress-bar"></div>
<script type="text/javascript" src="/scripts/jquery.carouFredSel-6.2.1-packed.js"></script>

<script type="text/javascript">
    $(window).load(function () {
        $('#banners').carouFredSel({
            scroll: {
                items: 1,
                duration: 1000
            },
            auto: {
                progress: ".progress-bar"
            }

        });
    });
</script>

}

` Then in the homepage:

@{ Html.RenderPartial("homepageManyBanners"); }

I could only get this to work in the one kit.

Hope this helps. Tony

Hi there,

I followed the tutorial exactly and took into account the comment thread here, but I keep getting

Cannot convert type 'string' to 'int' 

on the initial

@{ var mediaFolderId = (int)CurrentPage.BannersMediaFolder; }

Does anyone have any suggestions?

Thanks,

Amanda

Hi,

One idea that might solve it:

Your BannersMediaFolder should be of type Media Picker, i.e., you pick a media folder and reference the picker instead of the actual folder itself.

//martin

is working on a reply...