Hi Steve

There is a special syntax for passing the value of a doctype property directly into a macro parameter.

So if your macro is called 'DisplayLightbox', and your Macro Parameter is setup with alias called 'mediaFolderId' and your doctype has a media picker property called 'SelectMediaFolder' then in your template you can pass this into your macro like so:

@Umbraco.RenderMacro("DisplayLightbox", new {mediaFolderId = "[#SelectMediaFolder]"})

ie [#propertyAliasName] means take the macro parameter from the current doc type property with that alias.

You also have available:

[$propertyAliasName] that will look recursively up your content tree for a property with the alias to supply the macro with a value - useful for 'global properties'.

[@querystringName] to take the parameter from a querystring value

[%sessionKeyName] to take the parameter value from the session object.

you can also 'chain these' to look for say a querystring value first, and if it doesn't exist take the doc type value eg:

   @Umbraco.RenderMacro("DisplayLightbox", new {mediaFolderId = "[@id],[#SelectMediaFolder],5"})

Which would look first for a querystring parameter called id, if not present look for the doctype property 'SelectMediaFolder' and if that wasn't present use the value 5!

Ok, Steve, so you have a normal page doctype

eg standardPage

which contains a 'rich text editor' property

within this you wish to insert a 'display Slide Show' Macro

At the point of insertion, the macro will have a parameter (type ContentPicker) to allow the editor to pick a node (single node) from somewhere in the content tree, of document type 'SlideShow', underneath this node, will be further nodes based on a 'SlideShowItem' doctype, ie one node for each slide.

So in your macro Partial view that implements your macro (are you using Partial Views or DynamicNode Razor ?) you should be able to read the picked content node id from the parameter using:

var pickedSlideShowId = Model.GetParameterValue<int>("parameterAlias")

although this helper extension may not actually be available in Umbraco 6.1.6 ...

otherwise I think it was

Model.MacroParameters["parameterAlias"]

in earlier versions.

With the Id of the picked 'slide show' content you could then use

var pickedSlideShow = Umbraco.TypedContent(pickedSlideShowId);

to get a reference to the slide show node and it's properties, furthermore use

var slides = pickedSlideShow.Children().Where(f=>f.IsVisible());

to get a list of the slides to loop through and write out the slideshow html.

Or do you mean the macro parameter contentPicker will just pick a single SlideShowItem node, in which case just read the picked Id, and the above to get a reference to that node's properties / slide image etc - for the lightbox.

Or do you mean the macro is just for positioning and the relevant slides are picked on the underlying standardPage doctype - if so in the macro partial view, you can read the properties of the underlying document type content via Model.Content.GetPropertyValue etc

Hi Steve!

Concerning Umbraco 6.X:

1. All of the extended macro parameters syntax examples described above by Marc were work in 6.x as well.

Here is an example of the call universal docs list macro (both $ and @ syntax usage btw):

@Umbraco.RenderMacro("[tapes]itemsList", new {listNode="", itemsPerPage="[$pageSize]", pageNum="[@page]", colSmall="0" , withPager="1" , filterTag="[@tag]" })

this macro call is in the template of a page which is available via url like this:

mysite.org/tape/news?page=2&tag=somekeyword

1. I have to admit only one thing: the @queryStringName syntax works with not only GET querystring vars AFAIK, but with all REQUEST vars including POST vars and cookies.

2. To get and parse macro parameters in the Partial View Macro in 6.x we did simethig like this:

   int total = 0, pageNum = 1, itemsPerPage = 10; int.TryParse(Model.MacroParameters["totalCount"].ToString(), out total); int.TryParse(Model.MacroParameters["itemsPerPage"].ToString(), out itemsPerPage); int.TryParse(Model.MacroParameters["pageNum"].ToString(), out pageNum);

3. Some time ago I've even use this package, which adds the extension method to the Library class and gives the possibility of calling macro from another macro body.

UPDATE: this package was useful in times of 4.x :-) In 6.x partial view macros there is a out of the box way to call another macro via @Umbraco.RenderMacro("macroAlias", new { paramCollection })

