Hi Steve,

You can make use of a MediaPicker as an Alias in your document type something like slideshow.

What jquery slideshow are you using here to display the images ?

Anyways here is how you can get this working with razor.

@using umbraco.MacroEngines;
@using umbraco.cms.businesslogic.media;
@{
 var n = @Model;
    if(!String.IsNullOrEmpty(n.slideshow)){ // check is mediaPicker is not empty
                            
                             int Id = Convert.ToInt32(@Model.slideshow); // converting the value to int
                             var StartMedia = new Media(@Id); 
                             var count = 0;                        
                                                                  
                                        IEnumerable<Media> nodes = StartMedia.GetChildMedia().Where(x => x.ContentType.Alias == "Image"); // pulling all images from the folder with DocumentType "Image"
                                                foreach(var f in nodes){                                                  
                                                   <a href="@f.getProperty("umbracoFile").Value"></a>

                                                }
                    }
}

Hope this helps

Hi Steve,

Are you using Umbraco v6 or v7, and are you using MVC or WebForms templating?

Jeavon

Jeavon,

I am using Umbraco 4.11.8 with WebForms.

I am going to be using the jquery Responsive Slides plugin.

Fuji,

I would like to create a Macro that can be used in the editor so I can use it on many different templates, rather than calling the Macro in a specific template. Would I only need to create the Macro and a property for the slide folder? I am still fairly new to Umbraco so please excuse my ignorance, but at this point I wouldn't know how to call the images from the property using razor. Thanks for any help!

Hi Steve,

When creating your razor cshtml file remember to leave the create macro checkbox checked. Then under the Macro folder in developer itself Checked Use in editor.

You will be able to add the Macro in your RTE.

//fuji

Here is my start, but of course it isn't working. What am I doing wrong?

@inherits umbraco.MacroEngines.DynamicNodeContext

    @{
        var slideFolder = @Parameter.slideFolder;   

    <ul class="rslides">
            @foreach(var slide in slideFolder.Children) {
            <li><img src="slide.getProperty("umbracoFile").Value" alt=""></li>
            }

    </ul>
            }

I've seen this used to refrence a media folder, but would it work for the property of a maco? and how?

varslideFolder=Library.MediaById(Model.sliderImages);

Hi Steve,

Here is guide  how you could do it.

1. Add a proppery on the type of pages where is should be possible to add a gallery. Call the propperty e.g Photos in name and it will get the alias of photos and choose the data type of media picker.

2 Create a scripting file with a macro. On the macro add a pararmeter with the alias of mediaFolderID give it a name and the type of mediaCurrent.

3.Set tick in use in editor and render content in editor.

4. The scripting file content is this:

@{
    //Can't use .HasValue on Parameters so use checking to see if String is not Null or empty
    if (!String.IsNullOrEmpty(Parameter.mediaFolderID))
    {
        var MediaFolder = Library.MediaById(Parameter.mediaFolderID);
        
                <ul class="rslides">
                    @foreach (var photo in MediaFolder.Children)
                    {
                        <li>
                            <img src="@photo.umbracoFile" alt="@photo.Name" />
                        </li>
                    }
                </ul>
    }
    
   
}

5. Inert the macro for the slideshow where you want the slide show to appar and when you have done that change the parameter to [#photos] like this:

<umbraco:MacromediaFolderID="[#photos]" Alias="Slideshow"runat="server"></umbraco:Macro>

6. When you make your folder for each gallery and add images, you can create an top folder likes this structure.

Galleries

----- Gallery one

------------ Image 1

7. Make sure that the javascript for slideshow is called, and add the styling to the slider.

8. Pick a gallery folder on the page, e.g Gallery one.

If you have access to the Umbraco TV you can se how it can be done here: http://umbraco.com/help-and-support/video-tutorials/umbraco-fundamentals/razor-recipes/gallery/

I can´t take any credits for this.The credit goes 100% to Warren Buckley,

Hope this can help you.

/Dennis

I watched the video on Umbraco TV, and was wondering if you had to have those Galleries in the content section? Couldn't you pull the image directly from the media node selected at the time the macro is inserted into the editor?

@Steve : Sorry forgot about the fact that you needed to make use of Parameters since you want to make use of the Macro in editor. You should be able to get this working with Dennis proposed solution. 

Hi Steve,

With the code and the guide I write you, in my earlier post, your media library can also look like this in structure.

Media (Umbraco folder)

-- Gallery one (Folder)

--- Image

--- Image

--- Image

And then you choose the Gallery one folder, so you don´t need the Galleries folder first.

/Dennis

Okay that nice to hear, I think at you should mark this post at solved, so others with the same topic / issue can see whats works for you.

/Denniis

:) Great you got it working.