Concerning the following proposals how to organize a macro calls from RTE, there is totally IMHO :-) but if there are no cases in the project where is no possibility to avoid macros in the RTE, I've tried not to use this approach AT ALL :-) The faith in "No any code parts where content editor walks" is still works like a charm ;-)

Hi Steve,

ahh dynamic node razor, so have a look at the attached screen grabs, I think I've setup the structure you describe...

What is the colorbox macro parameter ?

Now we implement the Colorbox Macro with a DynamicNode Razor file:

@inherits umbraco.MacroEngines.DynamicNodeContext
@{

var slideShowFolderId = Parameter.slideShowFolder;
    // get slideShowFolder Umbraco Node
var slideShowFolder = Library.NodeById(slideShowFolderId);      

}

<h2>@slideShowFolder.Name (@slideShowFolder.Id)</h2>

@* loop through the children to write out the slides *@

<ul>
@foreach( var node in slideShowFolder.Children()){

<li>@node.Name (@node.Id)</li>

}

</ul>

Hopefully you can see in theory, the macro gets a reference to the 'picked folder' via Parameter.slideShowFolder (which is the alias of the parameter created in the macro config)

We then use the Library.NodeById to get the parent Slide Show Folder node itself.

Then loop through the children, which are the SlideShowItems, and can write out the relevant properties within the relevant html for the slider:

Anyway even if this isn't the exact structure hopefully, gives you better clues, about how to do it than the Macro Partial View examples...

Hi Steve

I've updated mine to pick from the Media folder too

and now have the following razor:

@inherits umbraco.MacroEngines.DynamicNodeContext


@* Get the parameter of the slideshow folder *@

@{

var slideShowFolderId = Parameter.slideShowFolder;
    // get slideShowFolder Media folder
var slideShowFolder = Library.MediaById(slideShowFolderId);     

}

<h2>@slideShowFolder.Name (@slideShowFolder.Id)</h2>

@* loop through the children to write out the slides *@

<ul>
@foreach( var node in slideShowFolder.Children()){      
<li>@node.Name (@node.Id)
        <img src="@node.Url()" style="width:80px" />
        </li>   
}   
</ul>

Which writes out the following:

So you can see, two different 'media folders' have been picked, for each macro when added to the rich text editor and two different sets of images looped through from the relevant folders.

Might be worth just writing out just the picked folder ids in the html, to confirm they are different, ie the Parameter bit on your macro is working properly.

Could it be the slider javascript plugin itself is merging the two sets of slides together, because of their html ? rather than being a macro parameter problem ??

Yea, it looks like the invocation of the colorbox is what is the problem. Unless there is some way to have it distinguish between the different slide groups, it will always grab them all.

It has to reference the class "slideGroup", which will always contain all the slides from every instance of colorbox. If there were a way to have it generate a class dependent on the slideFolder selected, it could differentiate.

@{ 
    @* var hide = (Parameter.hide == "0") ? @Html.Raw("display:block") : @Html.Raw("display:none"); *@
    var trans = string.IsNullOrEmpty(Parameter.transition) ? @Html.Raw("transition:'elastic'") : @Html.Raw("transition:'@Parameter.transition'");
    var slideshow = (Parameter.slideShow == "1") ?  @Html.Raw("slideshow:true") : @Html.Raw("slideshow:false");
    var showTitles = (Parameter.showTitles == "0") ?  @Html.Raw("title: function() {$(this).data('title', $(this).attr('title')).removeAttr('title');}") : @Html.Raw("title: function() { return '' + $(this).attr('title') + ''; }");

}
<script>       
   $(document).ready(function() {
    var $gallery = $('a.slideGroup').colorbox({rel:'slideGroup1',@trans, @slideshow, slideshowSpeed: 4000, @showTitles });


     $("a#openGallery").click(function(e){
            e.preventDefault();
            $gallery.eq(0).click();
        });
    }); 
</script>   

@{
    if (!String.IsNullOrEmpty(Parameter.slideFolder)){

        var slideFolder = Library.MediaById(Parameter.slideFolder);
        var width = string.IsNullOrEmpty(Parameter.slideWidth) ? "350" : Parameter.slideWidth;
        var height = string.IsNullOrEmpty(Parameter.slideHeight) ? "auto" : Parameter.slideHeight;
        var nodeId = Parameter.nodeId;

    <ul class="cboxGallery" style="display:none;">
            @foreach(var slide in slideFolder.Children) {
            <li>
                <a class="slideGroup" href="@slide.umbracoFile" title="@slide.name" rel="slideGroup1" ><img src="/ImageGen.ashx?image=/media/1319203/slide-controls-overlay.png&width=@width&height=@height" /><img src="/ImageGen.ashx?image=
@slide.umbracoFile&width=@width&height=@height" /></a>  
            </li>
            }
    </ul>
            }
}

Hi Steve

ahh a disappointing conclusion - but we've nailed reading parameters right !!

if you are embedding the <script that calls the colorbox function in the Macro could you not customise the slideGroup class to include the slideFolder parameter ?

eg.

 var [email protected] = $('[email protected]').colorbox({rel:'slideGroup1',@trans, @slideshow, slideshowSpeed: 4000, @showTitles });

and

 @foreach(var slide in slideFolder.Children) {
            <li>
                <a class="[email protected]" href="@slide.umbracoFile" title="@slide.name" rel="slideGroup1" ><img src="/ImageGen.ashx?image=/media/1319203/slide-controls-overlay.png&width=@width&height=@height" /><img src="/ImageGen.ashx?image=
@slide.umbracoFile&width=@width&height=@height" /></a>  
            </li>

or something similar ? I'm not too familiar with the plugin. but it seems you are binding an instance of it to all links with class slideGroup, so why not bind it to all links with class slideGroup-3 where 3 is the id of the media folder, would that avoid the clash ?

I believe you've got something there Marc! I will play around with it and let you know. Thanks!

Rats! I can't get the script to load.

@{ 
    var trans = string.IsNullOrEmpty(Parameter.transition) ? @Html.Raw("transition:'elastic'") : @Html.Raw("transition:'@Parameter.transition'");
    var slideshow = (Parameter.slideShow == "1") ?  @Html.Raw("slideshow:true") : @Html.Raw("slideshow:false");
    var showTitles = (Parameter.showTitles == "0") ?  @Html.Raw("title: function() {$(this).data('title', $(this).attr('title')).removeAttr('title');}") : @Html.Raw("title: function() { return '' + $(this).attr('title') + ''; }");

    }
   <script>    
   $(document).ready(function() {
    var [email protected] = $('[email protected]').colorbox({rel:'slideGroup1',@trans, @slideshow, slideshowSpeed: 4000, @showTitles });


     $("a#openGallery").click(function(e){
            e.preventDefault();
            [email protected](0).click();
        });
    }); 
</script>       
@{
    if (!String.IsNullOrEmpty(Parameter.slideFolder)){

        var slideFolder = Library.MediaById(Parameter.slideFolder);
        var width = string.IsNullOrEmpty(Parameter.slideWidth) ? "350" : Parameter.slideWidth;
        var height = string.IsNullOrEmpty(Parameter.slideHeight) ? "auto" : Parameter.slideHeight;
        var nodeId = Parameter.nodeId;

    <ul class="cboxGallery" style="display:none;">
            @foreach(var slide in slideFolder.Children) {
            <li>
                <a class="[email protected]" href="@slide.umbracoFile" title="@slide.name" rel="slideGroup1" ><img src="/ImageGen.ashx?image=/media/1319203/slide-controls-overlay.png&width=@width&height=@height" /><img src="/ImageGen.ashx?image=
@slide.umbracoFile&width=@width&height=@height" /></a>  
            </li>
            }
    </ul>
            }
}

what's a sideFolder ?

you mean @Parameter.slideFolder... :-)

(you can also read that into a variable at the top to make it less cluttered)

Also what is the error ?