have a requirement to display images as slide show in Umbraco project. I was able to implement the Slideshow(i.e images are displayed one by one after a specific time). But now I need to extend the functionality as Over the image in the slideshow i want to have all images like

Like the list the image is shown and in the second line all the images in the small thumbnails are shown. Below is what I have tried. I have tried the slide show by adding the usercontrol. 

<script src="http://ajax.googleapis.com/ajax/libs/jQuery/1.2.6/jQuery.js" type="text/javascript"></script>//Set slideshow timer inter = setInterval("timedSwitch()",8500);//Timed Slideshow function timedSwitch(){var lastLiID = $(".slideshowItems ul li:last-child").attr("id");var currentID = $(".slideshowItems .selected").attr("id");var nextID ="";if(lastLiID == currentID){ nextID ="1";}else{ nextID = $(".selected").next("li").attr("id");} $(".slideshowItems ul li").removeClass("selected"); $(".slideshowItems #"+ nextID).addClass("selected");var nexthtml = $(".selected .slideshowtext").html(); $(".slideShowText").animate({ bottom:'-500px'},500, function (){var nextImg = $(".selected img").attr("src"); $("#SlideShowImageBG").attr("src", nextImg); $("#SlideShowImage").animate({ opacity:0},500, function (){ $("#SlideShowImage").attr("src", nextImg); $("#SlideShowImage").animate({ opacity:1},250, function (){ $(".SlideShowContent").html(nexthtml); $(".slideShowText").animate({ bottom:'0'},250);});});});}<br/>

<asp:Repeater ID="Slideshow" runat="server"><HeaderTemplate><div style="margin:0 auto; width:960px;"><div class="slideshowInsideContainer"><div class="slideShowText"><div style="padding:10px;"class="SlideShowContent"> firstText %>div>div><img id="SlideShowImage" style="position:absolute; z-index:1; top:0;" src=""/><img id="SlideShowImageBG" style="position:absolute; z-index:0; top:0;" src=""/><img id="previousBttn" style="position:absolute; z-index:2; top:200px; cursor:pointer; left:0;" src="/images/SlideShow/leftButton.png"/><img id="nextBttn" style="position:absolute; z-index:2; top:200px; cursor:pointer; right:0;" src="/images/SlideShow/rightButton.png"/><div class="slideshowItems">HeaderTemplate><ItemTemplate><li class='' id=""><div class="slideshowtext">Eval("text")%>div><img style="position:absolute; z-index:1; top:0;" src=' '/>li>ItemTemplate><FooterTemplate>ul>div>div>div>FooterTemplate>asp:Repeater><br/>Code behind File: using System; using System.Collections; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using umbraco.NodeFactory;publicpartialclass usercontrols_SlideshowDemo :System.Web.UI.UserControl{privatestring _slideShowID;publicstring firstImage ="";publicstring firstText ="";publicstring slideShowID { get {returnthis._slideShowID;}set{this._slideShowID = value;}}protectedvoidPage_Load(object sender,EventArgs e){GetSlideshowData();}publicvoidGetSlideshowData(){int ID =Convert.ToInt32(slideShowID);Node parent =newNode(ID);ArrayList repeaterData =newArrayList();Nodes children = parent.Children;for(int i =0; i < children.Count; i++){string image = children[i].GetProperty("image").Value.ToString();string text = children[i].GetProperty("slideshowText").Value.ToString();if(i ==0){ firstImage = image; firstText = text;} repeaterData.Add(newSlideShowItem(image, text));}Slideshow.DataSource= repeaterData;Slideshow.DataBind();}publicclassSlideShowItem{privatestring _image;privatestring _text;publicSlideShowItem(string image,string text){this._image = image;this._text = text;}publicstring image { get {returnthis._image;}set{this._image = value;}}publicstring text { get {returnthis._text;}set{this._text = value;}}}}

is working on a reply...