The var slideFolder at this point should be changed to "slideFolderLocation", but even after doing that, the script will not load.

if (!String.IsNullOrEmpty(Parameter.slideFolder)){

        var slideFolderLocation = Library.MediaById(Parameter.slideFolder);
        var width = string.IsNullOrEmpty(Parameter.slideWidth) ? "350" : Parameter.slideWidth;
        var height = string.IsNullOrEmpty(Parameter.slideHeight) ? "auto" : Parameter.slideHeight;
        var nodeId = Parameter.nodeId;

    <ul class="cboxGallery" style="display:none;">
            @foreach(var slide in slideFolderLocation.Children) {
            <li>
                <a class="[email protected]" href="@slide.umbracoFile" title="@slide.name" rel="slideGroup1" ><img src="/ImageGen.ashx?image=/media/1319203/slide-controls-overlay.png&width=@width&height=@height" /><img src="/ImageGen.ashx?image=
@slide.umbracoFile&width=@width&height=@height" /></a>  
            </li>
            }
    </ul>
            }

Errors are turned off and I've tried to add a "try / catch", with no luck.

Hi Steve,

Try using @Html.Raw to write out the javascript variable:

   <script>    
   $(document).ready(function() {
    var @Html.Raw("gallery_" + Parameter.slideShowFolder) = $('[email protected]').colorbox({rel:'slideGroup1',@trans, @slideshow, slideshowSpeed: 4000, @showTitles });


     $("a#openGallery").click(function(e){
            e.preventDefault();
            @Html.Raw("gallery_" + Parameter.slideShowFolder + ".eq(0).click();")
        });
    }); 
</script> 

also in your li you have

sideFolder instead of slideFolder

so close

Are you using Html.Raw to write out the javascript ?

var @Html.Raw("gallery_" + Parameter.slideShowFolder) = $('[email protected]').colorbox({rel:'slideGroup1',@trans, @slideshow, slideshowSpeed: 4000, @showTitles });

and are you saying that Parameter.slideShowFolder is just being written out as with the text slideFolder rather than the Id ?

Correct.

What you see in my last post (the script tags) is directly copied from the source of the page after load.

Hi Steve

Do you want to repost your full macro code again, to see where we are up to ?

somehow Parameter.slideShow is not writing out the picked id, but it was earlier in the thread I think, which would make your variable unique.

cheers

Marc

Here is where we are with the code:

@{

    var slideFolder = Library.MediaById(Parameter.slideFolder);
    var trans = string.IsNullOrEmpty(Parameter.transition) ? @Html.Raw("transition:'elastic'") : @Html.Raw("transition:'@Parameter.transition'");
    var slideshow = (Parameter.slideShow == "1") ?  @Html.Raw("slideshow:true") : @Html.Raw("slideshow:false");
    var showTitles = (Parameter.showTitles == "0") ?  @Html.Raw("title: function() {$(this).data('title', $(this).attr('title')).removeAttr('title');}") : @Html.Raw("title: function() { return '' + $(this).attr('title') + ''; }");


<script>       
   $(document).ready(function() {

       var  @Html.Raw("$gallery_" + @Parameter.slideFolder) = $('[email protected]').colorbox({rel:'slideGroup1',@trans, @slideshow, slideshowSpeed: 4000, @showTitles });


     $("a#openGallery").click(function(e){
            e.preventDefault();
            @Html.Raw("$gallery_" + @Parameter.slideFolder + ".eq(0).click();")
        });
    }); 
</script>


    if (!String.IsNullOrEmpty(Parameter.slideFolder)){

        var width = string.IsNullOrEmpty(Parameter.slideWidth) ? "350" : Parameter.slideWidth;
        var height = string.IsNullOrEmpty(Parameter.slideHeight) ? "auto" : Parameter.slideHeight;
        var nodeId = Parameter.nodeId;

    <ul class="cboxGallery" style="display:none;">
            @foreach(var slide in slideFolder.Children) {
            <li>
                <a class="[email protected]" href="@slide.umbracoFile" title="@slide.name" rel="slideGroup1" ><img src="/ImageGen.ashx?image=/media/1319203/slide-controls-overlay.png&width=@width&height=@height" /><img src="/ImageGen.ashx?image=
@slide.umbracoFile&width=@width&height=@height" /></a>  
            </li>
            }
    </ul>
            }

}

When you are inside the @Html.Raw you don't need the @ on Parameter

@Html.Raw("$gallery_" + Parameter.slideFolder + ".eq(0).click();")

I've tried it both ways and it still doesn't pull in the Parameter.

Hmm, so if your macro is only just the code below, are you able to see the value passed by the parameter ?

@inherits umbraco.MacroEngines.DynamicNodeContext
@* Get the parameter of the slideshow folder *@    
@{

var slideShowFolderId = Parameter.slideFolder;
    // get slideShowFolder Media folder
var slideShowFolder = Library.MediaById(slideShowFolderId);     

}

    <h2>@slideShowFolder.Name (@slideShowFolder.Id)</h2>
<h3>Passed Parameter Value: @Parameter.slideFolder </h3>

Yes so I think it is where you are escaping quotes and using brackets to seperate your serverside razor script and the javascript syntax you are producing, try:

@{ 
    var trans = string.IsNullOrEmpty(Parameter.transition) ? "transition:'elastic'" : "transition:'" + Parameter.transition + "'";
    var slideshow = (Parameter.slideShow == "1") ?  "slideshow:true" : "slideshow:false";
    var showTitles = (Parameter.showTitles == "0") ?  "title: function() {$(this).data('title', $(this).attr('title')).removeAttr('title');}" : "title: function() { return '' + $(this).attr('title') + ''; }";

    }
   <script>    
       $(document).ready(function () {
           @Html.Raw("var $gallery_" + Parameter.slideShowFolder + " = $('a.slideGroup-" + Parameter.slideShowFolder + "').colorbox({rel:'slideGroup1'," + trans + ", " + slideshow + ", slideshowSpeed: 4000,"+ showTitles +"});")
           $("a#openGallery").click(function (e) {
               e.preventDefault();
               @Html.Raw("$gallery_" + Parameter.slideShowFolder + ".eq(0).click();")
           });
       });
</script>      

which for me produces the html for the script tag as:

 <script>    
       $(document).ready(function () {
           var $gallery_1059) = $('a.slideGroup-1059').colorbox({rel:'slideGroup1',transition:'elastic', slideshow:false, slideshowSpeed: 4000, title: function() { return '' + $(this).attr('title') + ''; } });
           $("a#openGallery").click(function (e) {
               e.preventDefault();
               $gallery_1059.eq(0).click();
           });
       });
</script> 

where 1059 is the id of the folder passed as parameter

It still doesn't add the Id to the javascript. Gives me the exact same results as before.

 $(document).ready(function () {
           var $gallery_slideShowFolder = $('a.slideGroup-slideShowFolder').colorbox({rel:'slideGroup1',transition:'elastic', slideshow:false, slideshowSpeed: 4000,title: function() { return '' + $(this).attr('title') + ''; }});
           $("a#openGallery").click(function (e) {
               e.preventDefault();
               $gallery_slideShowFolder.eq(0).click();
           });
       });

The puzzle is for me is you get an Id of the picked folder sent via the parameter when you just write out:

<h1> @Parameter.slideFolder </h1>

but when you write it out inside the script tag eg

@Html.Raw("var $gallery_" + Parameter.slideFolder + ...

you get the text 'slideFolder' instead of the Id ?

Also is the parameter on the macro called 'slideShowFolder' or 'slideFolder'

Can't help feeling we're on the cusp of it working!!

HI Steve

Here is a zip of my solution:

https://www.dropbox.com/s/y4zqqozjvz2a0kj/Umbraco616.zip?dl=0

if you unzip and run the solution, the colorbox macro I have, appears to add the picked folder id in the correct places in the javascript variables (view the source of the page)

regards

Marc

is working on a reply...